Выпадающий список
Выпадающий список экономит место и даёт выбрать одно или несколько значений
из набора вариантов; видимая подпись пункта отделена от его машинного
значения. Для небольшого набора, который помещается на экране, удобнее
радиокнопки или
флажки .
Пример
HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col max-w-sm" value ="kazan" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Город</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" >
<input class ="sf-dropdown-hidden-input" type ="hidden" name ="city" >
<input type ="text" placeholder ="Выберите город" >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть список городов" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button >
</div >
<div class ="sf-list flex flex-col" >
<div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="kazan" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Казань</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="moscow" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Москва</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="ufa" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Уфа</div ></div ></div >
</div ></div >
</div >
</div >
Разметка
Минимальную разметку показывает пример выше. Части вложены так:
sf-dropdown → подпись sf-dropdown-label, поле sf-dropdown-field и
список sf-list.
Корень sf-dropdown с размером sf-dropdown--size-{размер}, видом поля
(sf-dropdown--outlined или sf-dropdown--filled), отображением выбора
(sf-dropdown--text или sf-dropdown--tag) и утилитами flex flex-col.
Атрибут value задаёт начальный выбор — машинные значения через запятую.
Подпись поля — sf-dropdown-label с текстом в sf-dropdown-text.
Поле sf-dropdown-field с утилитами cursor-pointer items-cross-center transition flex relative содержит скрытый input типа hidden с классом
sf-dropdown-hidden-input и атрибутом name — он отправляет выбор с
формой, — текстовый input с placeholder и кнопку раскрытия
sf-icon-button … absolute со стрелкой keyboard_arrow_down.
Список sf-list → sf-list-container-wrap → sf-list-container → пункты
sf-list-item. Машинное значение пункта — в data-value, подпись — в
sf-list-item-container.
Скрипт связывает кнопку со списком, ставит роли и состояния, выводит
выбранное в поле и отправляет события; ничего вызывать не нужно.
Варианты
Вид поля
sf-dropdown--outlined — поле с рамкой, sf-dropdown--filled — с тональной
заливкой. Поле берёт радиус элементов управления (--sf-radius--ui), панель
списка — радиус крупных поверхностей (--sf-radius--surface). Пока список
с заливкой открыт или в нём фокус, поле выглядит как поле с рамкой. Берите
вид, которым оформлены остальные поля формы.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 md:grid-col-2 gap-3" >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Контурное поле — sf-dropdown--outlined</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Выберите" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть контурный список" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" ><div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="one" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Первый вариант</div ></div ></div ><div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="two" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Второй вариант</div ></div ></div ></div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--filled sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Заполненное поле — sf-dropdown--filled</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Выберите" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть заполненный список" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" ><div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="one" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Первый вариант</div ></div ></div ><div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="two" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Второй вариант</div ></div ></div ></div ></div ></div >
</div >
</div >
Отображение выбора
sf-dropdown--text показывает выбранные подписи строкой,
sf-dropdown--tag — отдельными тегами. Множественный выбор включает
атрибут multiple (у sf-dropdown--tag он включён по умолчанию); скрытое
поле тогда отправляет значения строкой через запятую.
Тег снимается крестиком на самом теге или повторным выбором его пункта в
списке. Длинная подпись тега сокращается многоточием, теги переносятся
строками и не перекрывают кнопку раскрытия.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 md:grid-col-2 gap-3" >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" multiple value ="anna,ivan" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Подписи строкой — sf-dropdown--text</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input class ="sf-dropdown-hidden-input" type ="hidden" name ="reviewers" ><input type ="text" placeholder ="Выберите участников" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть список участников" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 selected cursor-pointer" role ="option" tabindex ="-1" data-value ="anna" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Анна</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 selected cursor-pointer" role ="option" tabindex ="-1" data-value ="ivan" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Иван</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="olga" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Ольга</div ></div ></div >
</div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--filled sf-dropdown--tag flex flex-col" multiple value ="anna,ivan" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Теги — sf-dropdown--tag</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input class ="sf-dropdown-hidden-input" type ="hidden" name ="members" ><div class ="sf-dropdown-tag-container flex flex-wrap flex-1" ></div ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1" aria-label ="Открыть список участников" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 selected cursor-pointer" role ="option" tabindex ="-1" data-value ="anna" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Анна</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 selected cursor-pointer" role ="option" tabindex ="-1" data-value ="ivan" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Иван</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="olga" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Ольга</div ></div ></div >
</div ></div ></div >
</div >
</div >
Размер
Три ступени, как у полей форм: sf-dropdown--size-1/2,
sf-dropdown--size-1 и sf-dropdown--size-2. Размер меняет высоту,
отступы, текст, пункты списка и кнопку раскрытия вместе; пунктам ставьте
размер списка sf-list-item--size-… той же ступени. Значения 1/3 и 3
выпуск читает как 1/2 и 2 и пишет предупреждение в консоль.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 gap-2 max-w-sm" >
<div class ="sf-dropdown sf-dropdown--size-1/2 sf-dropdown--outlined sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >sf-dropdown--size-1/2</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Размер 1/2" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1/2 absolute" aria-label ="Открыть список размера 1/2" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1/2" data-value ="first-1-2" ><div class ="sf-list-item-wrap" ><div class ="sf-list-item-container" >Первое значение</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1/2" data-value ="second-1-2" ><div class ="sf-list-item-wrap" ><div class ="sf-list-item-container" >Второе значение</div ></div ></div >
</div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >sf-dropdown--size-1</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Размер 1" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть список размера 1" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1" data-value ="first-1" ><div class ="sf-list-item-wrap" ><div class ="sf-list-item-container" >Первое значение</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1" data-value ="second-1" ><div class ="sf-list-item-wrap" ><div class ="sf-list-item-container" >Второе значение</div ></div ></div >
</div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-2 sf-dropdown--outlined sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >sf-dropdown--size-2</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Размер 2" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-2 absolute" aria-label ="Открыть список размера 2" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-2" data-value ="first-2" ><div class ="sf-list-item-wrap" ><div class ="sf-list-item-container" >Первое значение</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-2" data-value ="second-2" ><div class ="sf-list-item-wrap" ><div class ="sf-list-item-container" >Второе значение</div ></div ></div >
</div ></div ></div >
</div >
</div >
Пункты списка
Пункт содержит текст (sf-list-item--text), иконку (sf-list-item--icon),
флажок (sf-list-item--checkbox), аватар (sf-list-item--avatar) или
цветовую метку (sf-list-item--color). Вложенная графика декоративна:
фокус и выбор принадлежат всему пункту. Пункт — не самостоятельная кнопка
или флажок: роль, клавиатуру и aria-selected задаёт выпадающий список.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 md:grid-col-2 gap-3" >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Текстовые пункты</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Выберите значение" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Текстовые пункты" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="plain" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Обычный текст</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="second" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Ещё один пункт</div ></div ></div >
</div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Пункты с иконками</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Выберите значение" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Пункты с иконками" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="kazan" ><div class ="sf-list-item-wrap flex flex-1" ><i class ="sf-icon" aria-hidden ="true" >location_on</i ><div class ="sf-list-item-container" >Казань</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="home" ><div class ="sf-list-item-wrap flex flex-1" ><i class ="sf-icon" aria-hidden ="true" >home</i ><div class ="sf-list-item-container" >Дом</div ></div ></div >
</div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--tag flex flex-col" multiple value ="mail,chat" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Индикаторы выбора</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><div class ="sf-dropdown-tag-container flex flex-wrap flex-1" ></div ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1" aria-label ="Открыть: Индикаторы выбора" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--checkbox sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="mail" ><div class ="sf-list-item-wrap flex flex-1" ><label class ="sf-checkbox sf-checkbox--size-1 flex" aria-hidden ="true" ><span class ="sf-checkbox-box transition flex" ><input type ="checkbox" tabindex ="-1" ><span class ="sf-icon" aria-hidden ="true" ></span ></span ></label ><div class ="sf-list-item-container" >Почта</div ></div ></div >
<div class ="sf-list-item sf-list-item--checkbox sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="chat" ><div class ="sf-list-item-wrap flex flex-1" ><label class ="sf-checkbox sf-checkbox--size-1 flex" aria-hidden ="true" ><span class ="sf-checkbox-box transition flex" ><input type ="checkbox" tabindex ="-1" ><span class ="sf-icon" aria-hidden ="true" ></span ></span ></label ><div class ="sf-list-item-container" >Чат</div ></div ></div >
</div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Ответственные</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Выберите значение" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Ответственные" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--avatar sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="design" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-avatar-label-group sf-avatar-label-group--size-1 flex items-center" ><span class ="sf-avatar sf-avatar--size-1/2 sf-avatar--text flex justify-center items-center" aria-hidden ="true" >ДК</span ><span class ="sf-avatar-label-group-title" >Дизайн-команда</span ></div ></div ></div >
<div class ="sf-list-item sf-list-item--avatar sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="content" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-avatar-label-group sf-avatar-label-group--size-1 flex items-center" ><span class ="sf-avatar sf-avatar--size-1/2 sf-avatar--text flex justify-center items-center" aria-hidden ="true" >КК</span ><span class ="sf-avatar-label-group-title" >Контент-команда</span ></div ></div ></div >
</div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Цветовая метка</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Выберите значение" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Цветовая метка" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--color sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="primary" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-tag sf-tag--color sf-tag--size-1 flex items-center" ><span class ="sf-tag-color-icon bg-primary" aria-hidden ="true" ></span ><span class ="sf-tag-container" >Основная</span ></div ></div ></div >
<div class ="sf-list-item sf-list-item--color sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="secondary" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-tag sf-tag--color sf-tag--size-1 flex items-center" ><span class ="sf-tag-color-icon bg-secondary" aria-hidden ="true" ></span ><span class ="sf-tag-container" >Вторичная</span ></div ></div ></div >
</div ></div ></div >
</div >
</div >
Флаги в пунктах
Флаг Flag встаёт в пункт sf-list-item--icon
на место иконки: элемент sf-flag sf-flag--rect с кодом страны в
data-country и aria-hidden="true". Выбранный флаг повторяется в поле.
Название языка пишите на самом языке и отметьте пункт атрибутом lang.
Флаг обозначает страну, а не язык: при нескольких странах одного языка
уточните вариант в подписи, например «English (UK)».
HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" value ="ru" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Язык интерфейса</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Выберите язык" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Язык интерфейса" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="ru" lang ="ru" ><div class ="sf-list-item-wrap flex flex-1 items-cross-center" ><span class ="sf-flag sf-flag--rect" data-country ="ru" aria-hidden ="true" ></span ><div class ="sf-list-item-container" >Русский</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="en" lang ="en" ><div class ="sf-list-item-wrap flex flex-1 items-cross-center" ><span class ="sf-flag sf-flag--rect" data-country ="gb" aria-hidden ="true" ></span ><div class ="sf-list-item-container" >English</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="de" lang ="de" ><div class ="sf-list-item-wrap flex flex-1 items-cross-center" ><span class ="sf-flag sf-flag--rect" data-country ="de" aria-hidden ="true" ></span ><div class ="sf-list-item-container" >Deutsch</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="fr" lang ="fr" ><div class ="sf-list-item-wrap flex flex-1 items-cross-center" ><span class ="sf-flag sf-flag--rect" data-country ="fr" aria-hidden ="true" ></span ><div class ="sf-list-item-container" >Français</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="es" lang ="es" ><div class ="sf-list-item-wrap flex flex-1 items-cross-center" ><span class ="sf-flag sf-flag--rect" data-country ="es" aria-hidden ="true" ></span ><div class ="sf-list-item-container" >Español</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="zh" lang ="zh" ><div class ="sf-list-item-wrap flex flex-1 items-cross-center" ><span class ="sf-flag sf-flag--rect" data-country ="cn" aria-hidden ="true" ></span ><div class ="sf-list-item-container" >中文</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="ja" lang ="ja" ><div class ="sf-list-item-wrap flex flex-1 items-cross-center" ><span class ="sf-flag sf-flag--rect" data-country ="jp" aria-hidden ="true" ></span ><div class ="sf-list-item-container" >日本語</div ></div ></div >
</div ></div ></div >
</div >
Поиск
Поле поиска sf-input в начале sf-list фильтрует пункты по видимой
подписи. Машинные значения поиск не меняет.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" value ="kazan" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Город доставки</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input class ="sf-dropdown-hidden-input" type ="hidden" name ="city" ><input type ="text" placeholder ="Выберите значение" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Город доставки" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><label class ="sf-input sf-input--size-1 sf-input--filled flex flex-col" ><span class ="sf-input-field items-cross-center transition flex" ><input type ="text" aria-label ="Поиск по списку" placeholder ="Начните вводить" ><i class ="sf-icon sf-icon-hint" aria-hidden ="true" >search</i ></span ></label ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="kazan" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Казань</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="moscow" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Москва</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="ufa" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Уфа</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="yekaterinburg" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Екатеринбург</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="novosibirsk" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Новосибирск</div ></div ></div >
</div ></div ></div >
</div >
Группы
Строка sf-list-heading с текстом в sf-list-heading-container начинает
группу: пункты под ней читаются вместе, и название группы не повторяется в
каждом пункте. Заголовок не выбирается и не получает фокус.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" multiple value ="code,title" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Поля карточки</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input class ="sf-dropdown-hidden-input" type ="hidden" name ="fields" ><input type ="text" placeholder ="Выберите поля" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Поля карточки" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><label class ="sf-input sf-input--size-1 sf-input--filled flex flex-col" ><span class ="sf-input-field items-cross-center transition flex" ><input type ="text" aria-label ="Поиск по списку" placeholder ="Начните вводить" ><i class ="sf-icon sf-icon-hint" aria-hidden ="true" >search</i ></span ></label ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-heading" role ="presentation" ><span class ="sf-list-heading-container" >В этой области</span ></div >
<div class ="sf-list-item sf-list-item--checkbox sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="code" aria-selected ="true" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><label class ="sf-checkbox sf-checkbox--size-1 flex" aria-hidden ="true" ><span class ="sf-checkbox-box flex" ><input type ="checkbox" tabindex ="-1" checked ><span class ="sf-icon" aria-hidden ="true" ></span ></span ></label ><div class ="sf-list-item-container" >Код решения</div ></div ></div >
<div class ="sf-list-item sf-list-item--checkbox sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="title" aria-selected ="true" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><label class ="sf-checkbox sf-checkbox--size-1 flex" aria-hidden ="true" ><span class ="sf-checkbox-box flex" ><input type ="checkbox" tabindex ="-1" checked ><span class ="sf-icon" aria-hidden ="true" ></span ></span ></label ><div class ="sf-list-item-container" >Название</div ></div ></div >
<div class ="sf-list-heading" role ="presentation" ><span class ="sf-list-heading-container" >Не размещённые</span ></div >
<div class ="sf-list-item sf-list-item--checkbox sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="scripts" aria-selected ="false" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><label class ="sf-checkbox sf-checkbox--size-1 flex" aria-hidden ="true" ><span class ="sf-checkbox-box flex" ><input type ="checkbox" tabindex ="-1" ><span class ="sf-icon" aria-hidden ="true" ></span ></span ></label ><div class ="sf-list-item-container" >Скрипты в head</div ></div ></div >
<div class ="sf-list-heading" role ="presentation" ><span class ="sf-list-heading-container" >Работа</span ></div >
<div class ="sf-list-item sf-list-item--checkbox sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="author" aria-selected ="false" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><label class ="sf-checkbox sf-checkbox--size-1 flex" aria-hidden ="true" ><span class ="sf-checkbox-box flex" ><input type ="checkbox" tabindex ="-1" ><span class ="sf-icon" aria-hidden ="true" ></span ></span ></label ><div class ="sf-list-item-container" >Автор</div ></div ></div >
<div class ="sf-list-item sf-list-item--checkbox sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="progress" aria-selected ="false" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><label class ="sf-checkbox sf-checkbox--size-1 flex" aria-hidden ="true" ><span class ="sf-checkbox-box flex" ><input type ="checkbox" tabindex ="-1" ><span class ="sf-icon" aria-hidden ="true" ></span ></span ></label ><div class ="sf-list-item-container" >Прогресс, %</div ></div ></div >
</div ></div ></div >
</div >
Свой триггер
Вместо поля список может открывать другой элемент — кнопка-иконка в шапке
группы, «+» на панели. Поставьте его в sf-dropdown-trigger на место
sf-dropdown-field: компонент берёт у него только нажатие, вид остаётся
вашим. sf-list--free-width даёт списку свою ширину вместо ширины
триггера.
В примере список ещё и разложен сеткой: sf-list-container--grid ставит
пункты по шесть в ряд (число задаёт --sf-list-container--columns), а
высоту прокручиваемой сетки — --sf-dropdown--grid-height. В сетке пункт
показывает картинку, а подпись остаётся его именем для поиска и подсказкой
title.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" value ="payments" >
<div class ="sf-dropdown-trigger flex items-cross-center" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Значок раздела" ><i class ="sf-icon" aria-hidden ="true" >payments</i ></button ></div >
<div class ="sf-list sf-list--free-width flex flex-col" ><label class ="sf-input sf-input--size-1 sf-input--filled flex flex-col" ><span class ="sf-input-field items-cross-center transition flex" ><input type ="text" aria-label ="Поиск по списку" placeholder ="Начните вводить" ><i class ="sf-icon sf-icon-hint" aria-hidden ="true" >search</i ></span ></label ><div class ="sf-list-container-wrap" ><div class ="sf-list-container sf-list-container--grid flex flex-col" >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="folder" aria-selected ="false" title ="folder" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><i class ="sf-icon" aria-hidden ="true" >folder</i ><div class ="sf-list-item-container" >folder</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="person" aria-selected ="false" title ="person" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><i class ="sf-icon" aria-hidden ="true" >person</i ><div class ="sf-list-item-container" >person</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="payments" aria-selected ="true" title ="payments" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><i class ="sf-icon" aria-hidden ="true" >payments</i ><div class ="sf-list-item-container" >payments</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="schedule" aria-selected ="false" title ="schedule" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><i class ="sf-icon" aria-hidden ="true" >schedule</i ><div class ="sf-list-item-container" >schedule</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="mail" aria-selected ="false" title ="mail" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><i class ="sf-icon" aria-hidden ="true" >mail</i ><div class ="sf-list-item-container" >mail</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="settings" aria-selected ="false" title ="settings" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><i class ="sf-icon" aria-hidden ="true" >settings</i ><div class ="sf-list-item-container" >settings</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="palette" aria-selected ="false" title ="palette" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><i class ="sf-icon" aria-hidden ="true" >palette</i ><div class ="sf-list-item-container" >palette</div ></div ></div >
<div class ="sf-list-item sf-list-item--icon sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="code" aria-selected ="false" title ="code" ><div class ="sf-list-item-wrap flex flex-1 flex flex-row flex-nowrap items-center gap-2" ><i class ="sf-icon" aria-hidden ="true" >code</i ><div class ="sf-list-item-container" >code</div ></div ></div >
</div ></div ></div >
</div >
Размещение списка
Открытый список выходит в верхний слой страницы (native Popover), поэтому
обрезающие контейнеры и модальные окна ему не мешают. Он открывается под
полем, переворачивается вверх, если снизу не помещается, сдвигается внутрь
экрана у края и ограничивает высоту видимой областью. Атрибут
portal="false" оставляет список в потоке страницы.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="overflow-hidden p-2" >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" value ="kazan" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Город в обрезающем контейнере</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input class ="sf-dropdown-hidden-input" type ="hidden" name ="portal-city" ><input type ="text" placeholder ="Выберите значение" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Город в обрезающем контейнере" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="kazan" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Казань</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="moscow" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Москва</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="ufa" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Уфа</div ></div ></div >
</div ></div ></div >
</div >
</div >
Состояния
Выбран, недоступен, обязателен
Выбранный пункт получает класс selected и aria-selected="true"; скрипт
ставит их сам по атрибуту value или по выбору. Атрибут disabled на
корне (или класс disabled) выключает весь список, класс disabled на
пункте — один пункт. Атрибут required отмечает обязательное поле;
звёздочку в подписи оформляет sf-dropdown-required. Сброс формы
возвращает выбор, заданный при подключении.
HTML wrap_text Wrap source lines content_copy Copy
<form class ="grid grid-col-1 md:grid-col-2 gap-3" >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--outlined sf-dropdown--text flex flex-col" required value ="ready" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Статус</span ><span class ="sf-dropdown-required" aria-hidden ="true" >*</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input class ="sf-dropdown-hidden-input" type ="hidden" name ="status" ><input type ="text" placeholder ="Выберите значение" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Статус *" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="draft" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Черновик</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="ready" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Готово</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer disabled" role ="option" tabindex ="-1" data-value ="archive" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Архив</div ></div ></div >
</div ></div ></div >
</div >
<div class ="sf-dropdown sf-dropdown--size-1 sf-dropdown--filled sf-dropdown--text flex flex-col" disabled value ="blocked" >
<span class ="sf-dropdown-label" ><span class ="sf-dropdown-text" >Недоступный список</span ></span >
<div class ="sf-dropdown-field cursor-pointer items-cross-center transition flex relative" ><input type ="text" placeholder ="Выберите значение" ><button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--size-1 absolute" aria-label ="Открыть: Недоступный список" ><i class ="sf-icon" aria-hidden ="true" >keyboard_arrow_down</i ></button ></div >
<div class ="sf-list flex flex-col" ><div class ="sf-list-container-wrap" ><div class ="sf-list-container flex flex-col" >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer selected" role ="option" tabindex ="-1" data-value ="blocked" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Недоступно</div ></div ></div >
<div class ="sf-list-item sf-list-item--text sf-list-item--size-1 cursor-pointer" role ="option" tabindex ="-1" data-value ="other" ><div class ="sf-list-item-wrap flex flex-1" ><div class ="sf-list-item-container" >Другой вариант</div ></div ></div >
</div ></div ></div >
</div >
<div ><button type ="reset" class ="sf-button sf-button--primary sf-button--default sf-button--size-1" ><span class ="sf-button-text-container" >Вернуть исходный статус</span ></button ></div >
</form >
Доступность
Видимая подпись sf-dropdown-label — имя поля; скрипт связывает с ней
кнопку и список. placeholder — только приглашение к выбору, не подпись.
Кнопка раскрытия получает aria-haspopup="listbox", aria-expanded и
aria-controls; список — role="listbox" и aria-multiselectable,
пункты — role="option", aria-selected и aria-disabled.
Кнопка раскрытия — точка Tab. Стрелки вниз и вверх, Enter и пробел на ней
открывают список; в списке стрелки переходят по пунктам, Home и End — к
первому и последнему, Enter и пробел выбирают пункт, Escape закрывает
список, Tab закрывает его и продолжает обход страницы.
Иконки, флаги и флажки внутри пунктов скрыты через aria-hidden="true".
JavaScript
Скрипт подключается сам и обслуживает каждый .sf-dropdown, в том числе
добавленный позже. Корни, которые отрисовал Smart-компонент
<sf-dropdown>, он пропускает.
При выборе корень отправляет всплывающее событие change. В detail:
value и label выбранного пункта, values — все выбранные значения,
item, root и multiple. Снятие тега крестиком отправляет то же событие
с пустыми value, label и item: null. Одновременно уходит
sf-dropdown:change с тем же detail — его выпуск оставляет для
совместимости, слушайте change.
JavaScript wrap_text Wrap source lines content_copy Copy
document.querySelector ('.sf-dropdown' ).addEventListener ('change' , (event ) => {
console.log (event.detail.values);
});
Классы
Что
Классы
Блок
sf-dropdown
Части
sf-dropdown-field, sf-dropdown-field-visual, sf-dropdown-label, sf-dropdown-placeholder, sf-dropdown-required, sf-dropdown-tag-container, sf-dropdown-text, sf-dropdown-trigger, sf-dropdown-value
Модификаторы
sf-dropdown--filled, sf-dropdown--outlined, sf-dropdown--tag, sf-dropdown--text
Размеры
sf-dropdown--size-1, sf-dropdown--size-1/2, sf-dropdown--size-2
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента ). Значение по умолчанию — из базового правила блока (.sf-dropdown); переменную без него задают только модификаторы.
Переменная
По умолчанию
Задаёт
--sf-dropdown-field--background-colorне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[:not-has(%3E%20.sf-dropdown-field%20%3E%20:disabled)] .sf-dropdown-field: var(--sf-surface-0)
background-color
--sf-dropdown-field--borderне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-field: var(--sf-px) solid
border, border-color, border-end-end-radius, border-end-start-radius, border-start-end-radius, border-start-start-radius
--sf-dropdown-field--border-colorне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[:not-has(%3E%20.sf-dropdown-field%20%3E%20:disabled)] .sf-dropdown-field: var(--sf-outline)
border-color
--sf-dropdown-field--gapне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field: var(--sf-space-1/4)
gap
--sf-dropdown-field--padding-bottomне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field: calc(var(--sf-ui-1/2--space-y-tightness-default) - var(--sf-px))
padding-bottom
--sf-dropdown-field--padding-inline-endне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field: var(--sf-ui-1/2--space-x)
padding-inline-end, inset-inline-end
--sf-dropdown-field--padding-inline-startне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field: var(--sf-ui-1/2--space-x)
padding-inline-start
--sf-dropdown-field--padding-topне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field: calc(var(--sf-ui-1/2--space-y-tightness-default) - var(--sf-px))
padding-top
--sf-dropdown-input--colorне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text input: var(--sf-on-surface)
color
--sf-dropdown-input--font-familyне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text input: var(--sf-text--family)
font-family
--sf-dropdown-input--font-sizeне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text input: var(--sf-text-size-1)
font-size
--sf-dropdown-input--font-weightне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text input: var(--sf-font-weight-regular)
font-weight
--sf-dropdown-input--line-heightне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text input: var(--sf-text-height-1)
line-height
--sf-dropdown-input--padding-inline-endне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input: var(--sf-text-size-4)
padding-inline-end
--sf-dropdown-input--padding-inline-startне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input: var(--sf-ui-1--text-space-x)
padding-inline-start
--sf-dropdown-label--background-colorне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-label: transparent
background-color
--sf-dropdown-label--gapне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-label: var(--sf-space-1/4)
gap
--sf-dropdown-placeholder--colorне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder: var(--sf-on-surface-variant)
color
--sf-dropdown-placeholder--font-familyне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder: var(--sf-text--family)
font-family
--sf-dropdown-placeholder--font-sizeне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder: var(--sf-text-size-1)
font-size
--sf-dropdown-placeholder--line-heightне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder: var(--sf-text-height-1)
line-height
--sf-dropdown-required--colorне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-required: var(--sf-error)
color
--sf-dropdown-required--font-familyне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-required: var(--sf-text--family)
font-family
--sf-dropdown-required--font-sizeне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-required: var(--sf-text-size-1/2)
font-size
--sf-dropdown-required--font-weightне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-required: var(--sf-font-weight-regular)
font-weight
--sf-dropdown-required--line-heightне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-required: var(--sf-text-height-1/2)
line-height
--sf-dropdown-tag-container--gapне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--tag .sf-dropdown-tag-container: var(--sf-space-1/3)
gap
--sf-dropdown-tag-line--boxvar(--sf-dropdown-tag-line--height)--sf-tag--line, height, block-size, width, inline-size, max-height, max-block-size, --sf-flag--size, --sf-icon--font-size, --sf-icon--height, --sf-icon--width, --sf-avatar--height, --sf-avatar--width, --sf-avatar--font-size, --sf-avatar--line-height, --sf-tag-color-icon--height, --sf-tag-color-icon--width
--sf-dropdown-tag-line--heightне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1/2: var(--sf-text-height-1/2)
--sf-dropdown-tag-line--box
--sf-dropdown-text--colorне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-text: var(--sf-on-surface-variant)
color
--sf-dropdown-text--font-familyне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-text: var(--sf-text--family)
font-family
--sf-dropdown-text--font-sizeне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-text: var(--sf-text-size-1/2)
font-size
--sf-dropdown-text--font-weightне задана; задают модификаторы, например .sf-dropdown .sf-dropdown-text: var(--sf-font-weight-regular)
font-weight
--sf-dropdown-text--line-heightне задана; задают модификаторы, например .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-text: var(--sf-text-height-1/2)
line-height
См. также
