✅Chips

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

Общая информация

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

Анатомия

1. Контейнер чипса

2. Контент: текст или числовое значение

3. Иконка закрытия (опционально)

Описание работы

Контент

Каждый чипс содержит контент. Содержимое может заполнятся из справочника (выбором из списка, а так же с использованием автозаполнения), произвольно с клавиатуры или быть статическим.

Контент может быть:

• текстовым

• числовым

Текст может быть именем объекта, описанием, тегом, действием, счетчиком, настройкой и т.п.

Как применять

В тегах

В выбранных тегах рекомендуется использовать иконку удаления.

В поисковых запросах

Поведение и оформление идентично поведению тегов - информация фильтруется в соответствии с выбранным запросом, информация по нескольким запросам - дублируется.

Где применяется

В инпутах

В выпадающих списках

В таблицах

Размеры

Внешние размеры

В нашей дизайн-системе имеется 2 размера чипса M – 24 px и S - 16 px:

Ширина чипса зависит от контента.

Внутренние размеры

В размере М-24 px: вертикальные падинги 8 px, горизонтальные - 4 рх. В размере S-16 px: вертикальные падинги 4 px, горизонтальные - 0 рх.

Состояния

Существует 4 основных состояния чипса:

1. Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с чипсом

2. Hover — при наведении курсора

3. Active –– выбранное/активное

4. Disable — неактивное (недоступное для взаимодействия)

Фокус (Focus)

У чипсов существует состояние Focus. Он появляется при переходе к чипсам клавишей Enter в поле ввода, ячейке таблицы или при клике в чипс. Стрелками можно перемещать фокус между ними.

Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.