Документация для разработчиков
Темная тема

Кнопки с иконками

Описание и пример

\Bitrix\Main\UI\Extension::load("ui.buttons.icons");

Эта библиотека является дополнением к ui.buttons. Это означает, что принципы работы модификаторов ничем не отличаются от основной библиотеки.

Пример. Код для кнопок.

выглядит так:

<!-- .ui-btn.ui-btn-icon-task:empty -->
<button class="ui-btn ui-btn-icon-task"></button>

<!-- .ui-btn.ui-btn-danger.ui-btn-icon-phone-down -->
<button class="ui-btn ui-btn-danger ui-btn-icon-phone-down">Кнопарь</button>

<!-- .ui-btn-split.ui-btn-primary.ui-btn-icon-setting -->
<div class="ui-btn-split ui-btn-primary ui-btn-icon-setting"> 
	<button class="ui-btn-main">Кнопарь</button> 
	<button class="ui-btn-menu"></button> 
</div>

Кнопка с иконкой без текста

Если вам нужна кнопка только с иконкой, внутри кнопки не должно быть даже пробела, при этом кнопка не может быть тегом <input>. В противном случае псевдокласс :empty не отработает, а кнопка визуально будет выглядеть криво.

<!-- .ui-btn.ui-btn-icon-add:empty -->
<button class="ui-btn ui-btn-icon-add"></button>

Модификатор .ui-btn-icon-add.

Список иконок

КнопкаКод

<!-- .ui-btn.ui-btn-icon-add -->
<button class="ui-btn ui-btn-icon-add">.ui-btn-icon-add</button>

<!-- .ui-btn-split.ui-btn-icon-add -->
<div class="ui-btn-split ui-btn-icon-add"> 
	<button class="ui-btn-main">.ui-btn-icon-add</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-stop-->
<button class="ui-btn ui-btn-icon-stop">.ui-btn-icon-stop</button>

<!-- .ui-btn-split.ui-btn-icon-stop-->
<div class="ui-btn-split ui-btn-icon-stop"> 
	<button class="ui-btn-main">.ui-btn-icon-stop</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-start-->
<button class="ui-btn ui-btn-icon-start">.ui-btn-icon-start</button>

<!-- .ui-btn-split.ui-btn-icon-start-->
<div class="ui-btn-split ui-btn-icon-start"> 
	<button class="ui-btn-main">.ui-btn-icon-start</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-pause-->
<button class="ui-btn ui-btn-icon-pause">.ui-btn-icon-pause</button>

<!-- .ui-btn-split.ui-btn-icon-pause-->
<div class="ui-btn-split ui-btn-icon-pause"> 
	<button class="ui-btn-main">.ui-btn-icon-pause</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-setting-->
<button class="ui-btn ui-btn-icon-setting">.ui-btn-icon-setting</button>

<!-- .ui-btn-split.ui-btn-icon-setting-->
<div class="ui-btn-split ui-btn-icon-setting"> 
	<button class="ui-btn-main">.ui-btn-icon-setting</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-task-->
<button class="ui-btn ui-btn-icon-task">.ui-btn-icon-task</button>

<!-- .ui-btn-split.ui-btn-icon-task-->
<div class="ui-btn-split ui-btn-icon-task"> 
	<button class="ui-btn-main">.ui-btn-icon-task</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-info-->
<button class="ui-btn ui-btn-icon-info">.ui-btn-icon-info</button>

<!-- .ui-btn-split.ui-btn-icon-info-->
<div class="ui-btn-split ui-btn-icon-info"> 
	<button class="ui-btn-main">.ui-btn-icon-info</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-search-->
<button class="ui-btn ui-btn-icon-search">.ui-btn-icon-search</button>

<!-- .ui-btn-split.ui-btn-icon-search-->
<div class="ui-btn-split ui-btn-icon-search"> 
	<button class="ui-btn-main">.ui-btn-icon-search</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-follow-->
<button class="ui-btn ui-btn-icon-follow">.ui-btn-icon-follow</button>

<!-- .ui-btn-split.ui-btn-icon-follow-->
<div class="ui-btn-split ui-btn-icon-follow"> 
	<button class="ui-btn-main">.ui-btn-icon-follow</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-unfollow-->
<button class="ui-btn ui-btn-icon-unfollow">.ui-btn-icon-unfollow</button>

