Button Group

Компонент Button Group в библиотеке Naive UI предназначен для объединения нескольких кнопок в единый визуальный блок, что позволяет создавать удобные панели действий с согласованным стилем и выравниванием. Он является контейнером, который управляет поведением и внешним видом всех вложенных кнопок.

import { NButton, NButtonGroup } from 'naive-ui';

Использование базовой группы кнопок выглядит следующим образом:

<n-button-group>
  <n-button>Сохранить</n-button>
  <n-button>Отменить</n-button>
</n-button-group>

В результате две кнопки визуально объединяются, создавая аккуратный блок с одинаковой высотой и плавными границами.

Свойства NButtonGroup

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

1. size

Свойство size позволяет задавать размер всех кнопок внутри группы. Поддерживаемые значения:

  • small — компактные кнопки
  • medium — стандартный размер (по умолчанию)
  • large — крупные кнопки
<n-button-group size="large">
  <n-button>Применить</n-button>
  <n-button>Сбросить</n-button>
</n-button-group>

2. vertical

Свойство vertical определяет ориентацию кнопок. По умолчанию кнопки располагаются горизонтально. Если установить vertical в true, кнопки выстроятся в колонку.

<n-button-group vertical>
  <n-button>Вверх</n-button>
  <n-button>Вниз</n-button>
</n-button-group>

3. tag

Свойство tag позволяет изменить HTML-элемент, используемый для обертки кнопок. Обычно используется div или span. Это полезно для семантической разметки и интеграции с другими компонентами.

Варианты стилей кнопок в группе

Naive UI поддерживает несколько типов кнопок, которые могут комбинироваться внутри одной группы для создания разнообразного интерфейса:

  • primary — основной акцентный цвет
  • success — зеленая кнопка для успешных действий
  • warning — желтая кнопка для предупреждений
  • error — красная кнопка для ошибок или удаления
<n-button-group>
  <n-button type="primary">Сохранить</n-button>
  <n-button type="error">Удалить</n-button>
  <n-button type="success">Применить</n-button>
</n-button-group>

Комбинируя разные типы кнопок, можно визуально обозначать приоритет действий в интерфейсе.

Контроль состояния кнопок в группе

Все стандартные состояния кнопок Naive UI (disabled, loading) работают и внутри группы. Можно как отключить всю группу, так и отдельные кнопки:

<n-button-group>
  <n-button disabled>Сохранить</n-button>
  <n-button loading>Загрузка</n-button>
  <n-button>Отмена</n-button>
</n-button-group>

Группы также поддерживают управление фокусом и активным состоянием для улучшения UX.

Интерактивные группы с выбором

Для реализации сценариев, где нужно выбрать один вариант из группы (подобно радиокнопкам), используют кнопки с событием click и отслеживанием состояния через v-model:

<template>
  <n-button-group>
    <n-button :ghost="selected === 'A'" @click="selected = 'A'">Вариант A</n-button>
    <n-button :ghost="selected === 'B'" @click="selected = 'B'">Вариант B</n-button>
    <n-button :ghost="selected === 'C'" @click="selected = 'C'">Вариант C</n-button>
  </n-button-group>
</template>

<script setup>
import { ref } from 'vue';
const selected = ref('A');
</script>

Свойство ghost делает кнопку визуально активной или неактивной в зависимости от выбранного состояния, создавая эффект переключения.

Комбинирование с другими компонентами

Button Group легко интегрируется с другими компонентами Naive UI:

  • Dropdown — вложенные действия:
<n-button-group>
  <n-button>Главное действие</n-button>
  <n-dropdown>
    <template #trigger>
      <n-button>Дополнительно</n-button>
    </template>
    <n-dropdown-menu>
      <n-dropdown-item>Опция 1</n-dropdown-item>
      <n-dropdown-item>Опция 2</n-dropdown-item>
    </n-dropdown-menu>
  </n-dropdown>
</n-button-group>
  • Tooltip — подсказки для каждой кнопки:
<n-button-group>
  <n-tooltip content="Сохранить файл">
    <n-button>Сохранить</n-button>
  </n-tooltip>
  <n-tooltip content="Удалить файл">
    <n-button>Удалить</n-button>
  </n-tooltip>
</n-button-group>

Это позволяет создавать сложные панели действий с минимальным кодом.

Адаптивность и стиль

Button Group автоматически подстраивается под ширину родительского контейнера. Можно комбинировать с CSS-свойствами:

<n-button-group style="width: 100%;">
  <n-button style="flex: 1;">Кнопка 1</n-button>
  <n-button style="flex: 1;">Кнопка 2</n-button>
  <n-button style="flex: 1;">Кнопка 3</n-button>
</n-button-group>

Использование flex: 1 гарантирует равномерное распределение кнопок по ширине, что особенно важно для адаптивного дизайна.

Практические советы

  • Использовать Button Group для объединения действий, которые логически связаны между собой.
  • Для вертикальных панелей часто устанавливают vertical и size="small", чтобы экономить место.
  • При использовании нескольких типов кнопок внутри одной группы важно сохранять визуальный контраст и не перегружать интерфейс цветами.
  • Для переключаемых групп применять ghost или собственные стили :class для активного состояния.

Button Group является универсальным инструментом Naive UI, который упрощает создание аккуратных, согласованных панелей действий, поддерживая все стандартные возможности кнопок и гибко адаптируясь под дизайн приложения.

Оглавление