README.zh-CN.md

@rc-component/dropdown

_{Ant Design 生态的一部分。}

🔽 ⬇️ React 下拉菜单基础组件，基于 trigger 和 menu 能力构建。

English | 简体中文

特性

• 基于 @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 许可证发布。