Иконки в кнопках

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

Подключение иконок

Для работы с иконками необходимо подключить библиотеку иконок. Vuetify поддерживает несколько наборов: Material Design Icons (MDI), Font Awesome, Ionicons и другие. Наиболее часто используется MDI.

import 'material-design-icons-iconfont/dist/material-design-icons.css'

После подключения набор иконок можно использовать в любом компоненте v-icon:

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

Вставка иконки в кнопку

Чтобы добавить иконку в кнопку, используется слот v-icon внутри компонента v-btn:

<v-btn color="primary">
  <v-icon left>mdi-thumb-up</v-icon>
  Лайк
</v-btn>

Ключевые моменты:

  • Атрибут left размещает иконку слева от текста.
  • Атрибут right размещает иконку справа.
  • Атрибут icon используется для кнопок, содержащих только иконку:
<v-btn icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

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

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

<v-icon small>mdi-alert</v-icon>
<v-icon large>mdi-alert</v-icon>
<v-icon x-large>mdi-alert</v-icon>

Дополнительно можно использовать CSS для точной настройки размеров:

.custom-icon {
  font-size: 36px;
}
<v-btn>
  <v-icon class="custom-icon">mdi-account</v-icon>
  Профиль
</v-btn>

Стилизация иконок в кнопках

Иконки можно стилизовать отдельно от текста кнопки, используя встроенные свойства и классы Vuetify:

  • color – изменяет цвет иконки.
  • spin – делает иконку вращающейся (например, для индикатора загрузки).
  • rotate – поворот на 90, 180 или 270 градусов.
<v-btn color="success">
  <v-icon left color="white">mdi-check</v-icon>
  Сохранить
</v-btn>

<v-btn icon>
  <v-icon spin>mdi-loading</v-icon>
</v-btn>

Иконки как индикаторы действия

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

<v-btn color="primary" @click="liked = !liked">
  <v-icon left>{{ liked ? 'mdi-thumb-up' : 'mdi-thumb-up-outline' }}</v-icon>
  {{ liked ? 'Вы поставили лайк' : 'Лайк' }}
</v-btn>
data() {
  return {
    liked: false
  }
}

Кнопки только с иконкой

Для компактных интерфейсов используют кнопки, содержащие только иконку. Это особенно полезно для панелей инструментов:

<v-btn icon color="pink">
  <v-icon>mdi-heart</v-icon>
</v-btn>

При необходимости можно добавить tooltip, чтобы пояснить действие кнопки:

<v-tooltip bottom>
  <template v-slot:activator="{ on, attrs }">
    <v-btn icon v-bind="attrs" v-on="on">
      <v-icon>mdi-information</v-icon>
    </v-btn>
  </template>
  <span>Подробнее</span>
</v-tooltip>

Комбинирование нескольких иконок

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

<v-btn color="secondary">
  <v-icon left>mdi-folder</v-icon>
  <v-icon right>mdi-plus</v-icon>
  Создать
</v-btn>

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

Итоговые рекомендации по использованию иконок

  • Выбирать иконки, соответствующие действию, чтобы улучшить UX.
  • Использовать слоты left и right для правильного позиционирования.
  • Для компактных интерфейсов применять кнопки только с иконкой и tooltip.
  • Настраивать размер и цвет через встроенные классы Vuetify или CSS.
  • В сочетании с динамическим текстом и состояниями кнопки можно создавать интерактивные элементы.

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

Оглавление