|
| 1 | +<div align="center"> |
| 2 | + <h1>@rc-component/trigger</h1> |
| 3 | + <p><sub>Ant Design 生态的一部分。</sub></p> |
| 4 | + <p>🎯 React 弹层触发基础组件,支持定位、对齐、动画和事件触发。</p> |
| 5 | + <p> |
| 6 | + <a href="https://www.npmjs.com/package/@rc-component/trigger"><img src="https://img.shields.io/npm/v/@rc-component/trigger.svg?style=flat-square" alt="npm version" /></a> |
| 7 | + <a href="https://www.npmjs.com/package/@rc-component/trigger"><img src="https://img.shields.io/npm/dm/@rc-component/trigger.svg?style=flat-square" alt="npm downloads" /></a> |
| 8 | + <a href="https://github.com/react-component/trigger/actions/workflows/react-component-ci.yml"><img src="https://github.com/react-component/trigger/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a> |
| 9 | + <a href="https://app.codecov.io/gh/react-component/trigger"><img src="https://img.shields.io/codecov/c/github/react-component/trigger/master.svg?style=flat-square" alt="Codecov" /></a> |
| 10 | + <a href="https://bundlephobia.com/package/@rc-component/trigger"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/trigger" alt="bundle size" /></a> |
| 11 | + <a href="https://github.com/umijs/dumi"><img src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square" alt="dumi" /></a> |
| 12 | + </p> |
| 13 | +</div> |
| 14 | + |
| 15 | +<p align="center"><a href="./README.md">English</a> | 简体中文</p> |
| 16 | + |
| 17 | + |
| 18 | +## 特性 |
| 19 | + |
| 20 | +- Built for React and maintained by the rc-component team. |
| 21 | +- 被 Ant Design 使用和其他 React 组件库使用。 |
| 22 | +- 提供 TypeScript declarations with both ES module and CommonJS outputs. |
| 23 | +- 保留 examples, tests, and preview builds aligned with the package source. |
| 24 | + |
| 25 | +## 安装 |
| 26 | + |
| 27 | +```bash |
| 28 | +npm install @rc-component/trigger |
| 29 | +``` |
| 30 | + |
| 31 | +## 使用 |
| 32 | + |
| 33 | +```tsx |
| 34 | +import Trigger from '@rc-component/trigger'; |
| 35 | +import '@rc-component/trigger/assets/index.css'; |
| 36 | + |
| 37 | +export default () => ( |
| 38 | + <Trigger |
| 39 | + action={['click']} |
| 40 | + popup={<span>Popup content</span>} |
| 41 | + popupAlign={{ |
| 42 | + points: ['tl', 'bl'], |
| 43 | + offset: [0, 4], |
| 44 | + }} |
| 45 | + > |
| 46 | + <button type="button">Open</button> |
| 47 | + </Trigger> |
| 48 | +); |
| 49 | +``` |
| 50 | + |
| 51 | +## 示例 |
| 52 | + |
| 53 | +Run the local dumi site to explore the examples: |
| 54 | + |
| 55 | +```bash |
| 56 | +npm install |
| 57 | +npm start |
| 58 | +``` |
| 59 | + |
| 60 | +## API |
| 61 | + |
| 62 | +### Trigger |
| 63 | + |
| 64 | +| 属性 | 说明 | 类型 | 默认值 | |
| 65 | +| -------------------------- | ------------------------------------------------------------------------- | ----------------------------------------- | ------------------ | |
| 66 | +| action | Actions that control popup visibility. | `ActionType` \| `ActionType[]` | `hover` | |
| 67 | +| afterOpenChange | Called after popup visibility changes. | `(visible) => void` | - | |
| 68 | +| afterPopupVisibleChange | Deprecated. Use `afterOpenChange` instead. | `(visible) => void` | - | |
| 69 | +| alignPoint | Align popup to mouse position for click, hover, and context menu actions. | `boolean` | `false` | |
| 70 | +| arrow | Render popup arrow. | `boolean` \| `ArrowType` | - | |
| 71 | +| autoDestroy | Destroy popup DOM when it is hidden. | `boolean` | `false` | |
| 72 | +| blurDelay | Delay before hiding on blur, in seconds. | `number` | - | |
| 73 | +| builtinPlacements | Named placement presets. | `BuildInPlacements` | `{}` | |
| 74 | +| defaultPopupVisible | Initial uncontrolled visibility. | `boolean` | `false` | |
| 75 | +| focusDelay | Delay before showing on focus, in seconds. | `number` | - | |
| 76 | +| forceRender | Render popup before it is first shown. | `boolean` | `false` | |
| 77 | +| fresh | Keep popup content updated while closed. | `boolean` | - | |
| 78 | +| getPopupClassNameFromAlign | Return a popup class name from the current alignment. | `(align) => string` | - | |
| 79 | +| getPopupContainer | Return the element that should contain the popup. | `(node) => HTMLElement` | - | |
| 80 | +| hideAction | Actions that hide popup visibility. | `ActionType[]` | - | |
| 81 | +| mask | Render a mask behind the popup. | `boolean` | `false` | |
| 82 | +| maskClosable | Close when clicking the mask. | `boolean` | `true` | |
| 83 | +| maskMotion | Motion config for the mask. | `CSSMotionProps` | - | |
| 84 | +| mouseEnterDelay | Delay before showing on mouse enter, in seconds. | `number` | - | |
| 85 | +| mouseLeaveDelay | Delay before hiding on mouse leave, in seconds. | `number` | `0.1` | |
| 86 | +| popup | Popup content. | `ReactNode` \| `() => ReactNode` | - | |
| 87 | +| popupAlign | Alignment config compatible with dom-align. | `AlignType` | - | |
| 88 | +| popupClassName | Class name added to popup. | `string` | - | |
| 89 | +| popupMotion | Motion config for the popup. | `CSSMotionProps` | - | |
| 90 | +| popupPlacement | Placement key from `builtinPlacements`. | `string` | - | |
| 91 | +| popupStyle | Inline popup style. | `React.CSSProperties` | - | |
| 92 | +| popupVisible | Controlled popup visibility. | `boolean` | - | |
| 93 | +| prefixCls | Popup class name prefix. | `string` | `rc-trigger-popup` | |
| 94 | +| showAction | Actions that show popup visibility. | `ActionType[]` | - | |
| 95 | +| stretch | Stretch popup width and/or height from target. | `string` | - | |
| 96 | +| unique | Share popup container through `UniqueProvider`. | `boolean` | - | |
| 97 | +| uniqueContainerClassName | Class name passed to `UniqueProvider` container. | `string` | - | |
| 98 | +| uniqueContainerStyle | Style passed to `UniqueProvider` container. | `React.CSSProperties` | - | |
| 99 | +| zIndex | Popup z-index. | `number` | - | |
| 100 | +| onOpenChange | Called when visibility changes. | `(visible) => void` | - | |
| 101 | +| onPopupAlign | Called when the popup is aligned. | `(element, align) => void` | - | |
| 102 | +| onPopupClick | Called when popup is clicked. | `React.MouseEventHandler<HTMLDivElement>` | - | |
| 103 | +| onPopupVisibleChange | Deprecated. Use `onOpenChange` instead. | `(visible) => void` | - | |
| 104 | + |
| 105 | +## 本地开发 |
| 106 | + |
| 107 | +```bash |
| 108 | +npm install |
| 109 | +npm start |
| 110 | +npm test |
| 111 | +npm run build |
| 112 | +``` |
| 113 | + |
| 114 | +## 发布 |
| 115 | + |
| 116 | +```bash |
| 117 | +npm run prepublishOnly |
| 118 | +``` |
| 119 | + |
| 120 | +The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. |
| 121 | + |
| 122 | +## 许可证 |
| 123 | + |
| 124 | +@rc-component/trigger is released under the [MIT](./LICENSE) license. |
0 commit comments