Chip

Chip 是代表输入、属性或操作的小型信息块。

Storybook@heroui/chipSourceStyles source

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

引入方式

用法

禁用状态

尺寸

颜色

圆角

变体

起始与结束内容

带关闭按钮

如果传递了 onClose 属性，关闭按钮将可见。您可以通过传递 endContent 属性来自定义关闭图标。

带头像

Chip 列表

插槽

  • base: Chip 的基础插槽，作为组件的容器
  • content: Chip 的内容插槽，作为子元素的容器
  • dot: Chip 左侧的小圆点。当传入 variant=dot 属性时可见
  • avatar: Chip 的头像样式类。当传入 avatar 属性时可见
  • closeButton: Chip 的关闭按钮样式类。当传入 onClose 属性时可见

自定义样式

您可以通过向组件插槽传递自定义的 Tailwind CSS 类来定制 Chip 组件。

API

Chip 属性

PropTypeDefault
children
ReactNode
variant
solid | bordered | light | flat | faded | shadow | dot
"solid"
color
default | primary | secondary | success | warning | danger
"default"
size
sm | md | lg
"md"
radius
none | sm | md | lg | full
"full"
avatar
ReactNode
startContent
ReactNode
endContent
ReactNode
isDisabled
boolean
false
classNames
Partial<Record<"base" | "content" | "dot" | "avatar" | "closeButton", string>>

Chip 事件

PropTypeDefault
onClose
(e: PressEvent) => void
Checkbox Group 复选框组Circular Progress 圆形进度