芯片
芯片是一小块基本信息，代表输入、属性或操作。
安装
npx nextui-cli@latest add chip
以上命令仅用于单独安装。如果 @nextui-org/react 已在全局安装，则可以跳过此步骤。
导入
用法
禁用
尺寸
颜色
圆角
变体
开始和结束内容
带关闭按钮
如果你传递了 onClose 属性，关闭按钮将可见。你可以通过传递 endContent 属性来覆盖关闭图标。
带头像
芯片列表
插槽
- base：芯片的基本插槽，它是芯片的容器。
- content：芯片的内容插槽，它是芯片子项的容器。
- dot：芯片左侧的小点。当传递
variant=dot属性时，它可见。 - avatar：芯片的头像类。当传递
avatar属性时，它可见。 - closeButton：芯片的关闭按钮类。当传递
onClose属性时，它可见。
自定义样式
你可以通过将自定义 Tailwind CSS 类传递给组件插槽来定制 Chip 组件。
API
芯片属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| children | ReactNode | 芯片的内容。 | - |
| variant | solid | bordered | light | flat | faded | shadow | dot | 芯片的外观样式。 | solid |
| color | default | primary | secondary | success | warning | danger | 芯片的颜色。 | default |
| size | sm | md | lg | 芯片的大小。 | md |
| 半径 | none | sm | md | lg | full | 芯片的半径。 | full |
| 头像 | ReactNode | 在芯片左侧呈现的头像。 | - |
| startContent | ReactNode | 在芯片左侧呈现的元素。此属性会覆盖 avatar 属性。 | - |
| endContent | ReactNode | 在芯片右侧呈现的元素。当传递 onClose 时，此属性会覆盖默认的关闭按钮。 | - |
| isDisabled | 布尔值 | 芯片是否已禁用。 | false |
| classNames | Record<"base"｜ "content"｜ "dot"｜ "avatar"｜ "closeButton", string> | 允许为芯片插槽设置自定义类名。 | - |
芯片事件
| 属性 | 类型 | 描述 |
|---|---|---|
| onClose | (e: PressEvent) => void | 按下关闭按钮时调用的处理程序。如果您传递此属性，则芯片将显示一个关闭按钮（endContent）。 |
