QChip чипсы и теги

QChip — это компонент библиотеки Quasar Framework, предназначенный для отображения небольших интерактивных элементов, таких как теги, метки или чипсы. Он позволяет компактно представлять информацию с возможностью удаления, выделения и иконок. Визуально QChip похож на небольшую карточку или кнопку с текстом, которая может содержать иконку, аватар или индикатор.

<q-chip>
  Новый тег
</q-chip>

При этом чип автоматически адаптируется под текст и может занимать как фиксированную, так и динамическую ширину.

Основные свойства QChip

  • label — задаёт текст внутри чипа. Можно использовать как статический текст, так и динамический через привязку данных:
<q-chip :label="tagName" />
  • color и text-color — задают фон и цвет текста. Поддерживаются как стандартные цвета Quasar (primary, secondary, accent), так и кастомные (#FF0000):
<q-chip color="primary" text-color="white">Пример</q-chip>
  • outline — делает чип с контуром без заливки. Используется для визуального акцента без яркой заливки:
<q-chip outline color="secondary">Контур</q-chip>
  • dense — уменьшает высоту и размер шрифта для компактного отображения:
<q-chip dense>Компактно</q-chip>
  • square — делает чип с прямыми углами вместо скругленных:
<q-chip square color="accent">Прямоугольный</q-chip>
  • icon и avatar — добавление иконки слева или аватара. Иконка может быть из Material Icons или кастомной:
<q-chip icon="close">Закрыть</q-chip>
<q-chip avatar="https://cdn.quasar.dev/img/avatar.png">Пользователь</q-chip>

Варианты взаимодействия

QChip поддерживает интерактивность:

  • removable — добавляет крестик для удаления чипа, срабатывает событие @remove:
<q-chip removable @remove="removeTag(tag)">Удаляемый</q-chip>
  • clickable — делает чип кликабельным, срабатывает событие @click:
<q-chip clickable @click="handleClick(tag)">Кликабельный</q-chip>
  • disable — отключает чип, делает его некликабельным и серым:
<q-chip disable>Недоступно</q-chip>

Использование QChip в динамических списках

Часто QChip применяется для тегов или категорий, где количество элементов неизвестно заранее. Для этого используется v-for:

<q-chip
  v-for="tag in tags"
  :key="tag.id"
  :label="tag.name"
  removable
  @remove="removeTag(tag.id)"
/>
  • tags — массив объектов с полями id и name.
  • @remove — функция удаления чипа из массива.

Использование v-for в сочетании с removable позволяет создавать динамическую систему тегов, где пользователь может добавлять и удалять элементы без перезагрузки страницы.

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

QChip предоставляет гибкие возможности для стилизации:

  • Кастомные классы через class для изменения отступов, шрифтов или тени.
<q-chip class="my-chip">Кастомный</q-chip>
  • Использование CSS-переменных Quasar для тонкой настройки цветов и границ:
.my-chip {
  --q-chip-bg: #e0f7fa;
  --q-chip-text: #006064;
}
  • Группы чипов с использованием QChipGroup позволяют управлять множественным выбором:
<q-chip-group v-model="selectedTags" multiple>
  <q-chip v-for="tag in tags" :key="tag.id" :label="tag.name" />
</q-chip-group>

QChipGroup упрощает реализацию функционала выбора нескольких тегов и автоматически управляет состоянием v-model.

Продвинутые приёмы

  • Динамическая иконка удаления в зависимости от состояния:
<q-chip :icon="tag.active ? 'done' : 'close'" removable />
  • Комбинирование с переходами для плавного удаления и добавления:
<transition-group name="chip-fade">
  <q-chip v-for="tag in tags" :key="tag.id" removable @remove="removeTag(tag.id)">
    {{ tag.name }}
  </q-chip>
</transition-group>
  • Интеграция с формами — чипы могут быть частью реактивных форм, связывая массив тегов с моделью данных:
<q-form @submit.prevent="submitForm">
  <q-chip-group v-model="form.tags" multiple>
    <q-chip v-for="tag in tags" :key="tag.id" :label="tag.name" />
  </q-chip-group>
  <q-btn type="submit" label="Отправить" />
</q-form>

Практические советы

  • Использовать dense для компактного интерфейса и outline для тегов без выделения.
  • Всегда указывать key при v-for, чтобы Vue корректно отслеживал состояние чипов.
  • Комбинировать QChip с QChipGroup для реализации функционала выбора нескольких тегов или фильтров.
  • Для адаптивного дизайна можно использовать условные классы для изменения цвета и размера на разных разрешениях.

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

Оглавление