---
name: Align
menu: Components
---
# Align
import {Playground} from 'docz'
import './demo/demo.scss'
import Align from '../../node_modules/rc-align';
本组件（Align）来源为[Github](https://github.com/react-component/align)
IMUI中会使用Align作为某些组件的定位工具，故这里提供一些官方之外的使用Demo，方便IMUI开发者参考.
## Props
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| align | 定位相关参数,与[dom-align](https://github.com/yiminghe/dom-align)组件的属性配置相同 | `Object` | |
| onAlign | 发生align时的回调 | `function(source:HTMLElement, align:Object)` | |
| target | 获取定位的目标元素 | `function():HTMLElement` | `function(){return window;}` |
| monitorWindowResize | 在resize时，是否进行align重排 | `bool` | `false` |
| align.points | 定位参数,数组第一个字符串表示要定位的元素对准点，第二个表示定位目标元素对准点。字符串包含两个字符，第1个表示纵向信息，第2个表示横向信息，字符可能的值为： 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) | `String[2]` | |
| align.offset | 要定位的元素的偏移,第1个值表示横向偏移，第2个表示纵向偏移 | `Number[2]` | |
| align.targetOffset | 目标元素的偏移,第1个值表示横向偏移，第2个表示纵向偏移 | `Number[2]` | |
| align.overflow | 是否启用视窗边缘碰撞检测。adjustX属性为true表示启用横向检测，adjustY属性为true表示启用纵向检测 | `Object` | |
| align.useCssRight | 是否使用css right替代left定位 | `bool` | false |
| align.useCssBottom | 是否使用css bottom替代top定位 | `bool` | false |
| align.useCssTransform | 当浏览器支持时，是否使用css transform替代top,left,bottom,right定位 | `bool` | false |
### 原始文档
* [https://github.com/react-component/align](https://github.com/react-component/align)
* [https://github.com/yiminghe/dom-align](https://github.com/yiminghe/dom-align)
## align.point
{() => {
let targetElems = [];
function getTarget(index) {
if (!targetElems.length) {
targetElems = document.getElementsByClassName('align-demo-target');
}
return targetElems[index - 1];
}
function getTargetFn(index) {
return () => {
return getTarget(index);
};
}
return <>
cc, cc
tr, bl
br, tl
bl, tr
tl, br
bc, tc
tc, bc
cr, cl
cl, cr
target
}}
## align.offset
{() => {
let targetElems = [];
function getTarget(index) {
if (!targetElems.length) {
targetElems = document.getElementsByClassName('align-demo-target');
}
return targetElems[index - 1];
}
function getTargetFn(index) {
return () => {
return getTarget(index);
};
}
return <>
point: ['cc', 'cc'], offset: [10, 20]
target
}}
## align.targetOffset
{() => {
let targetElems = [];
function getTarget(index) {
if (!targetElems.length) {
targetElems = document.getElementsByClassName('align-demo-target');
}
return targetElems[index - 1];
}
function getTargetFn(index) {
return () => {
return getTarget(index);
};
}
return <>
point: ['cc', 'cc'], targetOffset偏移: [10, 20]
target
}}
## align.overflow
{() => {
let targetElems = [];
function getTarget(index) {
if (!targetElems.length) {
targetElems = document.getElementsByClassName('align-demo-target');
}
return targetElems[index - 1];
}
function getTargetFn(index) {
return () => {
return getTarget(index);
};
}
return <>
尝试改变浏览器窗口大小，使浏览器边缘靠近橙色方块
target
}}