Align
本组件(Align)来源为Github
IMUI中会使用Align作为某些组件的定位工具,故这里提供一些官方之外的使用Demo,方便IMUI开发者参考.
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| align | 定位相关参数,与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 |
原始文档
align.point
cc, cc
tr, bl
br, tl
bl, tr
tl, br
bc, tc
tc, bc
cr, cl
cl, cr
target
align.offset
point: ['cc', 'cc'], offset: [10, 20]
target
align.targetOffset
point: ['cc', 'cc'], targetOffset偏移: [10, 20]
target
align.overflow
尝试改变浏览器窗口大小,使浏览器边缘靠近橙色方块
target