🚧Chips

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

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

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

Анатомия

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

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

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

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

Контент

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

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

• текстовым

• числовым

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

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

В тегах

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

Способ добавления

Выпадающие списки

С единственным и множественным выбором

Ручной ввод

--

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

В инпутах

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

В таблицах

Размеры

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

Высота чипса составляет 24 px.

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

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

Вертикальные падинги 1px, горизонтальные - 4рх.

Состояния

Фокус (Focus)

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

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

Цвета