Компонент Button

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

  • type — определяет визуальный стиль кнопки: primary, success, warning, error, info, default. Каждый тип имеет свою цветовую схему и подходит для различных контекстов интерфейса.
  • size — размер кнопки: small, medium, large. Влияет на padding, font-size и габариты кнопки.
  • disabled — булевое свойство, блокирующее взаимодействие с кнопкой.
  • loading — состояние загрузки. При установке true кнопка показывает индикатор прогресса и блокирует нажатия.
  • ghost — делает кнопку прозрачной с рамкой соответствующего типа.
  • secondary — альтернативный стиль, часто используется для менее значимых действий.
  • quaternary — третичный стиль кнопки, минималистичный и легкий.

Пример базового использования:

import { NButton } from 'naive-ui'

<NButton type="primary" size="medium">Сохранить</NButton>
<NButton type="error" size="small" disabled>Удалить</NButton>
<NButton type="success" loading>Отправка</NButton>

Управление состояниями кнопки

Состояния кнопки можно комбинировать для достижения нужного UX. Например, кнопка может быть одновременно disabled и loading, что позволяет визуально показывать процесс обработки запроса, блокируя при этом повторные клики.

  • hover и active состояния обрабатываются автоматически, что обеспечивает плавные анимации при наведении и нажатии.
  • Состояние focus особенно важно для клавиатурной навигации. В Naive UI оно реализовано через подсветку рамки и изменение цвета фона в зависимости от типа кнопки.

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

<NButton type="primary" loading>Загрузка</NButton>

При этом кнопка блокирует клики и отображает анимацию индикатора.

Иконки и слот content

Кнопка поддерживает вставку иконок слева или справа. Это делается через свойства icon и слот default. Для сложного контента можно использовать слот default с произвольной разметкой.

import { NButton } from 'naive-ui'
import { UploadOutlined } from '@vicons/antd'

<NButton type="info" icon={UploadOutlined}>Загрузить файл</NButton>

<NButton type="primary">
  <template #default>
    <UploadOutlined /> Загрузить
  </template>
</NButton>

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

Различия между типами кнопок

  • Primary — основное действие на странице, визуально выделено.
  • Secondary — менее заметное действие, используется как вспомогательное.
  • Ghost — прозрачная кнопка с рамкой, минимально выделяется на фоне.
  • Quaternary — лёгкая кнопка, подходит для действий с минимальным визуальным акцентом.

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

Работа с событиями

Кнопка в Naive UI поддерживает стандартные события DOM, такие как click, mouseenter, mouseleave. Основное внимание уделяется событию click, которое часто используется для вызова методов или обновления состояния приложения.

<NButton type="primary" @click="handleClick">Нажать</NButton>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Кнопка нажата')
    }
  }
}
</script>

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

Кастомизация стилей

Naive UI позволяет переопределять стандартные стили кнопки через CSS-переменные или проп style. Основные CSS-переменные включают:

  • --n-button-font-size
  • --n-button-padding
  • --n-button-border-radius
  • --n-button-color
  • --n-button-background-color

Пример кастомизации:

<NButton
  type="primary"
  style="--n-button-background-color: #4caf50; --n-button-color: white;"
>
  Сохранить
</NButton>

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

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

Кнопки часто используются совместно с Modal, Dropdown, Popover и Form. Например, кнопка внутри формы может запускать валидацию или отправку данных, а кнопка в модальном окне — закрывать его или подтверждать действие.

Пример интеграции с формой:

<NForm :model="formData" @submit.prevent="submitForm">
  <NFormItem label="Имя">
    <NInput v-model="formData.name" />
  </NFormItem>
  <NFormItem>
    <NButton type="primary" html-type="submit">Отправить</NButton>
  </NFormItem>
</NForm>

Адаптация под мобильные устройства

Кнопки Naive UI автоматически масштабируются под разные размеры экранов через свойства size и CSS-переменные. Для мобильного интерфейса рекомендуется использовать medium или large кнопки с достаточным padding, чтобы обеспечить удобное нажатие пальцем. Также важно учитывать контраст текста и фона для лучшей читаемости.

Резюме по использованию

  • Выбирать type кнопки в зависимости от контекста действия.
  • Комбинировать состояния loading, disabled и icon для лучшего UX.
  • Использовать слоты для сложного контента внутри кнопки.
  • Настраивать стили через CSS-переменные или проп style.
  • Интегрировать кнопки с другими компонентами и формами для полноценного интерфейса.

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

Оглавление