Если вы работаете с коробкой, то замечали наверное, как часто программисты добавляют кнопки в тело страницы, а сами кнопки выглядят как-то не очень в стиле Битрикс.
Лично меня это всегда коробило, пока я не начал разбираться с UI сам.
Первое, что бросилось в глаза это отсутствие описания стилей. Любой UI довольно подробно расписан, но разработчики Битрикс, очевидно думают иначе. В документации мы находим множество способов добавить кнопки и фильтры, но о том как все это дело стилизовать ни слова.
Очевидно, опять предполагается, что мы полезем в изходный код и посмотрим как реализовано там… Откровенно, это очень раздражает, особенно, когда речь идет о таких простых вещах.
Перед тем как работать с библиотекой UI Битрикс, необходимо ее подключить:
|
1 |
\Bitrix\Main\Loader::includeModule('ui'); |
Это может оказаться необязательным, если вы работаете через фронт Битрикс24, но на всякий случай подключать все же стоит. Если автозагрузчик классов уже подключил библиотеку, он просто проигнорирует наше подключение, а вот если библиотека еще не загружена, то тулбар не появится.
Итак, берем код кнопки из документации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//кнопка-ссылка $linkButton = new \Bitrix\UI\Buttons\Button([ "link" => "https://cp.bitrix.ru", "text" => "Home" ]); \Bitrix\UI\Toolbar\Facade\Toolbar::addButton($linkButton); //либо можно сразу передавать массив. На основне него будет создан // \Bitrix\UI\Buttons\Button \Bitrix\UI\Toolbar\Facade\Toolbar::addButton([ "link" => "https://cp.bitrix.ru", "text" => "Home" ]); |
В массив передаваемый методу addButton мы можем передать необходимые значения. К примеру, мы можем передать многомерный массив "menu" с вложенным массивом «items», что удобно при создании вложенных меню. Сейчас же, нас интересует атрибуты "color" и "icon".
Здесь мы укажем "color" => \Bitrix\UI\Buttons\Color::LIGHT_BORDER, и "icon" => \Bitrix\UI\Buttons\Icon::DISK, как в документации.
|
1 2 3 4 5 6 7 |
//кнопка-ссылка $linkButton = new \Bitrix\UI\Buttons\Button([ "link" => "#", "text" => "Подать заявку", "color" => \Bitrix\UI\Buttons\Color::LIGHT_BORDER, "icon" => \Bitrix\UI\Buttons\Icon::DISK, ]); |
Добавим код в шаблон нашего компонента или просто в любое место страницы (в режиме правки php конечно же) и увидим отображение кнопки.
Результат:
Отлично. Все работает, но где изменять цвета?
Я перерыл всю документацию, прежде чем додумался посмотреть описание классов на замечательном сайте.
Поля данных |
|
| const | DANGER = «ui-btn-danger» |
| const | DANGER_DARK = «ui-btn-danger-dark» |
| const | DANGER_LIGHT = «ui-btn-danger-light» |
| const | SUCCESS = «ui-btn-success» |
| const | SUCCESS_LIGHT = «ui-btn-success-light» |
| const | PRIMARY_DARK = «ui-btn-primary-dark» |
| const | PRIMARY = «ui-btn-primary» |
| const | SECONDARY = «ui-btn-secondary» |
| const | LINK = «ui-btn-link» |
| const | LIGHT = «ui-btn-light» |
| const | LIGHT_BORDER = «ui-btn-light-border» |
Меняем константы передаваемые методам «color» и «icon»:
"color" => \Bitrix\UI\Buttons\Color::SUCCESS,
"icon" => \Bitrix\UI\Buttons\icon::BUSINESS_CONFIRM,
Получаем зеленую кнопку, как и хотели.
На этом же сайте, нашлись и иконки, которых хоть и немного, но достаточно для 90% моих задач.
! Обратите внимание, что панель тулбара является адаптивной и если места для всех кнопок не хватает они «схлопываются», остаются только иконки.
Если по умолчанию кнопка не имеет иконки, то в атрибуте data-toolbar-collapsed-icon необходимо указать класс иконки, которая появится при схлопывании. Если у кнопки нет ни иконки, ни дата-атрибута, она не схлопывается и в консоль выводится предупреждение.
|
1 2 3 4 5 6 |
$splitButton = new Bitrix\UI\Buttons\Split\CreateButton([ 'text' => 'Split Button', 'dataset' => [ 'toolbar-collapsed-icon' => Bitrix\UI\Buttons\Icon::CAMERA ] ]); |
Поля данных |
|
| const | UNFOLLOW = «ui-btn-icon-unfollow» |
| const | FOLLOW = «ui-btn-icon-follow» |
| const | ADD = «ui-btn-icon-add» |
| const | STOP = «ui-btn-icon-stop» |
| const | START = «ui-btn-icon-start» |
| const | ADD_FOLDER = «ui-btn-icon-add-folder» |
| const | PAUSE = «ui-btn-icon-pause» |
| const | SETTING = «ui-btn-icon-setting» |
| const | SETTINGS = «ui-btn-icon-setting» |
| const | TASK = «ui-btn-icon-task» |
| const | INFO = «ui-btn-icon-info» |
| const | SEARCH = «ui-btn-icon-search» |
| const | PRINTER = «ui-btn-icon-print» |
| const | MENU = «ui-btn-icon-list» |
| const | BUSINESS = «ui-btn-icon-business» |
| const | BUSINESS_CONFIRM = «ui-btn-icon-business-confirm» |
| const | BUSINESS_WARNING = «ui-btn-icon-business-warning» |
| const | CAMERA = «ui-btn-icon-camera» |
| const | PHONE_UP = «ui-btn-icon-phone-up» |
| const | PHONE_DOWN = «ui-btn-icon-phone-down» |
| const | BACK = «ui-btn-icon-back» |
| const | DISK = «ui-btn-icon-disk» |
| const | DONE = «ui-btn-icon-done» |
| const | REMOVE = «ui-btn-icon-remove» |
Оттуда же я узнал, что есть еще и класс Size:
Поля данных |
|
| const | LARGE = «ui-btn-lg» |
| const | MEDIUM = «ui-btn-md» |
| const | SMALL = «ui-btn-sm» |
| const | EXTRA_SMALL = «ui-btn-xs» |
Так же можно воспользоваться предустановленными кнопками:
Предустановленные кнопки
В этих кнопках по умолчанию есть текст и цвет.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
\Bitrix\UI\Buttons\AddButton \Bitrix\UI\Buttons\CancelButton \Bitrix\UI\Buttons\CreateButton \Bitrix\UI\Buttons\ApplyButton \Bitrix\UI\Buttons\CloseButton \Bitrix\UI\Buttons\SendButton \Bitrix\UI\Buttons\SaveButton \Bitrix\UI\Buttons\SettingsButton \Bitrix\UI\Buttons\Split\AddButton \Bitrix\UI\Buttons\Split\CancelButton \Bitrix\UI\Buttons\Split\CreateButton \Bitrix\UI\Buttons\Split\ApplyButton \Bitrix\UI\Buttons\Split\CloseButton \Bitrix\UI\Buttons\Split\SendButton \Bitrix\UI\Buttons\Split\SaveButton |
Немного лучше документирована UI-библиотека для JS (что логично). Обращаясь к этим способам, мы уже можем получить что-то более-менее сносное.
Жаль, что приходится по кусочкам собирать информацию об UI битрикс. Хуже документирована только работа с административной частью. Мне нравится писать приложения которые гармонируют с окружающим интерфейсом, при этом, постоянно сталкиваюсь с тем, что Битрикс совсем не про это. Никакого комфорта, ни для программистов ни для пользователей.
