Группа кнопок

Группа объединяет несколько связанных кнопок в один компактный элемент: соседние границы сливаются, внешние углы сохраняют радиус кнопок. Берите её для близких по смыслу действий над одним объектом; для выбора одного значения из нескольких есть Smart-компонент Button Group.

Пример

<div class="sf-button-group" role="group" aria-label="Масштаб">
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Уменьшить</span></button>
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Сбросить</span></button>
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Увеличить</span></button>
</div>

Разметка

Минимальную разметку показывает пример выше: контейнер <div class="sf-button-group"> и прямые дочерние кнопки sf-button.

• Кнопки лежат прямыми потомками контейнера: группа соединяет только их.
• Контейнеру нужно доступное имя — aria-label или aria-labelledby. Роль group скрипт компонента ставит сам, если роли нет.
• Скрипт расставляет кнопкам классы сегментов segment-start, segment-middle и segment-end по их порядку и обновляет их при добавлении и удалении кнопок. Писать эти классы вручную не нужно.
• Все кнопки группы берут один размер и одну схему; вид может отличаться, например у выбранного действия.
• Группа не переносится на новую строку: если кнопки не помещаются по ширине, она прокручивается по горизонтали.

Варианты

Ориентация

По умолчанию кнопки стоят в строку. Атрибут data-orientation="vertical" на контейнере ставит их в столбец: кнопки занимают общую ширину группы и сохраняют один внешний контур. Вертикальная группа подходит узкой боковой панели. Атрибут aria-orientation="vertical" скрипт понимает так же, но сам переносит значение в data-orientation.

<div class="flex flex-wrap gap-4 items-start">
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-button-group" role="group" aria-label="Действия с файлом, по горизонтали">
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Открыть</span></button>
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Переименовать</span></button>
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Переместить</span></button>
    </div>
    <code class="text-1/2 color-on-surface-variant">data-orientation="horizontal"</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-button-group" role="group" aria-label="Действия с файлом, по вертикали" data-orientation="vertical">
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Открыть</span></button>
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Переименовать</span></button>
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Переместить</span></button>
    </div>
    <code class="text-1/2 color-on-surface-variant">data-orientation="vertical"</code>
  </div>
</div>

Состояния

Нажатая кнопка

Кнопка с aria-pressed="true" или классом active поднимается над соседями: её граница рисуется поверх общих границ группы. aria-pressed ставьте только настоящей кнопке-переключателю, которая включает и выключает свой параметр независимо от остальных. Исключение — группа выбора темы из кнопок sf-theme-button с data-theme: aria-pressed в ней ставит сам Framework, нажата кнопка выбранного режима (см. Тема).

<div class="sf-button-group" role="group" aria-label="Начертание текста">
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1 active" aria-pressed="true"><span class="sf-button-text-container">Жирный</span></button>
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1" aria-pressed="false"><span class="sf-button-text-container">Курсив</span></button>
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1" aria-pressed="false"><span class="sf-button-text-container">Подчёркнутый</span></button>
</div>

Фокус

При переходе клавишей Tab кольцо фокуса рисуется внутри текущей кнопки и поверх общих границ, поэтому соседние сегменты его не обрезают. Щелчок мышью кольца не показывает. В примере фокус показан классом focus-visible, который CSS читает наравне с :focus-visible.

<div class="sf-button-group" role="group" aria-label="Масштаб">
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Уменьшить</span></button>
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1 focus-visible"><span class="sf-button-text-container">Сбросить</span></button>
  <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"><span class="sf-button-text-container">Увеличить</span></button>
</div>

Доступность

• Контейнер с ролью group и доступным именем сообщает, что кнопки связаны.
• Каждая кнопка остаётся отдельной точкой Tab и сохраняет своё нативное действие: группа не перехватывает нажатия.
• Для выбора одного значения из нескольких не собирайте radio-семантику вручную: Smart Button Group создаёт radiogroup и управляет одной точкой Tab. Роль toolbar ставьте только настоящей панели инструментов с полной клавиатурной моделью стрелок.
• aria-orientation скрипт оставляет только ролям, которые его поддерживают (toolbar, radiogroup, tablist, menu, listbox, tree); у роли group он его снимает.
• Внешние углы и границы сегментов зеркалятся при письме справа налево.

JavaScript

Скрипт компонента находит группы .sf-button-group при загрузке страницы, расставляет роль, ориентацию и классы сегментов и следит за изменением состава группы. Для разметки, вставленной позже, он даёт две функции:

• SF.ButtonGroup.init(target) — подключает все группы внутри target (по умолчанию document) и сам target, если это группа;
• SF.ButtonGroup.sync(group) — один раз пересчитывает роль, ориентацию и сегменты одной группы.

Событий компонент не отправляет. Объект SF.ButtonGroup появляется вместе со скриптом компонента; Loader подключает его, когда находит .sf-button-group. SF.Loader появляется к событию sf-loader-init на window, а SF.Loader.ready('ButtonGroup', callback) вызывает функцию, когда компонент зарегистрирован:

const whenLoader = (run) => (window.SF?.Loader ? run() : window.addEventListener('sf-loader-init', run, {once: true}));

whenLoader(() => SF.Loader.ready('ButtonGroup', () => {
  SF.ButtonGroup.init(document.querySelector('#toolbar-area'));
}));

Классы

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Настройка

Эти переменные — поверхность настройки компонента. Их имена стабильны: переименовать или убрать такую переменную можно только через журнал изменений, с предупреждением, как атрибут. Framework их не задаёт, поэтому значение можно поставить на сам компонент (.sf-button-group) или на любого предка. Переменные действуют на спокойный вид; наведение, фокус, нажатие, недоступность и ошибка рисуются поверх, поэтому состояния остаются видны.

.sf-button-group {
  --sf-button-group-background-color: var(--sf-surface-container);
}

Устройство

Остальные переменные — внутренняя проводка компонента: модификаторы задают им значения, а части их читают. Их имена и устройство могут меняться в любом выпуске, поэтому проект их не задаёт. Значение по умолчанию — из базового правила блока (.sf-button-group); переменную без него задают только модификаторы.

См. также

• Кнопки
• Button Group — Smart-компонент