<!-- .ui-btn-split.ui-btn-icon-unfollow-->
<div class="ui-btn-split ui-btn-icon-unfollow"> 
	<button class="ui-btn-main">.ui-btn-icon-unfollow</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-print-->
<button class="ui-btn ui-btn-icon-print">.ui-btn-icon-print</button>

<!-- .ui-btn-split.ui-btn-icon-print-->
<div class="ui-btn-split ui-btn-icon-print"> 
	<button class="ui-btn-main">.ui-btn-icon-print</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-add-folder-->
<button class="ui-btn ui-btn-icon-add-folder">.ui-btn-icon-add-folder</button>

<!-- .ui-btn-split.ui-btn-icon-add-folder-->
<div class="ui-btn-split ui-btn-icon-add-folder"> 
	<button class="ui-btn-main">.ui-btn-icon-add-folder</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-list-->
<button class="ui-btn ui-btn-icon-list">.ui-btn-icon-list</button>

<!-- .ui-btn-split.ui-btn-icon-list-->
<div class="ui-btn-split ui-btn-icon-list"> 
	<button class="ui-btn-main">.ui-btn-icon-list</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-business-->
<button class="ui-btn ui-btn-icon-business">.ui-btn-icon-business</button>

<!-- .ui-btn-split.ui-btn-icon-business-->
<div class="ui-btn-split ui-btn-icon-business"> 
	<button class="ui-btn-main">.ui-btn-icon-business</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-business-confirm-->
<button class="ui-btn ui-btn-icon-business-confirm">.ui-btn-icon-business-confirm</button>

<!-- .ui-btn-split.ui-btn-icon-business-confirm-->
<div class="ui-btn-split ui-btn-icon-business-confirm"> 
	<button class="ui-btn-main">.ui-btn-icon-business-confirm</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-business-warning-->
<button class="ui-btn ui-btn-icon-business-warning">.ui-btn-icon-business-warning</button>

<!-- .ui-btn-split.ui-btn-icon-business-warning-->
<div class="ui-btn-split ui-btn-icon-business-warning"> 
	<button class="ui-btn-main">.ui-btn-icon-business-warning</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-camera-->
<button class="ui-btn ui-btn-icon-camera">.ui-btn-icon-camera</button>

<!-- .ui-btn-split.ui-btn-icon-camera-->
<div class="ui-btn-split ui-btn-icon-camera"> 
	<button class="ui-btn-main">.ui-btn-icon-camera</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-phone-up-->
<button class="ui-btn ui-btn-icon-phone-up">.ui-btn-icon-phone-up</button>

<!-- .ui-btn-split.ui-btn-icon-phone-up-->
<div class="ui-btn-split ui-btn-icon-phone-up"> 
	<button class="ui-btn-main">.ui-btn-icon-phone-up</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-phone-down-->
<button class="ui-btn ui-btn-icon-phone-down">.ui-btn-icon-phone-down</button>

<!-- .ui-btn-split.ui-btn-icon-phone-down-->
<div class="ui-btn-split ui-btn-icon-phone-down"> 
	<button class="ui-btn-main">.ui-btn-icon-phone-down</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-back-->
<button class="ui-btn ui-btn-icon-back">.ui-btn-icon-back</button>

<!-- .ui-btn-split.ui-btn-icon-back-->
<div class="ui-btn-split ui-btn-icon-back"> 
	<button class="ui-btn-main">.ui-btn-icon-back</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-edit-->
<button class="ui-btn ui-btn-icon-edit">.ui-btn-icon-edit</button>

<!-- .ui-btn-split.ui-btn-icon-edit-->
<div class="ui-btn-split ui-btn-icon-edit"> 
	<button class="ui-btn-main">.ui-btn-icon-edit</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-share-->
<button class="ui-btn ui-btn-icon-share">.ui-btn-icon-share</button>

<!-- .ui-btn-split.ui-btn-icon-share-->
<div class="ui-btn-split ui-btn-icon-share"> 
	<button class="ui-btn-main">.ui-btn-icon-share</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-remove-->
<button class="ui-btn ui-btn-icon-remove">.ui-btn-icon-remove</button>

<!-- .ui-btn-split.ui-btn-icon-remove-->
<div class="ui-btn-split ui-btn-icon-remove"> 
	<button class="ui-btn-main">.ui-btn-icon-remove</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-download-->
