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.

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

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`
`arrow`	`boolean`	Показывает стрелку-указатель к якорю.	`false`
`showOnHover`	`boolean`	Открывает и закрывает панель по наведению на якорь и содержимое.	`false`
`hoverLeaveDelay`	`number`	Задержка перед закрытием при уходе курсора с якоря или панели, мс.	`100`
`modelValue / v-model`	`boolean`	Двустороннее значение компонента (`v-model`).	`false`

Слоты

Имя	Описание
`trigger`	Якорь открытия: `open`, `toggle`, `triggerProps` для a11y
`content`	Содержимое панели; `resolvedPlacement` — итоговая позиция

SDropdown ​

Обзор ​

Usage ​

API ​

Guide ​

Props ​

Со стрелкой ​

Placement top ​

Match reference width ​

Show on hover ​

API Reference ​

Свойства ​

Слоты ​