Imui
Components
AlertAlignPropsalign.pointalign.offsetalign.targetOffsetalign.overflowButtonCheckboxCheckbox GroupConfirmDatepickerDialogDropdownFormIconInputMenuMessageMonthpickerPagePickerPopconfirmRadioStatusboxTabTableUploadValidator
Home introReadmeRelease

Align

本组件(Align)来源为Github

IMUI中会使用Align作为某些组件的定位工具,故这里提供一些官方之外的使用Demo,方便IMUI开发者参考.

Props

属性说明类型默认值
align定位相关参数,与dom-align组件的属性配置相同Object
onAlign发生align时的回调function(source:HTMLElement, align:Object)
target获取定位的目标元素function():HTMLElementfunction(){return window;}
monitorWindowResize在resize时,是否进行align重排boolfalse
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定位boolfalse
align.useCssBottom是否使用css bottom替代top定位boolfalse
align.useCssTransform当浏览器支持时,是否使用css transform替代top,left,bottom,right定位boolfalse

原始文档

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