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

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

Clickeable and deleteable

Clickable Deleteable

<Chip
  label="Clickable Deleteable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Clickable Deleteable"
  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

Доступность

If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (keyup event) Backspace or Delete will call the onDelete handler while releasing Escape will blur the Chip.

API

<Chip />