使用美观的组件更快地交付
NextUI Pro

Chip（标签）

Chip（标签）是一个小的基本信息块，代表一个输入、属性或操作。

Storybook@nextui-org/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"
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>>

标签事件

属性类型默认值
onClose
(e: PressEvent) => void
复选框组圆形进度条