Варианты кнопок

Vuetify предоставляет гибкую систему компонентов для создания кнопок различного типа и стиля, основанных на Material Design. Компонент v-btn является основным инструментом для реализации интерактивных элементов интерфейса. Его возможности охватывают визуальные стили, состояния, размеры, иконки, а также адаптивность к различным устройствам.

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

Базовая кнопка создается с использованием компонента v-btn:

<v-btn>Кнопка</v-btn>

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

Типы кнопок

  1. Плоская кнопка (text)

Плоская кнопка не имеет фона и акцентируется только цветом текста. Используется для минималистичных интерфейсов и второстепенных действий.

<v-btn text>Плоская кнопка</v-btn>
  1. Поднятая кнопка (elevated)

Поднятая кнопка создает эффект тени, делая элемент более заметным на странице. Обычно применяется для основных действий.

<v-btn elevated>Поднятая кнопка</v-btn>
  1. Контурная кнопка (outlined)

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

<v-btn outlined>Контурная кнопка</v-btn>
  1. Залитая кнопка (contained)

Залитая кнопка полностью окрашена в основной цвет и часто используется для ключевых действий.

<v-btn color="primary" rounded>Залитая кнопка</v-btn>

Цветовые схемы

Vuetify поддерживает работу с цветовыми палитрами, определяемыми через свойство color. Можно использовать предопределенные цвета (primary, secondary, success, error, warning, info) или кастомные:

<v-btn color="success">Успех</v-btn>
<v-btn color="#FF5722">Пользовательский цвет</v-btn>

Для изменения цвета текста используется свойство text-color, а для цвета иконки — icon вместе с v-icon.

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

Размер кнопки регулируется свойством small, large или x-large:

<v-btn small>Маленькая</v-btn>
<v-btn large>Большая</v-btn>
<v-btn x-large>Очень большая</v-btn>

Также можно задавать высоту и ширину через классы Vuetify, такие как ma-2 (margin), pa-3 (padding) или кастомные CSS-стили.

Иконки и кнопки-иконки

Vuetify позволяет интегрировать иконки с помощью компонента v-icon. Иконка может быть размещена слева, справа или выступать как самостоятельная кнопка:

<v-btn icon>
  <v-icon>mdi-home</v-icon>
</v-btn>

<v-btn color="primary">
  <v-icon left>mdi-pencil</v-icon>
  Редактировать
</v-btn>

<v-btn color="secondary">
  Удалить
  <v-icon right>mdi-delete</v-icon>
</v-btn>

Свойство icon делает кнопку компактной и круглой, идеально подходящей для панелей инструментов.

Состояния кнопок

  1. Отключенная кнопка (disabled)
<v-btn disabled>Недоступно</v-btn>
  1. Активная кнопка (active)

Можно задать состояние активности вручную:

<v-btn :active="isActive">Активная</v-btn>
  1. Пульсирующая и загрузка (loading)
<v-btn loading color="primary">Загрузка</v-btn>

Свойство loading добавляет индикатор и блокирует повторное нажатие.

Круглые, квадратные и расширенные кнопки

  1. Круглые кнопки

Используются для иконок или кнопок действий:

<v-btn rounded icon>
  <v-icon>mdi-plus</v-icon>
</v-btn>
  1. Квадратные или с закругленными углами
<v-btn shaped color="secondary">Закругленные</v-btn>
  1. Блоковые кнопки (ширина 100%)
<v-btn block color="primary">Блоковая кнопка</v-btn>

Адаптивные кнопки

Кнопки Vuetify хорошо адаптируются к разным устройствам с помощью классов отображения:

<v-btn class="d-none d-md-inline-flex" color="primary">Только на ПК</v-btn>
<v-btn class="d-sm-none d-xs-flex" color="secondary">Только на мобильных</v-btn>

Комбинирование свойств

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

<v-btn color="success" outlined large rounded>
  <v-icon left>mdi-check</v-icon>
  Подтвердить
</v-btn>

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

Итоговая гибкость

Компонент v-btn в Vuetify обеспечивает полную кастомизацию — от визуального стиля до состояния кнопки и интеграции с иконками. Его использование позволяет быстро создавать интуитивные и красивые интерфейсы, полностью соответствующие концепции Material Design.

Оглавление