Chip

纸片组件是用来表示输入框、属性或操作的紧凑元素。

纸片组件允许用户输入信息、进行选择、过滤内容或触发动作。

在这里，虽然我们将纸片组件归类为一个独立的组件，但更常见的作法是用在表单中作为输入框，因此本篇演示的内容并不会在上下文中显示。

Basic chip

The Chip component supports outlined and filled styling.

Chip Filled

Chip Outlined

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

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

Press Enter to start editing

Chip actions

You can use the following actions.

Chips with the onClick prop defined change appearance on focus, hover, and click.
Chips with the onDelete prop defined will display a delete icon which changes appearance on hover.

Clickeable

⚠️ Missing demo `ClickeableChips.js` ⚠️

Deleteable

⚠️ Missing demo `DeleteableChips.js` ⚠️

Clickeable and deleteable

⚠️ Missing demo `ClickeableAndDeleteableChips.js` ⚠️

Clickeable link

⚠️ Missing demo `ClickeableLinkChips.js` ⚠️

Custom delete icon

<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"
/>

Press Enter to start editing

Chip adornments

您可以在组件的开头添加修饰。

Use the avatar prop to add an avatar or use the icon prop to add an icon.

Avatar chip

Avatar

<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"
/>

Press Enter to start editing

Icon chip

With Icon

<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" />

Press Enter to start editing

Color chip

You can use the color prop to define a primary or secondary 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>

Press Enter to start editing

Sizes chip

您可以借助 size 属性来定义一个小型纸片组件。

Small

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

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

Press Enter to start editing

纸片阵列

An example of rendering multiple chips from an array of values. 删除一个纸片元素，则会将其从纸片组的数组中删除。删除一个纸片元素，则会将其从纸片组的数组中删除。 Note that since no onClick prop is defined, the Chip can be focused, but does not gain depth while clicked or touched.

Angular
jQuery
Polymer
React
Vue.js

Chip playground

无障碍设计

如果 Chip 是可删除或可点击的，它则应该是一个安装标签顺序排列的按钮。当纸片被聚焦时（例如在制表符时），释放（keyup 事件） Backspace 或 Delete 将调用 onDelete 处理程序，从而通过释放 Escape 来模糊纸片组件。

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Chip />