Components · Composite · In Progress

Dropdown menus

Всплывающий список действий или опций, привязанный к якорю. Один примитив-контейнер (.ds-ddm) и строка-пункт (.ds-ddm-item) собираются в три организма: Menu, SingleSelect, MultiSelect. Дочерние сущности переиспользуют примитивы DS — Badge, Checkbox, Tag, Divider, Button.

Организмы

Menu · SingleSelect · MultiSelect
Menu — список команд
SingleSelect — выбор одного
Group
Option one
Option two
Group
Option three
Option four
Loading…
MultiSelect — выбор нескольких
Select all3 из 56
Documents
Checked one
Unchecked
Profile
Checked two
Checked three
Loading…

Размеры

SM (12/8 · иконка 20) · MD (16/10 · иконка 24) · пункт с подписью
SM — компактный тир
MD — стандартный тир
Пункт с подписью

Состояния пункта

data-* атрибуты · static demo (без интеракции)
Default
Hover (data-state="hover")
Pressed (data-state="pressed")
Selected (data-selected)
Menu item
Loading (data-state="loading")
Disabled (data-disabled)
Disabled · SubTrigger (шеврон)
Disabled · с описанием
Destructive (data-type="destructive")
Destructive · Hover
Indeterminate (multi)
Select all3 из 56

Тёмная тема

surface = mirror-aware · hover = nba-20 (макет) · destructive = neg-ghost-рампа
Menu
MultiSelect
Select all2 из 8
Checked one
Unchecked

Правила использования

Когда · Чего избегать
Правила

Когда использовать

  • Список действий над объектом (контекстное меню, меню кнопки «…»)
  • Выбор одного значения из среднего/длинного списка → SingleSelect
  • Выбор нескольких значений с чекбоксами и счётчиком → MultiSelect
  • Группировка опций заголовками, разделители между блоками
Чего избегать

Когда не использовать

  • 2–5 взаимоисключающих опций, важно видеть все сразу → SelectControl / Radio
  • Свободный ввод с фильтрацией по мере набора → Combobox
  • Постоянно видимая навигация разделов → Tabs или сайдбар
  • Необратимое подтверждение (delete, wire transfer) → Modal с явными кнопками
  • Инлайн-уведомление → Notification / Alert

State Explorer

Интерактивный тест: size · select-mode · item-state
Size
Select mode
Item state