Типы и размеры кнопок

В библиотеке Naive UI кнопка (n-button) является одним из ключевых компонентов интерфейса, предоставляя широкие возможности для кастомизации, управления состояниями и интеграции с событиями. Рассмотрим подробно типы кнопок, их размеры и настройку поведения.

Основные типы кнопок

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

  1. Primary (основная кнопка) Используется для обозначения главного действия на странице или в модальном окне.

    <n-button type="primary">Основное действие</n-button>
    • Особенности: яркий цвет, чаще всего синий по умолчанию, акцентирует внимание пользователя.
    • Использование: подтверждение формы, отправка данных, запуск ключевых функций.

  2. Secondary (вторичная кнопка) Менее выраженный стиль, применяется для второстепенных действий.

    <n-button type="secondary">Второстепенное действие</n-button>
    • Особенности: более мягкий цвет, не отвлекает внимание от основной кнопки.
    • Использование: отмена действия, открытие вспомогательных функций.

  3. Success, Warning, Error (цветовые кнопки) Цветовые индикаторы состояния действия: успех, предупреждение, ошибка.

    <n-button type="success">Успешное действие</n-button>
<n-button type="warning">Предупреждение</n-button>
<n-button type="error">Ошибка</n-button>
    • Особенности: помогают пользователю интуитивно понять контекст действия.
    • Использование: уведомления, подтверждение успешных операций, предупреждение об ошибках.

  4. Info (информационная кнопка) Применяется для действий, не влияющих на процесс напрямую, чаще информативные.

    <n-button type="info">Подробнее</n-button>

  5. Text (текстовая кнопка) Минималистичная кнопка, отображается как текст.

    <n-button type="text">Читать далее</n-button>
    • Особенности: нет фона, минимальная визуальная нагрузка.
    • Использование: мелкие действия, ссылки внутри контента.

  6. Ghost (прозрачная кнопка) Подходит для поверх цветных или изображённых фонов.

    <n-button type="ghost">Прозрачная кнопка</n-button>
    • Особенности: прозрачный фон с рамкой, адаптируется к цвету родителя.
    • Использование: размещение на цветных баннерах, в карточках.

Размеры кнопок

Размер кнопки влияет на её визуальное восприятие и удобство взаимодействия. В Naive UI доступны следующие размеры:

  • small (маленькая)

    <n-button size="small">Маленькая</n-button>
    • Высота: 24–28px
    • Применение: компактные панели инструментов, формы с ограниченным пространством.

  • medium (средняя, по умолчанию)

    <n-button size="medium">Средняя</n-button>
    • Высота: 32–36px
    • Использование: стандартная кнопка для форм, карточек и диалогов.

  • large (большая)

    <n-button size="large">Большая</n-button>
    • Высота: 40–48px
    • Применение: ключевые действия, выделение в заголовках и баннерах.

Совет по доступности: размер кнопки должен соответствовать интерфейсу и быть удобным для нажатия на устройствах с сенсорными экранами. Минимальная рекомендуемая высота — 32px.

Комбинирование типов и размеров

Naive UI позволяет комбинировать тип и размер кнопки для точной настройки внешнего вида:

<n-button type="primary" size="large">Большое главное действие</n-button>
<n-button type="error" size="small">Маленькая кнопка ошибки</n-button>
<n-button type="ghost" size="medium">Прозрачная средняя кнопка</n-button>

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

Дополнительные состояния кнопок

Каждый тип и размер кнопки поддерживает состояния: disabled, loading, ghost (если используется тип кнопки):

  • Disabled (неактивная кнопка)

    <n-button type="primary" disabled>Неактивная</n-button>
    • Применяется для действий, недоступных в текущем контексте.

  • Loading (индикатор загрузки)

    <n-button type="primary" loading>Загрузка...</n-button>
    • Автоматически отображает спиннер и блокирует повторные клики.

Итоговая структура кода

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

const BUTTON_TYPES = {
  primary: 'primary',
  secondary: 'secondary',
  success: 'success',
  warning: 'warning',
  error: 'error',
  info: 'info',
  text: 'text',
  ghost: 'ghost',
}

const BUTTON_SIZES = {
  small: 'small',
  medium: 'medium',
  large: 'large',
}

// Пример использования
<n-button type={BUTTON_TYPES.primary} size={BUTTON_SIZES.large}>
  Подтвердить
</n-button>

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

Оглавление