Badge

Badge — это компонент для отображения небольших индикаторов статуса, меток или интерактивных тегов с настраиваемыми стилями.

Основное использование

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

Чтобы начать, просто используйте компонент Badge и настройте его с помощью его свойств.

Badge

<Badge>Badge</Badge>

Режимы стилей

Свойство mode определяет стиль значка. Доступные варианты:

primary: Стиль по умолчанию с ярким цветом.
secondary: Нейтральный стиль с более светлым фоном.
outline: Стиль с границей и прозрачным фоном.
neutral: Минималистичный стиль с тонкой границей.

Основной

Вторичный

Контур

Нейтральный

<Badge mode="primary">Primary</Badge>
<Badge mode="secondary">Secondary</Badge>
<Badge mode="outline">Outline</Badge>
<Badge mode="neutral">Neutral</Badge>

Пользовательские CSS классы

Настройте внешний вид значка с помощью свойств class и classContent.

class: Применяет пользовательские классы к контейнеру значка.
classContent: Применяет пользовательские классы к содержимому значка.

Пользовательский

<Badge class="bg-blue-500 text-white">Custom Container</Badge>
<Badge classContent="text-lg font-bold">Custom Content</Badge>

Точечный индикатор

Включите небольшой круговой точечный индикатор, установив свойство point в значение true. Это полезно для представления уведомлений или статуса.

Основной

Вторичный

Контур

Нейтральный

<Badge point mode="primary">Primary</Badge>
<Badge point mode="secondary">Secondary</Badge>
<Badge point mode="outline">Outline</Badge>
<Badge point mode="neutral">Neutral</Badge>

Кнопка закрытия

Добавьте интерактивную кнопку закрытия к значку, установив свойство closeButton в значение true. Это испускает событие delete при нажатии.

Badge

<Badge closeButton @delete="handleDelete">Closable Badge</Badge>

Пример со всеми функциями

Вот пример, использующий несколько функций вместе:

Badge