Badge
Універсальний значок, що працює і як окремий значок, і як обгортка, яка розміщує значок поверх будь-якого вмісту.
Живе демо
Окремі значки
53!0
Тип «пігулка»
Нове99+ХітБета
З кнопками
З NavButton (текст)
З NavButton (лише іконка)
З компонентом Icon
3
Режим крапки
Якщо слот за замовчуванням порожній, значок рендериться маленькою крапкою — зручно для індикаторів стану.
Прихований
Проп hidden приховує значок, не прибираючи обгорнутий вміст. Перемикайте його реактивно, щоб показувати чи ховати значок залежно від стану застосунку.
Використання
Окремий значок
vue
<template>
<orio-badge>5</orio-badge>
<orio-badge variant="danger">Error</orio-badge>
<orio-badge pill>New</orio-badge>
</template>З NavButton
vue
<template>
<!-- With text -->
<orio-badge variant="danger">
<template #wrapping>
<orio-nav-button icon="mail">Inbox</orio-nav-button>
</template>
5
</orio-badge>
<!-- Icon only -->
<orio-badge variant="primary">
<template #wrapping>
<orio-nav-button icon="bell" />
</template>
3
</orio-badge>
</template>Режим крапки
vue
<template>
<orio-badge variant="danger">
<template #wrapping>
<orio-nav-button icon="bell" />
</template>
</orio-badge>
</template>Прихований
vue
<template>
<!-- Standalone badge -->
<orio-badge :hidden="!hasUnread">New</orio-badge>
<!-- Positioned badge — wrapping content still renders when hidden -->
<orio-badge variant="danger" :hidden="!hasNotifications">
<template #wrapping>
<orio-nav-button icon="bell" />
</template>
4
</orio-badge>
</template>Пропси
| Проп | Тип | За замовчуванням | Опис |
|---|---|---|---|
variant | 'danger' | 'alert' | 'primary' | 'grey' | 'primary' | Колірний варіант значка |
pill | boolean | false | Рендерить у формі пігулки (повністю заокруглений) |
hidden | boolean | false | Якщо true, значок не рендериться |
Слоти
| Слот | Опис |
|---|---|
default | Вміст значка. Якщо порожній, значок рендериться крапкою |
wrapping | Вміст для обгортання. Значок розміщується над ним у правому верхньому куті |