README.zh-CN.md

@rc-component/trigger

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

🎯 React 弹层触发基础组件，支持定位、对齐、动画和事件触发。

English | 简体中文

特性

• 面向 React 构建，并由 rc-component 团队维护。
• 被 Ant Design 使用和其他 React 组件库使用。
• 提供 TypeScript 类型声明，同时输出 ES module 和 CommonJS 产物。
• 示例、测试和预览构建与包源码保持一致。

安装

npm install @rc-component/trigger

使用

import Trigger from '@rc-component/trigger';
import '@rc-component/trigger/assets/index.css';

export default () => (
  <Trigger
    action={['click']}
    popup={<span>Popup content</span>}
    popupAlign={{
      points: ['tl', 'bl'],
      offset: [0, 4],
    }}
  >
    <button type="button">Open</button>
  </Trigger>
);

示例

运行本地 dumi 站点：

npm install
npm start

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

API

Trigger

属性	说明	类型	默认值
action	控制弹层显示状态的触发行为。	ActionType | ActionType[]	hover
afterOpenChange	弹层窗口可见性更改后调用。	(visible) => void	-
afterPopupVisibleChange	已废弃。请使用 afterOpenChange。	(visible) => void	-
alignPoint	将弹层对齐到 click、hover 和 context menu 行为的鼠标位置。	boolean	false
arrow	渲染弹层箭头。	boolean | ArrowType	-
autoDestroy	弹层隐藏时销毁弹层 DOM。	boolean	false
blurDelay	blur 后隐藏前的延迟，单位为秒。	number	-
builtinPlacements	命名位置预设。	BuildInPlacements	{}
defaultPopupVisible	非受控初始显示状态。	boolean	false
focusDelay	focus 后显示前的延迟，单位为秒。	number	-
forceRender	首次显示前渲染弹层。	boolean	false
fresh	关闭时仍保持弹层内容更新。	boolean	-
getPopupClassNameFromAlign	根据当前对齐信息返回弹层 className。	(align) => string	-
getPopupContainer	返回弹层挂载容器元素。	(node) => HTMLElement	-
hideAction	隐藏弹层的触发行为。	ActionType[]	-
mask	在弹层后渲染遮罩。	boolean	false
maskClosable	点击遮罩时关闭。	boolean	true
maskMotion	遮罩动画配置。	CSSMotionProps	-
mouseEnterDelay	mouse enter 后显示前的延迟，单位为秒。	number	-
mouseLeaveDelay	鼠标离开后隐藏前的延迟，单位为秒。	number	0.1
popup	弹层内容。	ReactNode | () => ReactNode	-
popupAlign	与 dom-align 兼容的对齐配置。	AlignType	-
popupClassName	添加到弹层的 className。	string	-
popupMotion	弹层动画配置。	CSSMotionProps	-
popupPlacement	来自 builtinPlacements 的位置 key。	string	-
popupStyle	弹层内联样式。	React.CSSProperties	-
popupVisible	受控的弹层窗口可见性。	boolean	-
prefixCls	弹层 className 前缀。	string	rc-trigger-popup
showAction	显示弹层的触发行为。	ActionType[]	-
stretch	根据目标拉伸弹层宽度和/或高度。	string	-
unique	通过 UniqueProvider 共享弹层容器。	boolean	-
uniqueContainerClassName	传给 UniqueProvider 容器的 className。	string	-
uniqueContainerStyle	传给 UniqueProvider 容器的样式。	React.CSSProperties	-
zIndex	弹层 z 索引。	number	-
onOpenChange	当可见性发生变化时调用。	(visible) => void	-
onPopupAlign	弹层完成对齐时调用。	(element, align) => void	-
onPopupClick	点击弹层时调用。	React.MouseEventHandler<HTMLDivElement>	-
onPopupVisibleChange	已废弃。请使用 onOpenChange。	(visible) => void	-

本地开发

npm install
npm start
npm test
npm run build

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

发布

npm run prepublishOnly

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

许可证

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