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

Clickable

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

Deleteable

Deletable

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

Clickeable and deleteable

Clickable Deletable

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

Clickeable link

Clickable Link Clickable Link

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

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 adornments

You can add ornaments to the beginning of the component.

Use the avatar prop to added a avatar or use the icon prop to added a 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"
/>

Icon chip

With Icon

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

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>

Sizes chip

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

Small

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

纸片阵列

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

<Chip />