特性

• 基于 @rc-component/trigger 构建。
• 支持悬停、单击、上下文菜单和自定义触发操作。
• 接受 React 元素或渲染函数作为下拉覆盖。
• 支持对齐点行为和触发宽度匹配。

安装

npm install @rc-component/dropdown

使用

import Dropdown from '@rc-component/dropdown';
import '@rc-component/dropdown/assets/index.css';

export default function App() {
  return (
    <Dropdown overlay={<div>Dropdown content</div>} trigger={['click']}>
      <button type="button">Open</button>
    </Dropdown>
  );
}

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

额外属性会透传给底层 @rc-component/trigger 组件。

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | alignPoint | 将弹层窗口与点击点对齐 | boolean | false | | animation | 弹层动画名称 | string | - | | arrow | 是否显示下拉箭头 | boolean | false | | getPopupContainer | 呈现下拉列表的容器 | (node: HTMLElement) => HTMLElement | () => document.body | | minOverlayWidthMatchTrigger | 覆盖宽度是否至少应为触发宽度 | boolean | true 除非设置了 alignPoint | | openClassName | 打开下拉菜单时添加到触发器的类名 | string | ${prefixCls}-open | | overlay | 下拉菜单内容 | React.ReactElement \| (() => React.ReactElement) | - | | overlayClassName | 附加弹层类名 | string | - | | overlayStyle | 叠加样式 | React.CSSProperties | - | | placement | 下拉菜单位置 | string | bottomLeft | | prefixCls | 组件类名前缀 | string | rc-dropdown | | transitionName | 弹层过渡类名 | string | - | | trigger | 触发动作 | ActionType \| ActionType[] | ['hover'] | | visible | 受控可见状态 | boolean | - | | onOverlayClick | 点击下拉菜单内容时的回调 | (event: Event) => void | - | | onVisibleChange | 可见性变化时的回调 | (visible: boolean) => void | - |

本地开发

npm install
npm start

dumi 站点默认运行在 http://localhost:8000。

npm test
npm run tsc
npm run lint
npm run compile
npm run build

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/dropdown 基于 MIT 许可证发布。