Панель действий

Подключение

JS (ES6)

import { RightButtons } from 'ui.actions-bar';

const options = {
    buttonsContainer: document.getElementById('buttons-container'),
    collapsable: true
};

const rightButtons = new RightButtons(options);
rightButtons.init();

JS (ES5)

var RightButtons = require('ui.actions-bar').RightButtons;

var options = {
    buttonsContainer: document.getElementById('buttons-container'),
    collapsable: true
};

var rightButtons = new RightButtons(options);
rightButtons.init();

PHP

<?php
use Bitrix\UI\Buttons\Button;
use Bitrix\UI\Buttons\Color;
use Bitrix\UI\Buttons\Size;
use Bitrix\UI\Extension;

// Подключаем необходимое расширение
Extension::load('ui.buttons');

// Создаем кнопку через API
$button = Button::create([
    'text' => 'Новая кнопка',
    'color' => Color::SUCCESS,
    'size' => Size::SMALL,
    'useAirDesign' => true
]);

// Получаем HTML-код кнопки
$buttonHtml = $button->render();
?>
<div id="buttons-container">
    <?php echo $buttonHtml; ?>
</div>
<script>
    var options = {
        buttonsContainer: document.getElementById('buttons-container'),
        collapsable: true
    };

    var rightButtons = new BX.ActionsBar.RightButtons(options);
    rightButtons.init();
 
// Рекомендуется вызывать rightButtons.init() сразу после рендера контейнера с кнопками,
// это позволит избежать визуальных дерганий кнопок при рендере страницы.
</script>

Использование с ui.counterpanel и ui.navigationpanel

Расширение ui.actions-bar позволяет располагать счетчик ui.counterpanel и навигационную панель ui.navigationpanel, используя специальные CSS-классы:

• ui-actions-bar — основной контейнер панели. Обозначен красной рамкой на изображении ниже.
• ui-actions-bar__panel — контейнеры для счетчиков ui.counterpanel и навигационной панели ui.navigationpanel. Обозначены синими рамками.
• ui-actions-bar__buttons — контейнер для кнопок. Обозначен зеленой рамкой.

Пример структуры:

<div class="ui-actions-bar">
    <div class="ui-actions-bar__panel --wide">
       <div class="ui-counterpanel">... </div>
    </div>
    <div class="ui-actions-bar__buttons>
       <button class="ui-btn">Кнопка 1</button>
       <button class="ui-btn">Кнопка 2</button>
    </div>
</div>

Расширение управляет выравниванием, отступами и гибкостью между секциями. Оно также позволяет расширить одну из секций на всю доступную ширину с помощью класса --wide.

Класс RightButtons

Класс RightButtons управляет кнопками в правой части панели. При недостатке места он не скрывает кнопки, а сжимает их с помощью API кнопок: текст убирает и оставляет только иконку. Это позволяет сохранить видимость кнопки, но уменьшить занимаемое пространство.

Методы класса

Примеры использования

Простой пример с контейнером и кнопками

const options = {
    buttonsContainer: document.getElementById('buttons-container'),
    collapsable: true
};

const rightButtons = new RightButtons(options);
rightButtons.init();

Пример с динамическим добавлением кнопки через API

import { Button, ButtonColor, ButtonSize } from 'ui.buttons';

const button = new Button({
    text: 'Новая кнопка',
    color: ButtonColor.DEFAULT,
    size: ButtonSize.SMALL,
    useAirDesign: true
});

const buttonElement = button.render();
document.getElementById('buttons-container').appendChild(buttonElement);

// После добавления кнопки, необходимо перезапустить инициализацию
rightButtons.init();

Дополнительная информация

• Расширение использует ResizeObserver и MutationObserver для отслеживания изменений в DOM и автоматического управления кнопками.