Tag

Компонент Tag в библиотеке Naive UI используется для отображения небольших меток, которые могут служить индикаторами состояния, категорий или просто визуальными элементами для выделения информации. Он поддерживает разные типы отображения, цвета, размеры, формы и интерактивность.

Ключевые свойства компонента Tag:

  • type — определяет визуальный стиль метки. Доступные значения: 'default', 'success', 'info', 'warning', 'error'. Использование разных типов позволяет быстро визуально классифицировать информацию.
  • color — задаёт кастомный цвет метки. Можно использовать как строку с названием цвета ('red'), так и HEX-значение ('#ff0000'). При указании кастомного цвета автоматически отключается стандартная цветовая схема type.
  • size — размер метки. Возможные варианты: 'small', 'medium', 'large'. Размер влияет на высоту, внутренние отступы и шрифт.
  • round — булевое значение, определяющее, будет ли метка с закруглёнными углами. Значение true создаёт полностью круглую метку, подходящую для отображения статусов или тегов категорий.
  • closable — если true, добавляется кнопка закрытия на метке. При клике вызывается событие on-close.
  • disabled — делает метку неактивной, при этом все интерактивные действия блокируются.

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

Компонент Tag поддерживает несколько событий, которые позволяют интегрировать его с логикой приложения:

  • on-close — вызывается при нажатии на кнопку закрытия метки. Возвращает объект события клика и сам тег.
  • on-click — срабатывает при клике по метке, если она не закрываема и не заблокирована через disabled.
  • on-mouseenter и on-mouseleave — стандартные события мыши, полезные для создания эффектов наведения или подсказок.

Варианты визуализации

Tag можно использовать как простой индикатор или как интерактивный элемент:

  1. Статические метки — применяются для отображения категорий или статусов без возможности закрытия.
  2. Закрываемые метки — подходят для динамических списков тегов, например, в фильтрах или формах ввода.
  3. Кастомные цвета и формы — позволяют создавать метки с фирменной палитрой, а также полностью круглые или с закруглёнными углами.
  4. С иконками — через слот prefix и suffix можно добавлять иконки слева или справа от текста метки, что расширяет визуальные возможности.

Примеры использования

import { NTag } from 'naive-ui'

export default {
  components: { NTag },
  setup() {
    const tags = [
      { label: 'Важно', type: 'error' },
      { label: 'Информация', type: 'info' },
      { label: 'Успешно', type: 'success', closable: true }
    ]
    return { tags }
  },
  template: `
    <div>
      <n-tag v-for="tag in tags" :key="tag.label"
             :type="tag.type"
             :closable="tag.closable">
        {{ tag.label }}
      </n-tag>
    </div>
  `
}

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

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

  • Размеры: с помощью свойства size можно создать компактные метки для плотных интерфейсов или крупные для важных уведомлений.
  • Цвета: при указании color метка автоматически подстраивается под этот цвет, изменяя фон и текст.
  • Форма: свойство round полностью закругляет углы, делая метку более визуально мягкой.
  • Состояния: disabled позволяет сделать метку визуально приглушённой и недоступной для клика.

Слоты и вложенные элементы

Naive UI предоставляет слоты для расширенной кастомизации Tag:

  • prefix — элемент, добавляемый перед текстом. Обычно используется для иконок или цветовых индикаторов.
  • suffix — элемент после текста, например, кнопка закрытия или дополнительная иконка.
  • default — основной текст метки.

Пример с иконкой:

<n-tag type="info" round>
  <template #prefix>
    <n-icon name="info-circle" />
  </template>
  Информация
</n-tag>

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

Tag часто используется вместе с компонентами NInput, NSelect, NCheckboxGroup, формируя интерфейс для управления тегами, фильтрами или статусами объектов. Например, динамическое добавление и удаление тегов в форме реализуется через v-model и on-close, обеспечивая полную интерактивность без сложной логики.

Практические рекомендации

  • Использовать Tag для краткой визуальной информации, а не для длинного текста.
  • Применять разные типы (type) для быстрого визуального различения категорий.
  • Для динамических списков обязательно включать closable и обрабатывать событие on-close.
  • Кастомизация цвета через color подходит для соответствия фирменному стилю, но при этом стоит учитывать читаемость текста.

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

Оглавление