示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地视图动作
使用建议
用于动作而不是字段选择
下拉菜单适合打开、复制、排序或重置等即时动作；需要提交一个字段值时使用 Select 或 RadioGroup。
保持 value 稳定且唯一
每个 item 使用不会随文案改变的唯一 value，禁用项仍要说明不可执行的动作，不要静默复用值。
把危险副作用留给宿主确认
danger 只表达视觉语气；权限检查、二次确认、路由、请求和错误处理仍由宿主应用负责。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseDropdownMenu } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- DropdownMenu 不负责鉴权、确认、路由和业务副作用；宿主必须在执行动作前后处理这些合同。
- T17 尚缺 deterministic visual、touch/mobile trigger 与最终 packed React 18/19 证据。
- Deterministic visual evidence, touch/mobile trigger behavior, and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseDropdownMenuProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'defaultValue' | 'dir' | 'onSelect' | 'style'
> {
items?: BaseDropdownMenuItem[];
label?: ReactNode;
trigger?: ReactNode;
triggerLabel?: ReactNode;
triggerIcon?: ReactNode;
disabled?: boolean;
open?: boolean;
defaultOpen?: boolean;
placement?: BaseDropdownMenuPlacement;
closeOnSelect?: boolean;
portal?: boolean;
dir?: 'ltr' | 'rtl';
appearance?: BaseAppearance;
className?: string;
classNames?: BaseDropdownMenuClassNames;
style?: CSSProperties;
children?: ReactNode;
onOpenChange?: (open: boolean) => void;
onSelect?: (item: BaseDropdownMenuItem) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items | 用于生成组件条目的一组结构化数据。 | BaseDropdownMenuItem[] | [] |
label | 菜单触发控件的可访问名称。 | ReactNode | — |
trigger | 用于触发打开、关闭或显示内容的元素。 | ReactNode | — |
triggerLabel | 显示在触发控件中的标签内容。 | ReactNode | — |
triggerIcon | 显示在触发控件中的图标。 | ReactNode | — |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
open | 组件当前的受控打开状态。 | boolean | — |
defaultOpen | 非受控模式下是否默认打开。 | boolean | false |
placement | 浮层相对于触发元素的首选放置位置。 | BaseDropdownMenuPlacement | 'bottom-start' |
closeOnSelect | 选择菜单项后是否自动关闭菜单。 | boolean | true |
portal | 是否通过 Portal 将浮层挂载到外部容器。 | boolean | false |
dir | 弹出内容与键盘导航使用的文字方向。 | 'ltr' | 'rtl' | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseDropdownMenuClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
children | 在 BaseDropdownMenu 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
onOpenChange | 打开状态变化时调用的回调，参数为新的打开状态。 | (open: boolean) => void | — |
onSelect | 条目被选择时调用的回调。 | (item: BaseDropdownMenuItem) => void | — |