<button class="ui-btn ui-btn-icon-download">.ui-btn-icon-download</button>

<!-- .ui-btn-split.ui-btn-icon-download-->
<div class="ui-btn-split ui-btn-icon-download"> 
	<button class="ui-btn-main">.ui-btn-icon-download</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-cloud-->
<button class="ui-btn ui-btn-icon-cloud">.ui-btn-icon-cloud</button>

<!-- .ui-btn-split.ui-btn-icon-cloud-->
<div class="ui-btn-split ui-btn-icon-cloud"> 
	<button class="ui-btn-main">.ui-btn-icon-cloud</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-page-->
<button class="ui-btn ui-btn-icon-page">.ui-btn-icon-page</button>

<!-- .ui-btn-split.ui-btn-icon-page-->
<div class="ui-btn-split ui-btn-icon-page"> 
	<button class="ui-btn-main">.ui-btn-icon-page</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-chat-->
<button class="ui-btn ui-btn-icon-chat">.ui-btn-icon-chat</button>

<!-- .ui-btn-split.ui-btn-icon-chat-->
<div class="ui-btn-split ui-btn-icon-chat"> 
	<button class="ui-btn-main">.ui-btn-icon-chat</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-phone-call-->
<button class="ui-btn ui-btn-icon-phone-call">.ui-btn-icon-phone-call</button>

<!-- .ui-btn-split.ui-btn-icon-phone-call-->
<div class="ui-btn-split ui-btn-icon-phone-call"> 
	<button class="ui-btn-main">.ui-btn-icon-phone-call</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-lock-->
<button class="ui-btn ui-btn-icon-lock">.ui-btn-icon-lock</button>

<!-- .ui-btn-split.ui-btn-icon-lock-->
<div class="ui-btn-split ui-btn-icon-lock"> 
	<button class="ui-btn-main">.ui-btn-icon-lock</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-done-->
<button class="ui-btn ui-btn-icon-done">.ui-btn-icon-done</button>

<!-- .ui-btn-split.ui-btn-icon-done-->
<div class="ui-btn-split ui-btn-icon-done"> 
	<button class="ui-btn-main">.ui-btn-icon-done</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-disk-->
<button class="ui-btn ui-btn-icon-disk">.ui-btn-icon-disk</button>

<!-- .ui-btn-split.ui-btn-icon-disk-->
<div class="ui-btn-split ui-btn-icon-disk"> 
	<button class="ui-btn-main">.ui-btn-icon-disk</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-mail-->
<button class="ui-btn ui-btn-icon-mail">.ui-btn-icon-mail</button>

<!-- .ui-btn-split.ui-btn-icon-mail-->
<div class="ui-btn-split ui-btn-icon-mail"> 
	<button class="ui-btn-main">.ui-btn-icon-mail</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-alert-->
<button class="ui-btn ui-btn-icon-alert">.ui-btn-icon-alert</button>

<!-- .ui-btn-split.ui-btn-icon-alert-->
<div class="ui-btn-split ui-btn-icon-alert"> 
	<button class="ui-btn-main">.ui-btn-icon-alert</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-angle-up-->
<button class="ui-btn ui-btn-icon-angle-up">.ui-btn-icon-angle-up</button>

<!-- .ui-btn-split.ui-btn-icon-angle-up-->
<div class="ui-btn-split ui-btn-icon-angle-up"> 
	<button class="ui-btn-main">.ui-btn-icon-angle-up</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-angle-down-->
<button class="ui-btn ui-btn-icon-angle-down">.ui-btn-icon-angle-down</button>

<!-- .ui-btn-split.ui-btn-icon-angle-down-->
<div class="ui-btn-split ui-btn-icon-angle-down"> 
	<button class="ui-btn-main">.ui-btn-icon-angle-down</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-dots-->
<button class="ui-btn ui-btn-icon-dots">.ui-btn-icon-dots</button>

<!-- .ui-btn-split.ui-btn-icon-dots-->
<div class="ui-btn-split ui-btn-icon-dots"> 
	<button class="ui-btn-main">.ui-btn-icon-dots</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-forward-->
<button class="ui-btn ui-btn-icon-forward">.ui-btn-icon-forward</button>

