Обычные кнопки v-btn

В Vuetify компонент v-btn предназначен для создания кнопок с богатым функционалом и широкими возможностями кастомизации. Основной синтаксис прост и выглядит следующим образом:

<v-btn>Текст кнопки</v-btn>

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

Типы кнопок

Vuetify предлагает несколько визуальных вариантов кнопок:

  1. Text button

    <v-btn text>Текстовая кнопка</v-btn>
    • Не имеет фона и рамки, реагирует только на наведение.
    • Используется для второстепенных действий в интерфейсе.

  2. Contained button

    <v-btn elevated>Поднятая кнопка</v-btn>
<v-btn>Обычная кнопка</v-btn>
    • Имеет фон и слегка приподнятую тень.
    • Подходит для основных действий, чтобы привлечь внимание пользователя.

  3. Outlined button

    <v-btn outlined>Контурная кнопка</v-btn>
    • Обрамлена границей без заливки.
    • Комбинирует минимализм и визуальную заметность.

  4. Icon button

    <v-btn icon>
  <v-icon>mdi-heart</v-icon>
</v-btn>
    • Используется для кнопок с иконками.
    • Идеально подходит для панелей инструментов и небольших действий.

Цвета и темы

Компонент v-btn поддерживает цветовые темы Vuetify, что позволяет легко интегрировать кнопки в существующую палитру приложения:

<v-btn color="primary">Primary</v-btn>
<v-btn color="secondary">Secondary</v-btn>
<v-btn color="success">Success</v-btn>
<v-btn color="error">Error</v-btn>
  • color может быть задан как стандартной темой (primary, secondary), так и произвольным цветом.
  • Поддерживается использование светлых и темных вариаций через dark и light пропсы:
<v-btn color="primary" dark>Темная кнопка</v-btn>

Размеры и формы

Кнопки могут изменять размер и форму для адаптации под разные интерфейсы:

<v-btn small>Small</v-btn>
<v-btn large>Large</v-btn>
<v-btn rounded>Закругленная</v-btn>
<v-btn tile>Прямоугольная без скруглений</v-btn>
  • small, default, large — задают высоту и ширину кнопки.
  • rounded и tile управляют скруглением углов.

Активация и состояние

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

  • disabled
<v-btn disabled>Неактивная</v-btn>

Блокирует возможность нажатия и визуально выделяет кнопку как неактивную.

  • loading
<v-btn :loading="true">Загрузка</v-btn>

Добавляет индикатор загрузки внутри кнопки. В сочетании с disabled предотвращает повторные действия.

  • depressed
<v-btn depressed>Плоская</v-btn>

Убирает приподнятость кнопки, делая её плоской, но с сохранением цвета.

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

Кнопка может реагировать на стандартные события Vue:

<v-btn @click="handleClick">Нажать</v-btn>
  • @click — основной способ обработки клика.
  • Дополнительно поддерживаются @mouseover, @mousedown и другие DOM-события.

Вставка иконок и комбинированные кнопки

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

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

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

<v-btn>
  Сохранить
  <v-icon right>mdi-check</v-icon>
</v-btn>
  • Пропсы left и right управляют расположением иконки относительно текста.
  • Комбинированные кнопки полезны для действий с дополнительной визуальной подсказкой.

Применение классов и кастомизация

Для расширенной кастомизации можно использовать CSS-классы Vuetify и собственные стили:

<v-btn class="ma-2" color="pink" dark>Кастомная кнопка</v-btn>
  • ma-2 — margin вокруг кнопки.
  • pa-3 — padding внутри кнопки.
  • Любой пользовательский класс можно добавить для специфического оформления.

Примеры сложных комбинаций

<v-btn color="success" outlined rounded @click="submitForm" :loading="isSubmitting">
  <v-icon left>mdi-send</v-icon>
  Отправить
</v-btn>

<v-btn icon color="error" @click="deleteItem">
  <v-icon>mdi-delete</v-icon>
</v-btn>
  • Комбинируются цвет, форма, загрузка, иконки и обработка событий.
  • Обеспечивается удобный и наглядный интерфейс без необходимости писать сложный CSS.

v-btn является гибким компонентом, позволяя создавать кнопки любого типа: от простых текстовых до интерактивных с загрузкой и иконками, полностью соответствующих стандартам Material Design.

Оглавление