组件
芯片
在任何组件上显示一个芯片指示器。
使用方式
用 Chip 组件包装任何组件以显示芯片指示器。
<template>
<UChip>
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
大小
使用 size 属性改变芯片的大小。
<template>
<UChip size="2xl">
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
颜色
使用 color 属性改变芯片的颜色。
<template>
<UChip color="red">
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
位置
使用 position 属性改变芯片的位置。
<template>
<UChip position="bottom-right">
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
文本
使用 text 属性在芯片中显示文本。
3
<template>
<UChip text="3" size="2xl">
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
显示
使用 show 属性有条件地显示芯片。
<script setup lang="ts">
const items = [{
name: 'messages',
icon: 'i-heroicons-chat-bubble-oval-left',
count: 3
}, {
name: 'notifications',
icon: 'i-heroicons-bell',
count: 0
}]
</script>
<template>
<div class="flex gap-3">
<UChip v-for="{ name, icon, count } in items" :key="name" :show="count > 0">
<UButton :icon="icon" color="gray" />
</UChip>
</div>
</template>
内嵌
使用 inset 属性在组件内部显示芯片。这在处理圆角组件时很有用。
<template>
<UChip inset>
<UAvatar
src="https://avatars.githubusercontent.com/u/739984?v=4"
alt="Avatar"
/>
</UChip>
</template>
插槽
内容
使用 #content 插槽完全自定义芯片。
<template>
<UChip size="md" position="bottom-right" inset :ui="{ base: '-mx-2 rounded-none ring-0', background: '' }">
<UAvatar
src="https://avatars.githubusercontent.com/u/739984?v=4"
alt="Avatar"
size="lg"
/>
<template #content>
<UAvatar
src="https://avatars.githubusercontent.com/in/80442?v=4"
alt="Avatar"
size="xs"
:ui="{ rounded: 'rounded-md' }"
class="shadow-md"
/>
</template>
</UChip>
</template>
属性
ui
{ wrapper?: string; base?: string; background?: string; position?: DeepPartial<{ 'top-right': string; 'bottom-right': string; 'top-left': string; 'bottom-left': string; }, any>; translate?: DeepPartial<...>; size?: DeepPartial<...>; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}大小
"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "3xs" | "2xl" | "3xl"
config.default.size颜色
字符串
config.default.color位置
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.position文本
字符串 | 数字
null内嵌
布尔值
config.default.inset显示
布尔值
true配置
{
wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap',
background: 'bg-{color}-500 dark:bg-{color}-400',
position: {
'top-right': 'top-0 right-0',
'bottom-right': 'bottom-0 right-0',
'top-left': 'top-0 left-0',
'bottom-left': 'bottom-0 left-0'
},
translate: {
'top-right': '-translate-y-1/2 translate-x-1/2 transform',
'bottom-right': 'translate-y-1/2 translate-x-1/2 transform',
'top-left': '-translate-y-1/2 -translate-x-1/2 transform',
'bottom-left': 'translate-y-1/2 -translate-x-1/2 transform'
},
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
'2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
'2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
'3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
},
default: {
size: 'sm',
color: 'primary',
position: 'top-right',
inset: false
}
}