ButtonSet и группировка кнопок

ButtonSet — это компонент, который позволяет логически и визуально объединять несколько кнопок в единый блок. Он используется для управления набором действий, которые имеют тесную функциональную связь. В Svelte реализован через библиотеку Carbon Components Svelte, предоставляя удобный способ организации кнопок с соблюдением дизайн-системы Carbon.

Основные свойства ButtonSet

Компонент ButtonSet предоставляет следующие ключевые свойства:

  • stacked (boolean) Определяет, будут ли кнопки располагаться вертикально. По умолчанию кнопки выстраиваются горизонтально.

    <ButtonSet stacked>
    <Button>Кнопка 1</Button>
    <Button>Кнопка 2</Button>
</ButtonSet>

  • class (string) Позволяет добавить кастомные CSS-классы для дополнительного стилирования блока кнопок.

  • type (string) Определяет поведение кнопок внутри набора. На практике чаще всего управляется через сами кнопки, но иногда полезно применять к контейнеру.

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

Горизонтальная группировка кнопок

<script>
  import { ButtonSet, Button } from 'carbon-components-svelte';
</script>

<ButtonSet>
    <Button kind="primary">Сохранить</Button>
    <Button kind="secondary">Отмена</Button>
</ButtonSet>

В этом примере кнопки будут располагаться в одну линию, следуя дизайну Carbon. kind="primary" делает кнопку основной, а kind="secondary" — вторичной.

Вертикальная группировка кнопок

<ButtonSet stacked>
    <Button kind="primary">Применить</Button>
    <Button kind="secondary">Очистить</Button>
    <Button kind="danger">Удалить</Button>
</ButtonSet>

Использование свойства stacked переводит кнопки в вертикальное расположение, что полезно для узких колонок или панелей инструментов.

Интеграция с другими компонентами

ButtonSet хорошо сочетается с компонентами форм, диалогов и панелей. Например, в модальных окнах можно использовать ButtonSet для аккуратного размещения кнопок действий:

<Modal>
    <ModalHeader title="Подтвердите действие" />
    <ModalBody>
        <p>Вы действительно хотите удалить выбранные элементы?</p>
    </ModalBody>
    <ModalFooter>
        <ButtonSet>
            <Button kind="secondary">Отмена</Button>
            <Button kind="danger">Удалить</Button>
        </ButtonSet>
    </ModalFooter>
</Modal>

Это обеспечивает визуальное соответствие Carbon Design System и поддерживает правильное распределение пространства между кнопками.

Работа с динамическими наборами кнопок

В реальных проектах часто требуется генерировать кнопки динамически на основе данных. В Svelte это легко реализуется через цикл {#each}:

<script>
  import { ButtonSet, Button } from 'carbon-components-svelte';
  
  const actions = [
    { label: 'Сохранить', kind: 'primary' },
    { label: 'Отмена', kind: 'secondary' },
    { label: 'Удалить', kind: 'danger' }
  ];
</script>

<ButtonSet stacked>
    {#each actions as action}
        <Button kind={action.kind}>{action.label}</Button>
    {/each}
</ButtonSet>

Такой подход позволяет централизованно управлять набором кнопок, добавлять или удалять действия без изменения структуры DOM.

Стилизация и кастомизация

Компонент ButtonSet поддерживает расширенную стилизацию через CSS-классы:

  • .bx--btn-set — основной контейнер.
  • .bx--btn-set--stacked — применяется при вертикальном расположении кнопок.
  • Кнопки внутри наследуют стили Carbon, но можно добавлять свои классы через class на каждом Button.

Пример кастомного стиля:

<style>
  .custom-btn-set {
      gap: 1rem; /* увеличиваем расстояние между кнопками */
  }
</style>

<ButtonSet class="custom-btn-set">
    <Button kind="primary">Да</Button>
    <Button kind="secondary">Нет</Button>
</ButtonSet>

Важные рекомендации

  • Для горизонтальных наборов используйте стандартное расположение кнопок. Добавление stacked оправдано только при ограниченном пространстве или для мобильного интерфейса.
  • Сохраняйте логическую связь действий внутри ButtonSet. Компонент предназначен для объединения функционально связанных кнопок, а не для произвольного размещения.
  • При динамическом создании кнопок убедитесь, что каждая кнопка имеет уникальный ключ, если используется {#each}, чтобы Svelte корректно обновлял DOM.

ButtonSet в Carbon Components Svelte является мощным инструментом для организации кнопок и поддерживает все основные принципы дизайн-системы Carbon, обеспечивая визуальное единообразие, доступность и удобство работы с динамическими интерфейсами.

Оглавление