SwDropdown
Компонент SwDropdown — всплывающее меню с настройкой места открытия и типа триггера. У попапа есть уголок, который указывает на триггер; сторона и смещение считаются по фактической позиции (с учётом flip у края экрана). z-index попапа динамический = z-index ближайшего предка + 3. Клавиатура: Escape закрывает, ↑/↓ по пунктам, Enter / Space выбирает.
Компонент с trigger="hover" и текстом/разметкой в #dropdown работает как подсказка Tooltip (без SwDropdownItem, если это не меню).
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
class | String | `` | CSS-класс попапа (например guide для онбординга). |
size | String | `` | Размер: 'large', 'small'. |
type | String | `` | 'primary', 'success', 'info', 'warning', 'danger'. |
trigger | String | click | Способ открытия: 'click', 'hover' (в т.ч. как tooltip), 'context', 'none' — только через model. |
placement | String | bottom-left | 'bottom-left', 'bottom', 'bottom-right', 'top-left', 'top', 'top-right', 'left', 'right'. |
maxWidth | Number | 0 | Максимальная ширина меню в px. 0 — без ограничений. |
Слоты / Slots
Default - текст описания или модуль / модули #dropdown - контент всплывающего окна (пункты меню или произвольный текст для tooltip)
Модель / Model
model - состояние меню, булевое значение открыто - true
Пример использования / Example Usage
Меню:
<script setup>
import { ref } from 'vue'
const open = ref(false)
const TABLER = 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline'
const star = `${TABLER}/star.svg`
const chevron = `${TABLER}/chevron-down.svg`
</script>
<sw-dropdown v-model="open" trigger="click" placement="bottom-left">
<sw-button size="small">
Меню <sw-icon :icon-class="chevron" />
</sw-button>
<template #dropdown>
<sw-dropdown-item :before="star">Пункт со звездой</sw-dropdown-item>
<sw-dropdown-item>Обычный пункт</sw-dropdown-item>
<sw-dropdown-item type="danger">Опасный</sw-dropdown-item>
</template>
</sw-dropdown>Подсказка (tooltip):
<sw-dropdown trigger="hover" placement="top" :max-width="220">
<sw-button label="?" type="info" />
<template #dropdown>
Краткая подсказка к элементу
</template>
</sw-dropdown>