Типовое использование

Подключение

Если необходимо на странице вывести аналогичный тулбар с кнопками, фильтром, то обратите внимание на примеры ниже.

Доступно с ui 19.0.100.

\Bitrix\Main\Loader::includeModule('ui'); 

Важно: если необходимо показывать страницу в слайдере, то при вызове компонента ui.sidepanel.wrapper передайте параметр "USE_UI_TOOLBAR" => "Y".

Добавление фильтра

Параметры для добавления фильтра аналогичны параметрам для подключения компонента bitrix:main.ui.filter.

\Bitrix\UI\Toolbar\Facade\Toolbar::addFilter([
	'GRID_ID' => $arResult['GRID']['ID'],
	'FILTER_ID' => $arResult['FILTER']['FILTER_ID'],
	'FILTER' => $arResult['FILTER']['FILTER'],
	'FILTER_PRESETS' => $arResult['FILTER']['FILTER_PRESETS'],
	'ENABLE_LIVE_SEARCH' => $arResult['FILTER']['ENABLE_LIVE_SEARCH'],
	'ENABLE_LABEL' => $arResult['FILTER']['ENABLE_LABEL'],
	'RESET_TO_DEFAULT_MODE' => $arResult['FILTER']['RESET_TO_DEFAULT_MODE'],
]);

Добавление кнопок

Кнопки в Toolbar добавляются методом

\Bitrix\UI\Toolbar\Facade\Toolbar::addButton(array|Button $button) 

Примеры описания кнопок

<?
//кнопка-ссылка
$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"
]);

//кнопка с обработкой на js, статический метод
$connectButton = new \Bitrix\UI\Buttons\Button([
	"color" => \Bitrix\UI\Buttons\Color::LIGHT_BORDER,
	"icon" => \Bitrix\UI\Buttons\Icon::DISK,
	"click" => new \Bitrix\UI\Buttons\JsHandler(
		"BX.SomeModule.Actions.handleClick" //ссылка на функцию
	),
	"text" => "Connect me"
]);

//кнопка с обработкой на js, произвольный код
$connectButton = new \Bitrix\UI\Buttons\Button([
	"color" => \Bitrix\UI\Buttons\Color::LIGHT_BORDER,
	"icon" => \Bitrix\UI\Buttons\Icon::DISK,
	"click" => new \Bitrix\UI\Buttons\JsCode(
		"BX.SidePanel.Instance.open('calendar-settings')" //произвольный код, который будет выполнен при клике на кнопку
	),
	"text" => "Connect me"
]);

//кнопка с обработкой на js, произвольный код
$connectButton = new \Bitrix\UI\Buttons\Button([
	"color" => \Bitrix\UI\Buttons\Color::LIGHT_BORDER,
	"icon" => \Bitrix\UI\Buttons\Icon::DISK,
	"click" => new \Bitrix\UI\Buttons\JsCode(
		"BX.SidePanel.Instance.open('calendar-settings')" //произвольный код, который будет выполнен при клике на кнопку
	),
	"text" => "Connect me"
]);

//кнопка с обработкой на js, выполнение события
$connectButton = new \Bitrix\UI\Buttons\Button([
	"color" => \Bitrix\UI\Buttons\Color::LIGHT_BORDER,
	"icon" => \Bitrix\UI\Buttons\Icon::DISK,
	"click" => new \Bitrix\UI\Buttons\JsEvent(
		"BX.SomeModule.SomeClass:onClick" //событие, которое выполнится при клике на кнопку
	),
	"text" => "Connect me"
]);

//выпадающее меню из кнопки. Структура аналогична BX.PopupMenuWindow
$menuButton = new \Bitrix\UI\Buttons\Button([
	"text" => "Menu",
	"menu" => [
		"items" => [
			["text" => "Детальное описание", "href" => "/path/to/page"],
			["text" => "Редактировать", "disabled" => true],
			["delimiter" => true],
			[
				"text" => "Уничтожить", 
				"onclick" => new \Bitrix\UI\Buttons\JsHandler(
					"BX.SomeModule.handleClick" //ссылка на функцию
				)
			],
		],
	],
]);


//Split-кнопки
$splitButton = new Bitrix\UI\Buttons\Split\CreateButton();
//аналогично меню, как в пример выше
$splitButton->setMenu([
	"items" => [
		["text" => "Детальное описание", "href" => "/path/to/page"],
		["delimiter" => true],
	],
]);

//можно получить доступ к главной кнопке
$mainButton = $splitButton->getMainButton();
$mainButton->setHovered();
//или к кнопке меню, из которой обычно что-то выпадает
$menuButton = $splitButton->getMenuButton();
$menuButton->setActive(false);


//у объекта кнопки есть много вспомогательных методов, 
//для изменения визуального отображения
$connectButton->addClass('intranet-button-some');]
$connectButton->removeClass('intranet-button-another-one');
$connectButton->setText(string);
$connectButton->setColor(\Bitrix\UI\Buttons\Color);
$connectButton->setIcon(\Bitrix\UI\Buttons\Icon);
$connectButton->setState(\Bitrix\UI\Buttons\State);
$connectButton->setSize(\Bitrix\UI\Buttons\Size);
$connectButton->setMaxWidth(integer);
$connectButton->setCounter(integer|string);
$connectButton->setMenu([...]);
$connectButton->setNoCaps(false|true);
$connectButton->setRound(false|true);
$connectButton->setDropdown(false|true);
$connectButton->setLink(string);
$connectButton->setTag(\Bitrix\UI\Buttons\Tag);

Предустановленные кнопки

В этих кнопках по умолчанию есть текст и цвет.

\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

Минимальная ширина заголовка в px

 \Bitrix\UI\Toolbar\Facade\Toolbar::setTitleMinWidth(158);

Иконки и Кнопки

Панель тулбара является адаптивной. Если не хватает свободного места на экране, кнопки, начиная с правой стороны, поочередно схлопываются. Текст пропадает, остается только иконка.

Если по умолчанию кнопка не имеет иконки, то в атрибуте data-toolbar-collapsed-icon необходимо указать класс иконки, которая появится при схлопывании. Если у кнопки нет ни иконки, ни дата-атрибута, она не схлопывается и в консоль выводится предупреждение.

$splitButton = new Bitrix\UI\Buttons\Split\CreateButton([
	'text' => 'Split Button',
	'dataset' => [
		'toolbar-collapsed-icon' => Bitrix\UI\Buttons\Icon::CAMERA
	]
]);