В современном Битрикс (особенно в админке и Б24) не принято верстать кнопки и сообщения «с нуля».
В ядре есть библиотека UI Kit, которая предоставляет готовые, красивые и стандартизированные элементы.
1. Кнопки (ui.buttons)
Чтобы использовать кнопки, нужно подключить расширение.codePHP
\Bitrix\Main\UI\Extension::load("ui.buttons");Теперь вы можете использовать специальные классы в HTML. Базовый класс — ui-btn.
Примеры кнопок:
<!-- Зеленая кнопка (Успех) -->
<button class="ui-btn ui-btn-success">Сохранить</button>
<!-- Красная кнопка (Опасность) -->
<button class="ui-btn ui-btn-danger">Удалить</button>
<!-- Синяя кнопка (Основная) -->
<button class="ui-btn ui-btn-primary">Действие</button>
<!-- Кнопка-ссылка -->
<a href="/" class="ui-btn ui-btn-link">Отмена</a>
<!-- Маленькая кнопка -->
<button class="ui-btn ui-btn-sm ui-btn-light-border">Настройки</button>
<!-- Кнопка с иконкой и ожиданием (спиннером) -->
<button class="ui-btn ui-btn-primary ui-btn-icon-add ui-btn-wait">Добавить</button>- Размеры: ui-btn-sm, ui-btn-md, ui-btn-lg.
- Стили: ui-btn-light, ui-btn-light-border, ui-btn-active.
- Состояния: Класс ui-btn-wait автоматически добавляет спиннер загрузки и блокирует кнопку (стилистически).
2. Алерты / Сообщения (ui.alerts)
Для вывода уведомлений используется расширение ui.alerts.
\Bitrix\Main\UI\Extension::load("ui.alerts");<!-- Красное сообщение об ошибке -->
<div class="ui-alert ui-alert-danger">
<span class="ui-alert-message">Произошла критическая ошибка!</span>
</div>
<!-- Желтое предупреждение с иконкой и кнопкой закрытия -->
<div class="ui-alert ui-alert-warning ui-alert-icon-warning">
<span class="ui-alert-message">Внимание, срок лицензии истекает.</span>
<span class="ui-alert-close-btn"></span>
</div>3. Иконки (ui.icons)
Набор системных иконок.
\Bitrix\Main\UI\Extension::load("ui.icons");<div class="ui-icon ui-icon-common-user"><i></i></div>
<div class="ui-icon ui-icon-service-bitrix24"><i></i></div>Вывод:
Использование Bitrix UI Kit — это стандарт разработки интерфейсов для административной панели и Битрикс24.
Это экономит время на верстку и гарантирует, что ваши модули будут выглядеть «родными» для системы.
Bitrix UI Kit, ui.buttons, ui.alerts, кнопки битрикс, интерфейс битрикс, UI Extension, CJSCore, верстка битрикс.
