Чипы v-chip

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

<template>
  <v-chip color="primary" text-color="white">
    Пример чипа
  </v-chip>
</template>

В этом примере создается базовый чип с цветом primary и белым текстом.

Свойства (props) компонента v-chip

v-chip предоставляет множество свойств, позволяющих управлять его внешним видом и поведением:

  • color – задает цвет фона чипа.
  • text-color – определяет цвет текста.
  • outlined – делает чип с обводкой вместо сплошного фона.
  • label – изменяет размер и оформление чипа, делая его более компактным.
  • disabled – делает чип неактивным, блокируя взаимодействие.
  • close – добавляет кнопку закрытия с событием @click:close.
  • clickable – делает чип интерактивным, добавляя эффект наведения и возможность клика.

Пример использования нескольких свойств:

<v-chip
  color="success"
  text-color="white"
  outlined
  label
  close
  @click:close="removeChip"
>
  Активный чип
</v-chip>

Интерактивные чипы и события

v-chip поддерживает кликабельность и реакцию на события:

  • @click – срабатывает при клике по чипу.
  • @click:close – срабатывает при нажатии на кнопку закрытия.
  • @mouseenter и @mouseleave – можно использовать для динамического изменения стиля.

Пример:

<v-chip
  color="indigo"
  clickable
  @click="handleClick"
  close
  @click:close="removeChip"
>
  Интерактивный чип
</v-chip>

В методах:

methods: {
  handleClick() {
    console.log('Чип кликнут');
  },
  removeChip() {
    console.log('Чип удален');
  }
}

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

Чипы можно украшать иконками или аватарами для лучшей визуализации информации.

Иконка слева или справа:

<v-chip color="pink" text-color="white" outlined>
  <v-icon left>mdi-heart</v-icon>
  Любимый
</v-chip>

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

<v-chip>
  <v-avatar left>
    <img src="avatar.png" alt="User Avatar">
  </v-avatar>
  Пользователь
</v-chip>

Аватар может быть круглым или квадратным, задавая форму через свойства tile или rounded.

Чипы в списках и фильтрах

v-chip часто используется для отображения выбранных фильтров или тегов:

<v-chip-group
  v-model="selected"
  multiple
  column
>
  <v-chip v-for="item in items" :key="item" :value="item">
    {{ item }}
  </v-chip>
</v-chip-group>

Здесь v-chip-group позволяет объединять несколько чипов, управлять выбором и выделением. Свойство multiple позволяет выбирать несколько элементов одновременно. При клике на чип он автоматически добавляется или удаляется из массива selected.

Стилизация и кастомизация

Чипы в Vuetify можно стилизовать с помощью классов и CSS переменных:

  • Размеры: small, medium, large.
  • Обводка: с помощью свойства outlined и кастомного цвета.
  • Форма: круглые углы через rounded, или полностью квадратные с tile.
  • Тени: можно использовать стандартные утилитарные классы Vuetify, например elevation-2.

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

<v-chip
  class="my-chip"
  color="deep-purple accent-4"
  text-color="yellow"
  outlined
>
  Кастомный чип
</v-chip>
.my-chip {
  font-weight: bold;
  letter-spacing: 0.5px;
}

Динамическое управление чипами

Чипы легко генерируются динамически через массивы и реактивные данные:

<template>
  <v-chip
    v-for="chip in chips"
    :key="chip.id"
    color="cyan"
    close
    @click:close="remove(chip.id)"
  >
    {{ chip.label }}
  </v-chip>
</template>

<script>
export default {
  data() {
    return {
      chips: [
        { id: 1, label: 'JavaScript' },
        { id: 2, label: 'Vuetify' },
        { id: 3, label: 'Frontend' }
      ]
    }
  },
  methods: {
    remove(id) {
      this.chips = this.chips.filter(chip => chip.id !== id);
    }
  }
}
</script>

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

Использование чипов с другими компонентами Vuetify

Чипы часто комбинируются с v-autocomplete, v-select и v-input для создания фильтров или выбора тегов:

<v-autocomplete
  v-model="selectedTags"
  :items="tags"
  label="Выберите теги"
  multiple
  chips
></v-autocomplete>

Свойство chips автоматически визуализирует выбранные элементы как чипы, обеспечивая интуитивный пользовательский интерфейс.

Ключевые рекомендации при работе с v-chip

  • Использовать v-chip-group для управления множественным выбором и выделением.
  • Для динамических списков применять v-for и реактивные массивы.
  • Комбинировать с иконками и аватарами для лучшей визуальной идентификации.
  • Использовать свойства outlined, label, clickable, close для гибкой настройки внешнего вида и поведения.
  • Для интерактивных действий обязательно обрабатывать события @click и @click:close.

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

Оглавление