@rc-component/dom-align
+
Part of the Ant Design ecosystem.
📐 DOM alignment utility for positioning one element against another.
+ +
+ 
+ 
+ 
+ 
+ 
+ Part of the Ant Design ecosystem.
📐 DOM alignment utility for positioning one element against another.
+ +
+
+
+
+
+
English | 简体中文
+ +## Highlights + +| Area | Support | +| ------- | ------------------------------------------------------------------ | +| Purpose | DOM alignment utility for positioning one element against another. | +| Package | `@rc-component/dom-align` | +| Release | `@rc-component/np` / `rc-np` | ## Install -[](https://npmjs.org/package/@rc-component/dom-align) - -## Feature - -- support Edge Chrome Firefox -- support align points and offset -- support auto adjust according to visible area +```bash +npm install @rc-component/dom-align +``` ## Usage -```js +```tsx | pure import domAlign from '@rc-component/dom-align'; -// use domAlign -// sourceNode's initial style should be position:absolute;left:-9999px;top:-9999px; +domAlign(sourceNode, targetNode, { + points: ['tl', 'tr'], + offset: [10, 20], + overflow: { adjustX: true, adjustY: true }, +}); +``` + +## API + +| Option | Description | +| --- | --- | +| `points` | Source and target alignment points. | +| `offset` | Source node offset. | +| `targetOffset` | Target node offset. | +| `overflow` | Auto-adjust behavior when the source overflows viewport. | +| `useCssRight` / `useCssBottom` / `useCssTransform` | Choose CSS positioning strategy. | -const alignConfig = { - points: ['tl', 'tr'], // align top left point of sourceNode with top right point of targetNode - offset: [10, 20], // the offset sourceNode by 10px in x and 20px in y, - targetOffset: ['30%', '40%'], // the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y, - overflow: { adjustX: true, adjustY: true }, // auto adjust position when sourceNode is overflowed -}; +## Development -domAlign(sourceNode, targetNode, alignConfig); +```bash +npm install +npm start +npm test +npm run lint +npm run tsc +npm run compile ``` -## API +The dumi site runs at `http://localhost:8000`. + +## Release + +```bash +npm run prepublishOnly +``` + +The release flow is handled by `@rc-component/np` through the `rc-np` command when the package uses the shared release flow. + +## Detailed API ### void domAlign(source: HTMLElement, target: HTMLElement, alignConfig: Object):Function @@ -125,17 +135,10 @@ domAlign(sourceNode, targetNode, alignConfig); -## Development - -``` -pnpm install -pnpm start -``` - ## Example http://localhost:8000/ ## License -@rc-component/dom-align is released under the MIT license. +@rc-component/dom-align is released under the [MIT](./LICENSE.md) license. diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..c82f009 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,77 @@ + Ant Design 生态的一部分。
📐 用于将一个 DOM 元素相对另一个元素定位的对齐工具。
+ +
+
+
+
+
+
English | 简体中文
+ +## 亮点 + +| 方向 | 支持 | +| ---- | ------------------------------------------------- | +| 定位 | 用于将一个 DOM 元素相对另一个元素定位的对齐工具。 | +| 包名 | `@rc-component/dom-align` | +| 发布 | `@rc-component/np` / `rc-np` | + +## 安装 + +```bash +npm install @rc-component/dom-align +``` + +## 用法 + +```tsx | pure +import domAlign from '@rc-component/dom-align'; + +domAlign(sourceNode, targetNode, { + points: ['tl', 'tr'], + offset: [10, 20], + overflow: { adjustX: true, adjustY: true }, +}); +``` + +## API + +| 名称 | 说明 | +| -------------------------------------------------- | -------------------------------- | +| `points` | 源节点和目标节点的对齐点。 | +| `offset` | 源节点偏移。 | +| `targetOffset` | 目标节点偏移。 | +| `overflow` | 源节点超出视口时的自动调整行为。 | +| `useCssRight` / `useCssBottom` / `useCssTransform` | 选择 CSS 定位策略。 | + +## 本地开发 + +```bash +npm install +npm start +npm test +npm run lint +npm run tsc +npm run compile +``` + +本地 dumi 站点默认运行在 `http://localhost:8000`. + +## 发布 + +```bash +npm run prepublishOnly +``` + +发布流程通过 `@rc-component/np` 提供的 `rc-np` 命令处理。 + +## 许可证 + +@rc-component/dom-align 基于 [MIT](./LICENSE.md) 协议发布。 diff --git a/app/body-overflow/page.tsx b/app/body-overflow/page.tsx index 9cb0471..19a95f6 100644 --- a/app/body-overflow/page.tsx +++ b/app/body-overflow/page.tsx @@ -4,11 +4,11 @@ import React, { useRef, useEffect } from 'react'; import domAlign from '../../src'; export default function Overflow() { - const source = useRef(); - const target = useRef(); - const timer = useRef