Dropdown
向下弹出的菜单，通过触发元素唤起一组可操作命令项。对齐 Semi：children 为触发器，render/menu 定义浮层内容（Dropdown.Menu/Item/Title/Divider）；hover/focus/click/custom/contextMenu 触发；12 方位；嵌套子菜单（手动嵌套 Dropdown）；showTick 勾选、type 五色语义、icon、active、disabled；键盘导航与 Esc 关闭。
如何引入
import { Dropdown, Dropdown.Menu, Dropdown.Item, Dropdown.Title, Dropdown.Divider } from '@chenzy-design/svelte';基本用法
render 用 Dropdown.Menu 组合 Title / Item / Divider；Item 支持 icon、disabled、type 五色。
嵌套使用
在 render 内手动嵌套 <Dropdown>，其 children 为 Dropdown.Item 作子菜单触发器。
弹出位置
position 支持 12 方位，语义对齐 Semi（bottomStart≈bottomLeft），空间不足时自动翻转。
top
topStart
topEnd
bottom
bottomStart
bottomEnd
left
leftStart
leftEnd
right
rightStart
rightEnd
触发方式
trigger 支持 hover 悬浮、focus 聚焦、click 点击、contextMenu 右键四种唤起方式。
Hover me
Please use Tab to focus this div
触发事件
菜单项支持 onClick / onMouseEnter / onMouseLeave / onContextMenu 四类鼠标事件。
JSON 用法
通过 menu 属性传入 JSON Array 快速配置下拉框；showTick 时 active 项左侧显示对勾。
API 参考
Dropdown
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
render | 弹出层内容，由 Dropdown.Menu / Item / Title / Divider 构成（对齐 Semi render） | Snippet | undefined |
menu | 通过 JSON Array 快速配置内容（node=item/title/divider）；render 存在时忽略（对齐 Semi menu） | DropdownMenuItem[] | undefined |
children | 触发弹出层的 Trigger 元素（对齐 Semi children） | Snippet | undefined |
trigger | 触发方式；custom 需配 visible 受控，contextMenu 右键定位光标 | 'hover'|'focus'|'click'|'custom'|'contextMenu' | hover |
visible | 受控显隐，需配合 trigger=custom（对齐 Semi visible） | boolean | undefined |
defaultVisible | 非受控初始显隐 | boolean | false |
position | 弹出位置（12 方位，语义对齐 Semi position：bottomStart≈bottomLeft、rightStart≈rightTop） | Placement | bottom |
autoAdjustOverflow | 弹出层被遮挡时自动调整方向（对齐 Semi） | boolean | true |
mouseEnterDelay | 移入 Trigger 后延迟显示(ms)，仅 hover/focus 生效（对齐 Semi） | number | 50 |
mouseLeaveDelay | 移出弹出层后延迟消失(ms)，仅 hover/focus 生效（对齐 Semi） | number | 100 |
spacing | 弹出层与 Trigger 距离(px)（对齐 Semi spacing） | number | { x: number; y: number } | 4（嵌套 2） |
margin | 弹出层计算溢出的冗余值(px)（对齐 Semi margin） | number | undefined |
zIndex | 弹出层 z-index（对齐 Semi zIndex） | number | 1050 |
motion | 下拉动画开关（对齐 Semi motion） | boolean | true |
className | 下拉弹层外层样式类名（作用于 div.cd-dropdown，对齐 Semi className） | string | undefined |
contentClassName | 下拉菜单根元素类名（作用于 div.cd-dropdown-content，对齐 Semi contentClassName） | string | undefined |
style | 弹出层内联样式（作用于 div.cd-dropdown-content，对齐 Semi style） | string | undefined |
showTick | 自动在 active 的 Dropdown.Item 左侧展示对勾（对齐 Semi showTick） | boolean | false |
stopPropagation | 阻止弹出层上的点击事件冒泡（对齐 Semi stopPropagation） | boolean | false |
closeOnEsc | 在 trigger 或弹出层按 Esc 是否关闭，受控时不生效（对齐 Semi closeOnEsc） | boolean | true |
rePosKey | 更新该值手动触发弹出层重新定位（对齐 Semi rePosKey） | string | number | undefined |
disableFocusListener | hover 时不响应键盘聚焦弹出事件（对齐 Semi，issue#977） | boolean | false |
clickToHide | 弹出层内点击时是否自动关闭弹出层（对齐 Semi clickToHide） | boolean | true |
keepDOM | 关闭时是否保留内部组件 DOM 不销毁（对齐 Semi keepDOM） | boolean | false |
getPopupContainer | 指定父级 DOM 挂载弹层（对齐 Semi getPopupContainer） | () => HTMLElement | () => document.body |
onVisibleChange | 弹出层显示状态改变时的回调（对齐 Semi onVisibleChange） | (visible: boolean) => void | undefined |
onEscKeyDown | 在 trigger 或弹出层按 Esc 时调用，关闭逻辑之前（对齐 Semi onEscKeyDown） | (e: KeyboardEvent) => void | undefined |
onClickOutSide | 展示状态下点击外部区域回调，仅 custom/click 有效（对齐 Semi onClickOutSide） | (e: PointerEvent) => void | undefined |
Dropdown.Menu
下拉弹层菜单容器（对齐 Semi dropdownMenu）：ul[role=menu][aria-orientation=vertical]。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 菜单 ul 样式类名 | string | undefined |
style | 菜单 ul 内联样式 | string | undefined |
children | Dropdown.Item / Title / Divider | Snippet | undefined |
Dropdown.Item
单个菜单项（对齐 Semi dropdownItem）：li[role=menuitem]。showTick 时 active 项左侧对勾。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
key | 项键，onClick 携带 | string | number | undefined |
disabled | 禁用菜单项（对齐 Semi disabled） | boolean | false |
active | 激活态：showTick 时左侧对勾、字重加粗（对齐 Semi active） | boolean | false |
type | 语义色（对齐 Semi type） | 'primary'|'secondary'|'tertiary'|'warning'|'danger' | undefined |
icon | 前置图标（对齐 Semi icon） | Snippet | undefined |
onClick | 单击回调（对齐 Semi onClick） | (e: MouseEvent) => void | undefined |
onMouseEnter | MouseEnter 回调（对齐 Semi） | (e: MouseEvent) => void | undefined |
onMouseLeave | MouseLeave 回调（对齐 Semi） | (e: MouseEvent) => void | undefined |
onContextMenu | 右键回调（对齐 Semi） | (e: MouseEvent) => void | undefined |
children | 菜单项内容 | Snippet | undefined |
Dropdown.Title
分组标题（对齐 Semi dropdownTitle）：div.cd-dropdown-title，不可点击/聚焦。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 分组标题内容 | Snippet | undefined |
Dropdown.Divider
分隔线（对齐 Semi dropdownDivider）：div.cd-dropdown-divider。
Accessibility
| ARIA role | menu |
| 键盘交互 | EnterSpaceArrowDownArrowUpEscape |
- 触发器 role=button + aria-haspopup=menu + aria-expanded + aria-controls（嵌套触发器为 Dropdown.Item 自身承担 menuitem 语义）
- 浮层 ul role=menu + aria-orientation=vertical，项 li role=menuitem（tabindex=-1，方向键移动焦点漫游）
- click 触发打开后焦点自动落首个非禁用项（对齐 Semi foundation）
- divider role=separator；title 组标题不可聚焦
- Esc 关闭并归还触发器焦点（受控时不生效）；外部点击关闭并回调 onClickOutSide
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-transition-dropdown-item-bg-delay | 0ms | 下拉菜单项背景色过渡延迟 |
--cd-transition-dropdown-item-bg-duration | var(--cd-motion-duration-none) | 下拉菜单项背景色过渡时长（默认 none） |
--cd-transition-dropdown-item-bg-function | var(--cd-motion-ease-standard) | 下拉菜单项背景色过渡曲线（easeOut） |