Chip

Chip是一个呈现输入信息、属性或操作的小型信息块。

安装

npm

npm add @heroui-vue/chip

pnpm

pnpm add @heroui-vue/chip

yarn

yarn add @heroui-vue/chip

bun

bun add @heroui-vue/chip

使用

预览源代码

Chip

禁用

预览源代码

Chip

尺寸

预览源代码

SmallMediumLarge

颜色

预览源代码

DefaultPrimarySecondarySuccessWarningDanger

半径

预览源代码

FullLargeMediumSmall

变体

预览源代码

SolidBorderedLightFlatFadedShadowDot

Start 和 End 内容

预览源代码

Chip Chip

带关闭按钮

预览源代码

Chip Chip

带头像

INFO

依赖Avatar组件

WARNING

Work in progress

样式插槽Slots

• base：Chip的基座插槽，它是Chip的容器。
• content：Chip的内容插槽，它是Chip子项的容器。
• dot：Chip左侧的小圆点。设置 variant="dot" 属性时可见。
• avatar：Chip的头像类。使用 avatar 插槽时可见。
• closeButton：Chip的关闭按钮类。监听 @close 事件时可见。

自定义样式

预览源代码

New