SDropdown

Обзор

Выпадающая панель (floating overlay) с позиционированием относительно якоря.

Usage

Открытие по клику на trigger-слот.

API

Краткий справочник props, slots и events — см. API Reference.

Guide

SDropdown позиционирует floating-панель относительно якоря из слота #trigger или внешнего reference.

Управление открытием — через v-model (boolean).
Слот #trigger получает toggle, open, triggerProps для a11y-связки с панелью.
Trigger может быть любым интерактивным элементом — кнопка, иконка, chip; компонент не привязан к SButton.
Для hover-режима включите showOnHover — панель открывается по наведению на trigger и content.
Общие паттерны overlay — см. Overlays.

Bottom sheet на мобильных

На viewport уже sheetBreakpoint (по умолчанию 768) содержимое показывается не floating-панелью у якоря, а bottom sheet — это поведение по умолчанию. Отключается пропом sheet: false для случаев, где панель должна оставаться привязанной к якорю.

Слот #content не меняется — он получает isSheet, чтобы содержимое могло адаптироваться, и close. Заголовок шапки задаётся через sheetTitle, дополнительные элементы — слотами #sheet-header-left / #sheet-header-right.

Закрытие: свайп вниз по шапке, клик по затемнению (dismissOnClickOutside), Escape (dismissOnEscape). Пока sheet открыт, скролл страницы заблокирован, фокус переходит на панель и возвращается на trigger при закрытии. В режиме sheet showOnHover не действует.

Размеры настраиваются CSS-переменными на .s-ui-dropdown-sheet: --s-ui-dropdown-sheet-max-height (по умолчанию 80svh) и --s-ui-dropdown-sheet-overdrag.

vue

<SDropdown v-model="isOpen" sheet-title="Выберите действие">
  <template #trigger="{ toggle, triggerProps }">
    <button type="button" v-bind="triggerProps" @click="toggle">Menu</button>
  </template>
  <template #content="{ isSheet, close }">…</template>
</SDropdown>

vue

<SDropdown v-model="isOpen">
  <template #trigger="{ toggle, triggerProps }">
    <button type="button" v-bind="triggerProps" @click="toggle">Menu</button>
  </template>
  <template #content>…</template>
</SDropdown>

Props

Со стрелкой

Placement top

Match reference width

Show on hover

Bottom sheet

Содержимое как bottom sheet: закрытие свайпом вниз по шапке, кликом по затемнению или Escape.

API Reference

Свойства

Имя	Тип	Описание	По умолчанию
`placement`	`ESDropdownPlacement`	Предпочтительное положение панели относительно якоря.	`'bottom-start'`
`offset`	`number`	Отступ панели от якоря в пикселях.	`8`
`flip`	`boolean`	Переворот панели при нехватке места.	`true`
`shift`	`boolean`	Сдвиг панели вдоль оси, чтобы оставаться в viewport.	`false`
`matchReferenceWidth`	`boolean`	Ширина панели равна ширине якоря.	`false`
`fitViewport`	`boolean`	Ограничение размеров панели границами viewport.	`false`
`surfaceClass`	`string`	Дополнительный CSS-класс поверхности панели.	—
`teleportTo`	`string \| false`	Селектор контейнера для `Teleport`; `false` — без телепорта.	`'body'`
`dismissOnClickOutside`	`boolean`	Закрытие по клику вне панели и якоря.	`true`
`dismissOnEscape`	`boolean`	Закрытие по Escape.	`true`
`disabled`	`boolean`	Блокирует открытие и взаимодействие.	`false`
`reference`	`HTMLElement \| null`	DOM-элемент якоря; если не задан, используется слот `trigger`.	`null`
`contentId`	`string`	`id` панели для `aria-controls`.	—
`viewportPadding`	`number`	Внутренний отступ от краёв viewport при позиционировании.	`8`
`boundary`	`ESDropdownBoundary`	Границы позиционирования и готовности панели: `clipping-ancestors` — пересечение viewport с overflow-предками якоря, `viewport` — только viewport (панель может выходить за скролл-контейнер якоря; скрытие при уходе якоря из его клип-границ сохраняется).	`'clipping-ancestors'`
`block`	`boolean`	Растягивает обёртку триггера на всю ширину контейнера.	`false`
`arrow`	`boolean`	Показывает стрелку-указатель к якорю.	`false`
`showOnHover`	`boolean`	Открывает и закрывает панель по наведению на якорь и содержимое.	`false`
`hoverLeaveDelay`	`number`	Задержка перед закрытием при уходе курсора с якоря или панели, мс.	`100`
`sheet`	`boolean`	Bottom sheet вместо floating-панели на мобильном viewport.	`true`
`sheetBreakpoint`	`number`	Ширина viewport в px, ниже которой включается bottom sheet.	`S_DROPDOWN_SHEET_BREAKPOINT`
`sheetTitle`	`string`	Заголовок шапки bottom sheet.	`''`
`modelValue / v-model`	`boolean`	Двустороннее значение компонента (`v-model`).	`false`

Слоты

Имя	Описание
`trigger`	Якорь открытия: `open`, `toggle`, `close`, `isSheet`, `triggerProps` для a11y
`sheet-header-left`	Область шапки bottom sheet слева от заголовка
`sheet-header-right`	Область шапки bottom sheet справа от заголовка
`content`	Содержимое панели; `resolvedPlacement` — итоговая позиция, `isSheet` — режим bottom sheet

SDropdown ​

Обзор ​

Usage ​

API ​

Guide ​

Bottom sheet на мобильных ​

Props ​

Со стрелкой ​

Placement top ​

Match reference width ​

Show on hover ​

Bottom sheet ​

API Reference ​

Свойства ​

Слоты ​