Skip to content

Chip

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

安装

sh
npm add @heroui-vue/chip
sh
pnpm add @heroui-vue/chip
sh
yarn add @heroui-vue/chip
sh
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

MIT Licensed