Перейти к контенту

Chip

Фишки - это компактные элементы, представляющие входные данные, атрибут или действие.

Фишки позволяют пользователям вводить информацию, делать выбор, фильтровать контент или инициировать действия.

Несмотря на то, что он включен здесь как автономный компонент, наиболее распространенное использование будет в той или иной форме ввода, поэтому некоторые из продемонстрированных здесь действий не показаны в контексте.

Chip

Примеры фишек, использующих изображения, SVG-иконку, «Символ» и строку в качестве аватара.

  • Фишки с заданным свойством onClick могут изменять внешний вид при фокусировке, наведении курсора и клике.
  • Фишки с определенным свойством onDelete будут отображать значок удаления который меняет внешний вид при наведении курсора.
Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable Link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Контурные фишки

Контурные фишки предлагают альтернативный стиль.

Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Массив фишек

Пример рендеринга нескольких фишек из массива значений. Удаление фишки удаляет ее из массива. Обратите внимание, что поскольку свойство onClick не определено, фишка может быть сфокусирована, но не получает глубины при щелчке или касании.

  • Angular
  • jQuery
  • Polymer
  • React
  • Vue.js

Маленькая фишка

Для определения маленькой фишки можно использовать свойство size.

Вариант по умолчанию

Basic
M
Clickable
Natacha
Deletable
Clickable Deletable
Custom delete icon
Clickable Link
M
Primary Clickable
Primary Clickable
Deletable Primary
Deletable Secondary

Контурный вариант

Basic
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Песочница

Chip Component
<Chip />

Доступность

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.