2.0.1 • Published 7 months ago
@rc-component/dom-align v2.0.1
@rc-component/dom-align
Align source html element with target html element flexibly.
Screenshot
Install
Feature
- support Edge Chrome Firefox
- support align points and offset
- support auto adjust according to visible area
Usage
import domAlign from '@rc-component/dom-align';
// use domAlign
// sourceNode's initial style should be position:absolute;left:-9999px;top:-9999px;
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
};
domAlign(sourceNode, targetNode, alignConfig);
API
void domAlign(source: HTMLElement, target: HTMLElement, alignConfig: Object):Function
alignConfig object details
Development
pnpm install
pnpm start
Example
License
@rc-component/dom-align is released under the MIT license.
2.0.1
7 months ago