Группы кнопок

Naive UI предоставляет гибкий механизм для создания групп кнопок, который позволяет объединять несколько кнопок в единый визуальный блок, управлять их расположением, стилем и поведением. В основе работы с группами кнопок лежит компонент n-button-group, который является контейнером для элементов n-button.

Основная структура

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

<template>
  <n-button-group>
    <n-button>Кнопка 1</n-button>
    <n-button>Кнопка 2</n-button>
    <n-button>Кнопка 3</n-button>
  </n-button-group>
</template>

Ключевые моменты:

  • n-button-group автоматически выравнивает дочерние кнопки в горизонтальный ряд.
  • Каждая кнопка внутри группы наследует стили и размеры от родительского контейнера.
  • Можно комбинировать разные виды кнопок (primary, secondary, info, error) в одной группе для визуального разделения функций.

Настройка размера

Размер всех кнопок в группе можно задать через проп size:

<n-button-group size="large">
  <n-button type="primary">Сохранить</n-button>
  <n-button type="default">Отмена</n-button>
</n-button-group>

Возможные значения size:

  • small — компактная кнопка
  • medium — стандартная кнопка
  • large — увеличенная кнопка

Размер, заданный в n-button-group, применяется ко всем кнопкам внутри группы, что обеспечивает единообразие интерфейса.

Вертикальные и горизонтальные группы

По умолчанию группа кнопок располагается горизонтально. Для создания вертикального расположения используется проп vertical:

<n-button-group vertical>
  <n-button type="primary">Вверх</n-button>
  <n-button type="default">Середина</n-button>
  <n-button type="error">Вниз</n-button>
</n-button-group>

Особенности вертикальных групп:

  • Кнопки располагаются столбцом.
  • Можно комбинировать с различными размерами и типами кнопок.
  • Полезно для панелей инструментов и форм с ограниченной шириной.

Объединение кнопок с разными типами

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

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

Управление размером и стилем отдельных кнопок

Хотя проп size задается для всей группы, можно переопределять размер и стиль отдельных кнопок с помощью собственных пропов size и type. Однако важно понимать, что это нарушает визуальную консистентность группы:

<n-button-group>
  <n-button size="large" type="primary">Главная</n-button>
  <n-button size="small" type="default">Второстепенная</n-button>
</n-button-group>

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

Добавление разделителей и спейсеров

Для визуального разделения кнопок можно использовать встроенные стили или кастомные компоненты-спейсеры:

<n-button-group>
  <n-button type="primary">Да</n-button>
  <div style="width: 8px;"></div>
  <n-button type="error">Нет</n-button>
</n-button-group>
  • Добавление div или n-space между кнопками позволяет гибко управлять расстоянием.
  • Naive UI не добавляет автоматические разделители, но поддерживает кастомизацию через CSS.

Поддержка реактивных состояний

Кнопки внутри группы полностью интегрируются с реактивными состояниями Vue.js. Можно управлять состоянием активности, блокировки или выбора:

<template>
  <n-button-group>
    <n-button :disabled="isDisabled">Опция 1</n-button>
    <n-button :disabled="isDisabled">Опция 2</n-button>
  </n-button-group>
</template>

<script setup>
import { ref } from 'vue'

const isDisabled = ref(true)
</script>
  • disabled блокирует взаимодействие с кнопкой.
  • Состояния могут быть динамическими, что удобно для форм и панелей инструментов.

Иконки и кнопки с текстом

Кнопки в группе могут содержать иконки и текст одновременно, сохраняя визуальное согласование:

<n-button-group>
  <n-button icon="check">Сохранить</n-button>
  <n-button icon="close" type="error">Удалить</n-button>
</n-button-group>
  • icon можно задавать через имя иконки или компонент.
  • Иконки помогают выделить функции и повышают читаемость интерфейса.

Использование с другими компонентами Naive UI

Группы кнопок часто комбинируются с компонентами n-popover, n-dropdown и n-tooltip для создания комплексных интерфейсов:

<n-button-group>
  <n-button type="primary" v-popover="{ content: 'Сохранить изменения' }">Сохранить</n-button>
  <n-button type="default">Отмена</n-button>
</n-button-group>
  • Взаимодействие с тултипами и всплывающими меню не нарушает выравнивание.
  • Компоненты остаются единым визуальным блоком даже при добавлении внешней логики.

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

Оглавление