Search
Figma
Search — поле ввода, с помощью которого можно искать нужный контент (страницы и более мелкие элементы сайта или приложения)
Из чего состоит
  1. Поле поиска
  2. Внешний лейбл
  3. Внутренний лейбл
  4. Левая иконка
  5. Текст / Подсказка
  6. Комментарий
  7. Ошибка
  8. Правая иконка
  9. Выпадающий список
  10. Пункт выпадающего списка
  11. Текст пункта выпадающего списка
  12. Левая иконка пункта выпадающего списка
  13. Правая иконка пункта выпадающего списка
  14. Кнопка выпадающего списка
  15. Скроллбар
  16. Заголовок пункта выпадающего списка
  17. Подзаголовок пункта выпадающего списка
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Состояние поиска (State)
Размер поиска (Size)
Вид поиска (View)
Форма поиска (Form)
Мод выпадающего списка (Mode)
Размер выпадающего списка (Size)
Вид выпадающего списка (View)
Форма выпадающего списка (Form)
Мод пункта выпадающего списка (Mode)
Состояние пункта выпадающего списка (State)
Размер пункта выпадающего списка (Size)
Отключаемые элементы
👁 Выпадающий список
👁 Внешний заголовок (Outside Label)
👁 Внутренний заголовок (Inside Label)
👁 Текст (Text)
👁 Подсказка (Placeholder)
👁 Описание (Description)
👁 Ошибка (Error)
👁 Левая иконка (Left Icon)
👁 Правая иконка (Right Icon)
👁 Скроллбалр (Scrollbar)
👁 Левая иконка пункта выпадающего списка (Left Icon)
👁 Правая иконка пункта выпадающего списка (Right Icon)
👁 Текст пункта выпадающего списка (Text)
Редактируемые элементы
✏️ Внешний заголовок (Outside Label)
✏️ Внутренний заголовок (Inside Label)
✏️ Текст (Text)
✏️ Подсказка (Placeholder)
✏️ Описание (Description)
✏️ Ошибка (Error)
✏️ Левая иконка (Left Icon)
✏️ Правая иконка (Right Icon)
✏️ Левая иконка пункта выпадающего списка (Left Icon)
✏️ Правая иконка пункта выпадающего списка (Right Icon)
✏️ Текст пункта выпадающего списка (Text)
✏️ Заголовок пункта выпадающего списка (Title)
✏️ Подзаголовок пункта выпадающего списка (Subtitle)
✏️ Текст кнопки пункта выпадающего списка (Text)
Поле поиска и подсказка
Подсказка исчезает при нажатии на поле поиска и заполняется основным текстом, который вводит пользователь.
Ошибка
Сообщение об ошибке появляется, когда нарушается валидация. Текст сообщения устанавливается для каждого нарушения. Одновременно может быть выведено несколько сообщений об ошибке. Каждое новое сообщение начинается с новой строки. Состояние поля поиска меняется на “State = Error”.
По ширине контейнера
Search можно растягивать в ширину под внешний контейнер.
Много текста
Если количество текста, введенное в поле превышает его ширину, то текст скроллится горизонтально внутри поиска.
Иконка крестика
Правая иконка может иметь функционал при использовании иконки «крестик». Нажатие на иконку удаляет введенный текст.
Внутренние горизонтальные отступы (View = Underline)
Можно отключать внутренние горизонтальные отступы в поле поиска при выборе view “underline”.
Лоадер вместо иконки лупы
Левая иконка может становиться лоадером, когда идет загрузка данных, введенных в поиск.
Не найдено
Если ничего не найдено, то в выпадающем списке появляется надпись «Не найдено».
Подсветка результатов
Подсветка результатов по частичному совпадению. Цвет выделенного текста “...text&icons-20”.
Функционал кнопки
Кнопка в дропдауне имеет весь функционал обычной кнопки (не только ссылки, а, например, какое-нибудь действие: удалить/подтвердить/отправить/включить). Настраивается на проекте.
Количество строк в дропдауне
Ограничение по количеству строк с текстом в пункте дропдауна можно настраивать: 1/2/3/4 строки.
Если есть иконка, то она выравнивается по верху. В размере L у иконки дополнительный отступ 4px сверху.
Тултип при наведении на скрытый текст пункта
При наведении на пункт, текст которого скрылся, появляется тултип с полным текстом.
Скролл вкл/выкл
Если скролл включен, то высота дропдауна фиксированная, как отрисовано на дизайне. «кнопка» и «поиск» не учитываются в фиксированной высоте и не скроллятся вместе с пунктами.
Если скролл выключен, то высота дродпауна динамическая и зависит от количества пунктов внутри. При этом, высота может достигать любых размеров, выходя за рамки экрана.
Иконка-изображение
Иконка может быть любым изображением
Вложенность пунктов дропдауна
У пунктов дропдауна может быть вложенность (нажатие на пункт раскрывает другие пункты следующего уровня вложенности). Иконка справа — фиксированная (стрелка).
В раскрывающихся пунктах со стрелкой справа, после нажатия меняется только цвета текста и иконки на такой же, как у пунктов в состоянии “Active”, а фон пункта остается прежним.
Каждый уровень вложенности: +16px слева внутри пункта дропдауна.