Chip

Chip 是紧凑的元素，代表一个输入、属性或操作。

Chip 允许用户输入信息、进行选择、过滤内容或触发操作。

虽然此处作为独立组件包含在内，但最常见的用法将是某种形式的输入，因此此处演示的某些行为未在上下文中显示。

基本 Chip

Chip 组件支持轮廓和填充样式。

填充 Chip

轮廓 Chip

<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />

<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />

按 Enter 开始编辑

Chip 操作

您可以使用以下操作。

定义了 onClick 属性的 Chip 在焦点、悬停和点击时会更改外观。
定义了 onDelete 属性的 Chip 将显示一个删除图标，该图标在悬停时会更改外观。

可点击

<Chip label="Clickable" onClick={handleClick} />
<Chip label="Clickable" variant="outlined" onClick={handleClick} />

<Chip label="Clickable" onClick={handleClick} />
<Chip label="Clickable" variant="outlined" onClick={handleClick} />

按 Enter 开始编辑

可删除

<Chip label="Deletable" onDelete={handleDelete} />
<Chip label="Deletable" variant="outlined" onDelete={handleDelete} />

<Chip label="Deletable" onDelete={handleDelete} />
<Chip label="Deletable" variant="outlined" onDelete={handleDelete} />

按 Enter 开始编辑

可点击且可删除

可点击可删除

<Chip
  label="Clickable Deletable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Clickable Deletable"
  variant="outlined"
  onClick={handleClick}
  onDelete={handleDelete}
/>

<Chip
  label="Clickable Deletable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Clickable Deletable"
  variant="outlined"
  onClick={handleClick}
  onDelete={handleDelete}
/>

按 Enter 开始编辑

可点击链接

可点击链接可点击链接

<Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
<Chip
  label="Clickable Link"
  component="a"
  href="#basic-chip"
  variant="outlined"
  clickable
/>

<Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
<Chip
  label="Clickable Link"
  component="a"
  href="#basic-chip"
  variant="outlined"
  clickable
/>

按 Enter 开始编辑

自定义删除图标

<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DoneIcon />}
/>
<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DeleteIcon />}
  variant="outlined"
/>

<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DoneIcon />}
/>
<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DeleteIcon />}
  variant="outlined"
/>

按 Enter 开始编辑

Chip 装饰

您可以向组件的开头添加装饰。

使用 avatar 属性添加头像，或使用 icon 属性添加图标。

头像 Chip

头像

<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
<Chip
  avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
  label="Avatar"
  variant="outlined"
/>

<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
<Chip
  avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
  label="Avatar"
  variant="outlined"
/>

按 Enter 开始编辑

图标 Chip

带图标

<Chip icon={<FaceIcon />} label="With Icon" />
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />

<Chip icon={<FaceIcon />} label="With Icon" />
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />

按 Enter 开始编辑

颜色 Chip

您可以使用 color 属性从主题调色板中定义颜色。

primary

success

primary

success

<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" />
  <Chip label="success" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" variant="outlined" />
  <Chip label="success" color="success" variant="outlined" />
</Stack>

<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" />
  <Chip label="success" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" variant="outlined" />
  <Chip label="success" color="success" variant="outlined" />
</Stack>

按 Enter 开始编辑

尺寸 Chip

您可以使用 size 属性定义一个小型 Chip。

小型

<Chip label="Small" size="small" />
<Chip label="Small" size="small" variant="outlined" />

<Chip label="Small" size="small" />
<Chip label="Small" size="small" variant="outlined" />

按 Enter 开始编辑

多行 Chip

默认情况下，Chip 仅以单行显示标签。要使其支持多行内容，请使用 sx 属性将 height:auto 添加到 Chip 组件，并将 whiteSpace: normal 添加到 label 样式。

这是一个有多行的 Chip。

<Chip
  sx={{
    height: 'auto',
    '& .MuiChip-label': {
      display: 'block',
      whiteSpace: 'normal',
    },
  }}
  label="This is a chip that has multiple lines."
/>

<Chip
  sx={{
    height: 'auto',
    '& .MuiChip-label': {
      display: 'block',
      whiteSpace: 'normal',
    },
  }}
  label="This is a chip that has multiple lines."
/>

按 Enter 开始编辑

Chip 数组

从值数组渲染多个 Chip 的示例。删除 Chip 会将其从数组中删除。请注意，由于未定义 onClick 属性，因此可以聚焦 Chip，但在单击或触摸时不会获得深度。

Angular
jQuery
Polymer
React
Vue.js

Chip 游乐场

无障碍设计

如果 Chip 是可删除或可点击的，则它在标签顺序中是一个按钮。当 Chip 获得焦点时（例如，当使用 Tab 键时），释放 (keyup 事件) Backspace 或 Delete 将调用 onDelete 处理程序，而释放 Escape 将使 Chip 失焦。

API

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

<Chip />