<!-- .ui-btn-split.ui-btn-icon-forward-->
<div class="ui-btn-split ui-btn-icon-forward"> 
	<button class="ui-btn-main">.ui-btn-icon-forward</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-fail-->
<button class="ui-btn ui-btn-icon-fail">.ui-btn-icon-fail</button>

<!-- .ui-btn-split.ui-btn-icon-fail-->
<div class="ui-btn-split ui-btn-icon-fail"> 
	<button class="ui-btn-main">.ui-btn-icon-fail</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-success-->
<button class="ui-btn ui-btn-icon-success">.ui-btn-icon-success</button>

<!-- .ui-btn-split.ui-btn-icon-success-->
<div class="ui-btn-split ui-btn-icon-success"> 
	<button class="ui-btn-main">.ui-btn-icon-success</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-plan-->
<button class="ui-btn ui-btn-icon-plan">.ui-btn-icon-plan</button>

<!-- .ui-btn-split.ui-btn-icon-plan-->
<div class="ui-btn-split ui-btn-icon-plan"> 
	<button class="ui-btn-main">.ui-btn-icon-plan</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-eye-opened-->
<button class="ui-btn ui-btn-icon-eye-opened">.ui-btn-icon-eye-opened</button>

<!-- .ui-btn-split.ui-btn-icon-eye-opened-->
<div class="ui-btn-split ui-btn-icon-eye-opened"> 
	<button class="ui-btn-main">.ui-btn-icon-eye-opened</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-eye-closed-->
<button class="ui-btn ui-btn-icon-eye-closed">.ui-btn-icon-eye-closed</button>

<!-- .ui-btn-split.ui-btn-icon-eye-closed-->
<div class="ui-btn-split ui-btn-icon-eye-closed"> 
	<button class="ui-btn-main">.ui-btn-icon-eye-closed</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-tariff-->
<button class="ui-btn ui-btn-icon-tariff">.ui-btn-icon-tariff</button>

<!-- .ui-btn-split.ui-btn-icon-tariff-->
<div class="ui-btn-split ui-btn-icon-tariff"> 
	<button class="ui-btn-main">.ui-btn-icon-tariff</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-battery-->
<button class="ui-btn ui-btn-icon-battery">.ui-btn-icon-battery</button>

<!-- .ui-btn-split.ui-btn-icon-battery-->
<div class="ui-btn-split ui-btn-icon-battery"> 
	<button class="ui-btn-main">.ui-btn-icon-battery</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-no-battery-->
<button class="ui-btn ui-btn-icon-no-battery">.ui-btn-icon-no-battery</button>

<!-- .ui-btn-split.ui-btn-icon-no-battery-->
<div class="ui-btn-split ui-btn-icon-no-battery"> 
	<button class="ui-btn-main">.ui-btn-icon-no-battery</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-half-battery-->
<button class="ui-btn ui-btn-icon-half-battery">.ui-btn-icon-half-battery</button>

<!-- .ui-btn-split.ui-btn-icon-half-battery-->
<div class="ui-btn-split ui-btn-icon-half-battery"> 
	<button class="ui-btn-main">.ui-btn-icon-half-battery</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-low-battery-->
<button class="ui-btn ui-btn-icon-low-battery">.ui-btn-icon-low-battery</button>

<!-- .ui-btn-split.ui-btn-icon-low-battery-->
<div class="ui-btn-split ui-btn-icon-low-battery"> 
	<button class="ui-btn-main">.ui-btn-icon-low-battery</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-crit-battery-->
<button class="ui-btn ui-btn-icon-crit-battery">.ui-btn-icon-crit-battery</button>

<!-- .ui-btn-split.ui-btn-icon-crit-battery-->
<div class="ui-btn-split ui-btn-icon-crit-battery"> 
	<button class="ui-btn-main">.ui-btn-icon-crit-battery</button> 
	<button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-demo-->
<button class="ui-btn ui-btn-icon-demo">.ui-btn-icon-demo</button>

<!-- .ui-btn-split.ui-btn-icon-demo-->
<div class="ui-btn-split ui-btn-icon-demo"> 
	<button class="ui-btn-main">.ui-btn-icon-demo</button> 
	<button class="ui-btn-menu"></button> 
</div>


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
Андрей Чурсин
Сообщение не промодерировано, возможны ошибки и неточности.
А что на счёт размеров и цвета??  
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх