Alixan UI

Чип

Фильтрлерге, таңдауларға және өшірілетін metadata үшін ықшам interactive 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 және иконка өлшемін басқарады.
selectedbooleanfalseChip-ті белсенді primary күйіне ауыстырады.
disabledbooleanfalseӘрекеттесуді өшіреді және opacity азайтады.