Chip

Chip 生成一个紧凑的元素，可以表示输入、属性或操作。

简介

Chip 最常用于两种主要用例：作为信息内容的药丸或作为筛选选项。

组件

在安装后，您可以开始使用以下基本元素构建此组件

import Chip from '@mui/joy/Chip';

export default function MyApp() {
  return <Chip>My chip</Chip>;
}

基本用法

Chip 默认带有中等尺寸、主要颜色和实心变体设置。

这是一个 chip

<Chip>This is a chip</Chip>

<Chip>This is a chip</Chip>

按 Enter 开始编辑

装饰器

使用 startDecorator 和/或 endDecorator 属性向 chip 添加支持图标。

今天晴朗

明天多云

<Chip variant="soft" startDecorator={<Sun />}>
  Today is sunny
</Chip>
<Chip variant="soft" startDecorator={<Cloud />}>
  Tomorrow is cloudy
</Chip>

<Chip variant="soft" startDecorator={<Sun />}>
  Today is sunny
</Chip>
<Chip variant="soft" startDecorator={<Cloud />}>
  Tomorrow is cloudy
</Chip>

按 Enter 开始编辑

删除按钮

要在 chip 内部添加删除操作，请使用互补的 ChipDelete 组件。

当满足以下任一条件时，将触发 onDelete 回调 ChipDelete：

按下 Backspace、Enter 或 Delete。
单击 ChipDelete。

import ChipDelete from '@mui/joy/ChipDelete';

移除

删除

作为链接

您还可以通过将值 a 分配给 component 属性，将 chip 组件用作链接。由于链接是浏览页面的最合适的组件，因此当您想要链接的相同 chip 设计时，这非常有用。

这样做会自动将渲染的 HTML 标签从 <div> 更改为 <a>。

锚点 chip

<Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
  Anchor chip
</Chip>

<Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
  Anchor chip
</Chip>

按 Enter 开始编辑

可点击

要使 chip 可点击，请将函数传递给 onClick 属性。

标记

<Chip
  variant="outlined"
  color="neutral"
  size="lg"
  startDecorator={<Avatar size="sm" src={`/static/images/avatar/1.jpg`} />}
  endDecorator={<CheckIcon fontSize="md" />}
  onClick={() => alert('You clicked the Joy Chip!')}
>
  Mark
</Chip>

<Chip
  variant="outlined"
  color="neutral"
  size="lg"
  startDecorator={<Avatar size="sm" src={`/static/images/avatar/1.jpg`} />}
  endDecorator={<CheckIcon fontSize="md" />}
  onClick={() => alert('You clicked the Joy Chip!')}
>
  Mark
</Chip>

按 Enter 开始编辑

可点击和可删除

同时使用 onClick 属性和互补的 ChipDelete 组件，使 chip 支持两个操作。

清除

<Chip
  variant="outlined"
  color="danger"
  onClick={() => alert('You clicked the chip!')}
  endDecorator={
    <ChipDelete
      color="danger"
      variant="plain"
      onClick={() => alert('You clicked the delete button!')}
    >
      <DeleteForever />
    </ChipDelete>
  }
>
  Clear
</Chip>

<Chip
  variant="outlined"
  color="danger"
  onClick={() => alert('You clicked the chip!')}
  endDecorator={
    <ChipDelete
      color="danger"
      variant="plain"
      onClick={() => alert('You clicked the delete button!')}
    >
      <DeleteForever />
    </ChipDelete>
  }
>
  Clear
</Chip>

按 Enter 开始编辑

带有单选按钮

常见的筛选 UI，将 Radio 组件与 Chip 组件包装在一起使用。当您想要启用单项选择时，请使用单选按钮。

带有复选框

与上面类似，将 Checkbox 组件与 Chip 组件包装在一起使用。当您想要启用多项选择时，请使用复选框。

CSS 变量 Playground

试用滑块组件中所有可用的 CSS 变量，看看设计如何变化。

您可以使用这些变量在 sx 属性和主题上自定义组件。

一些文本

人员姓名

<Chip
  startDecorator={<Avatar />}
  endDecorator={<ChipDelete />}
>

CSS 变量

--Chip-minHeight

--Chip-radius

--Chip-gap

--Chip-paddingInline

--Chip-decoratorChildHeight

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。