Chips
Чипсы - это компактные элементы, представляющие входные данные, атрибуты или действия.
Общая информация
Чипсы - это компактные элементы, представляющие входные данные, атрибуты или действия.
Анатомия
Контейнер чипса
Контент: текст или числовое значение
Иконка закрытия (опционально)
Описание работы
Контент
Каждый чипс содержит контент. Содержимое может заполнятся из справочника (выбором из списка, а так же с использованием автозаполнения), произвольно с клавиатуры или быть статическим.
Контент может быть:
текстовым
числовым
Текст может быть именем объекта, описанием, тегом, действием, счетчиком, настройкой и т.п.
Как применять
В тегах
В выбранных тегах рекомендуется использовать иконку удаления.
Способ добавления
Выпадающие списки
С единственным и множественным выбором
Ручной ввод
--
Где применяется
В инпутах
В выпадающих списках
В таблицах
Размеры
Внешние размеры
Высота чипса составляет 24 px.
Ширина чипса зависит от контента.
Внутренние размеры
Вертикальные падинги 1px, горизонтальные - 4рх.
Состояния
Фокус (Focus)
У чипсов существует состояние Focus. Он появляется при переходе к чипсам клавишей Enter в поле ввода, ячейке таблицы или при клике в чипс. Стрелками можно перемещать фокус между ними.
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.
Цвета
Last updated