Alixan UI

Чип

Компактный интерактивный token для фильтров, выборов и удаляемых метаданных.

Установка

npx alixan-ui-nuxt add chip

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

<script setup lang="ts">
import Chip from '@/components/ui/chip/Chip.vue';
</script>

<template>
	<div class="flex flex-wrap items-center gap-2">
		<Chip label="Default" />
		<Chip label="Selected" selected />
		<Chip label="Design" type="select" />
		<Chip label="Nuxt" type="remove" />
	</div>
</template>

Размер

<script setup lang="ts">
import Chip from '@/components/ui/chip/Chip.vue';
</script>

<template>
	<div class="flex flex-wrap items-center gap-2">
		<Chip label="Small" size="sm" />
		<Chip label="Medium" />
		<Chip label="Large" size="lg" />
	</div>
</template>

Справочник API

СвойствоТипПо умолчаниюОписание
labelstring-Запасной текст, если default slot не используется.
type'default' | 'select' | 'remove''default'Добавляет select chevron или remove icon.
size'sm' | 'md' | 'lg''md'Управляет высотой, радиусом, padding и размером иконки.
selectedbooleanfalseПереключает chip в активное primary-состояние.
disabledbooleanfalseОтключает взаимодействие и уменьшает opacity.