Перейти к содержимому

CoreChip

Примеры использования и документация.

Компактная метка-пилюля: помечает сущность характеристикой — тег, категория, статус — или работает переключателем фильтра. Пользователь видит активные условия отбора и снимает их одним нажатием ×; интерактивный чип отвечает и на клавиатуру. Берите для списков тегов, выбранных фильтров и введённых значений.

Текст — через label или слот default; removable показывает кнопку × с событием remove (клик по × не триггерит click самого чипа, имя кнопки локализовано — «Убрать: {label}», точечный override — removeAriaLabel). clickable делает чип настоящей кнопкой: role="button", tabindex, Enter/Space и событие click; selected подсвечивает выбранный фильтр и отражается в aria-pressed; disabled глушит и чип, и ×.

flow — фирменный перелив: пилюля живёт градиентом темы (текст автоматически берёт контрастный фоновый цвет); на hover градиент не теряется — отклик яркостью. При prefers-reduced-motion градиент статичен. Кольцо фокуса — по :focus-visible, как у всех core-контролов.

ОбычныйВыбранныйКликабельныйЗаблокирован

FlowFlow выбранныйFlow кликабельныйFlow с удалением

VueNuxtTypeScriptUnoCSS