Кнопки-иконки

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

<template>
  <v-btn icon>
    <v-icon>mdi-pencil</v-icon>
  </v-btn>
</template>

В данном примере используется компонент v-btn с пропсом icon, который автоматически уменьшает размеры кнопки до иконки и убирает внутренние отступы. Компонент v-icon принимает имя иконки из библиотеки Material Design Icons (по умолчанию), например mdi-pencil.

Типы кнопок-иконок

  1. Простая иконка (Icon Button) Кнопка без текста, только с визуальной иконкой. Используется для действий вроде редактирования, удаления или добавления элементов.

  2. Иконка с фоном (Contained Icon) Добавление цвета фона с помощью пропсов color и variant позволяет выделить кнопку визуально:

<v-btn icon color="primary" variant="tonal">
  <v-icon>mdi-heart</v-icon>
</v-btn>
  • color задаёт основной цвет кнопки
  • variant управляет стилем кнопки: text, outlined, tonal, elevated, flat
  1. Иконка с анимацией (Toggle/Loading Icon) Кнопки-иконки могут изменять состояние при взаимодействии. Пример использования переключаемой иконки:
<v-btn icon :color="liked ? 'red' : 'grey'" @click="liked = !liked">
  <v-icon>{{ liked ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
</v-btn>

Здесь liked — реактивное свойство Vue, меняющее иконку и цвет кнопки динамически.

Размеры и адаптивность

Vuetify поддерживает несколько размеров кнопок-иконок через проп size:

  • x-small — миниатюрная кнопка
  • small — маленькая
  • default — стандартная
  • large — увеличенная
  • x-large — максимально крупная
<v-btn icon size="large">
  <v-icon size="36">mdi-star</v-icon>
</v-btn>

Проп size компонента v-icon может быть отдельным, что позволяет тонко настраивать внешний вид кнопки независимо от её контейнера.

Стилизация и цветовые схемы

Vuetify использует систему палитр для упрощения работы с цветами. Кнопки-иконки могут наследовать тему или иметь индивидуальные цвета:

  • Тематические цвета: primary, secondary, success, error, warning, info
  • Светлые/тёмные оттенки: можно использовать комбинации, например, primary lighten-2 или error darken-1.
<v-btn icon color="success lighten-1">
  <v-icon>mdi-check</v-icon>
</v-btn>

Кнопки-иконки с тултипами

Часто кнопки-иконки имеют тултипы для пояснения действия. Vuetify интегрирует это с помощью компонента v-tooltip:

<v-tooltip top>
  <template #activator="{ props }">
    <v-btn icon v-bind="props">
      <v-icon>mdi-delete</v-icon>
    </v-btn>
  </template>
  <span>Удалить элемент</span>
</v-tooltip>

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

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

Кнопки-иконки легко сочетаются с:

  • Карточками (v-card) для действий внутри контента
  • Тулбарами (v-toolbar) для глобальных действий интерфейса
  • Меню (v-menu) для создания кнопок, открывающих дополнительные действия
<v-menu>
  <template #activator="{ props }">
    <v-btn icon v-bind="props">
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </template>
  <v-list>
    <v-list-item>Редактировать</v-list-item>
    <v-list-item>Удалить</v-list-item>
  </v-list>
</v-menu>

Доступность и клавиатурное управление

Для повышения доступности кнопок-иконок рекомендуется:

  • Добавлять aria-label для описания действия
  • Использовать tabindex для навигации клавиатурой
<v-btn icon aria-label="Удалить" @click="removeItem">
  <v-icon>mdi-delete</v-icon>
</v-btn>

Иконки с динамическими событиями

Кнопки-иконки могут обрабатывать любые события Vue, включая click, mouseenter, mouseleave, что позволяет создавать сложные интерактивные элементы интерфейса. Пример с анимацией при наведении:

<v-btn icon @mouseenter="hover = true" @mouseleave="hover = false">
  <v-icon :size="hover ? 32 : 24">mdi-star</v-icon>
</v-btn>

Здесь иконка увеличивается при наведении, создавая визуальный эффект интерактивности.

Использование сторонних иконок

Vuetify поддерживает не только Material Design Icons, но и Font Awesome или SVG-иконки. Для этого достаточно изменить источник иконок в настройках проекта и использовать их имена аналогично:

<v-icon>
  fa-brands:github
</v-icon>

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

Итоговые возможности

Кнопки-иконки в Vuetify предоставляют полный контроль над:

  • Визуальным стилем (цвет, размер, форма)
  • Анимацией и динамикой состояния
  • Интеграцией с тултипами, меню и другими компонентами
  • Доступностью и клавиатурным управлением

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

Оглавление