forked from fanruan/fineui
guy
4 years ago
18 changed files with 351 additions and 201 deletions
@ -0,0 +1,91 @@
|
||||
/** |
||||
* 内联布局 |
||||
* @class BI.InlineHorizontalAdaptLayout |
||||
* @extends BI.Layout |
||||
* |
||||
* @cfg {JSON} options 配置属性 |
||||
* @cfg {Number} [hgap=0] 水平间隙 |
||||
* @cfg {Number} [vgap=0] 垂直间隙 |
||||
*/ |
||||
BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, { |
||||
|
||||
props: function () { |
||||
return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), { |
||||
baseCls: "bi-inline-horizontal-adapt-layout", |
||||
horizontalAlign: BI.HorizontalAlign.Center, |
||||
verticalAlign: BI.VerticalAlign.Top, |
||||
columnSize: [], |
||||
hgap: 0, |
||||
vgap: 0, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0 |
||||
}); |
||||
}, |
||||
|
||||
render: function () { |
||||
BI.InlineHorizontalAdaptLayout.superclass.render.apply(this, arguments); |
||||
var o = this.options; |
||||
this.element.css({ |
||||
whiteSpace: "nowrap", |
||||
textAlign: o.horizontalAlign |
||||
}); |
||||
this.populate(o.items); |
||||
}, |
||||
|
||||
_addElement: function (i, item, length) { |
||||
var o = this.options; |
||||
var w = BI.InlineHorizontalAdaptLayout.superclass._addElement.apply(this, arguments); |
||||
w.element.css({ |
||||
width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i], |
||||
position: "relative", |
||||
"vertical-align": o.verticalAlign |
||||
}); |
||||
w.element.addClass("inline-horizontal-adapt-item"); |
||||
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { |
||||
w.element.css({ |
||||
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" |
||||
}); |
||||
} |
||||
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { |
||||
w.element.css({ |
||||
"margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" |
||||
}); |
||||
} |
||||
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { |
||||
w.element.css({ |
||||
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" |
||||
}); |
||||
} |
||||
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { |
||||
w.element.css({ |
||||
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" |
||||
}); |
||||
} |
||||
return w; |
||||
}, |
||||
|
||||
resize: function () { |
||||
this.stroke(this.options.items); |
||||
}, |
||||
|
||||
addItem: function (item) { |
||||
throw new Error("不能添加元素"); |
||||
}, |
||||
|
||||
stroke: function (items) { |
||||
var self = this; |
||||
BI.each(items, function (i, item) { |
||||
if (item) { |
||||
self._addElement(i, item, items.length); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
BI.InlineHorizontalAdaptLayout.superclass.populate.apply(this, arguments); |
||||
this._mount(); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout); |
||||
@ -1,37 +0,0 @@
|
||||
.bi-flex-center-adapt-layout { |
||||
display: box; /* OLD - Android 4.4- */ |
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ |
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ |
||||
display: -ms-flexbox; /* TWEENER - IE 10 */ |
||||
display: -webkit-flex; /* NEW - Chrome */ |
||||
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ |
||||
|
||||
/* 09版 */ |
||||
-webkit-box-orient: horizontal; |
||||
/* 12版 */ |
||||
-webkit-flex-direction: row; |
||||
-moz-flex-direction: row; |
||||
-ms-flex-direction: row; |
||||
-o-flex-direction: row; |
||||
flex-direction: row; |
||||
|
||||
/* 09版 */ |
||||
-webkit-box-pack: center; |
||||
/* 12版 */ |
||||
-webkit-justify-content: center; |
||||
-moz-justify-content: center; |
||||
-ms-justify-content: center; |
||||
-o-justify-content: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
|
||||
/* 09版 */ |
||||
-webkit-box-align: center; |
||||
/* 12版 */ |
||||
-webkit-align-items: center; |
||||
-moz-align-items: center; |
||||
-ms-flex-align: center; |
||||
-ms-align-items: center; |
||||
-o-align-items: center; |
||||
align-items: center; |
||||
} |
||||
@ -1,42 +0,0 @@
|
||||
.bi-flex-scrollable-center-adapt-layout { |
||||
& .flex-scrollable-center-adapt-layout-wrapper { |
||||
display: box; /* OLD - Android 4.4- */ |
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ |
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ |
||||
display: -ms-flexbox; /* TWEENER - IE 10 */ |
||||
display: -webkit-flex; /* NEW - Chrome */ |
||||
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ |
||||
/* 09版 */ |
||||
-webkit-box-orient: horizontal; |
||||
/* 12版 */ |
||||
-webkit-flex-direction: row; |
||||
-moz-flex-direction: row; |
||||
-ms-flex-direction: row; |
||||
-o-flex-direction: row; |
||||
flex-direction: row; |
||||
|
||||
/* 09版 */ |
||||
-webkit-box-pack: center; |
||||
/* 12版 */ |
||||
-webkit-justify-content: center; |
||||
-moz-justify-content: center; |
||||
-ms-justify-content: center; |
||||
-ms-flex-pack: center; |
||||
-o-justify-content: center; |
||||
justify-content: center; |
||||
|
||||
/* 09版 */ |
||||
-webkit-box-align: center; |
||||
/* 12版 */ |
||||
-webkit-align-items: center; |
||||
-moz-align-items: center; |
||||
-ms-align-items: center; |
||||
-ms-flex-align: center; |
||||
-o-align-items: center; |
||||
align-items: center; |
||||
|
||||
min-width: 100%; |
||||
min-height: 100%; |
||||
float: left; |
||||
} |
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
.bi-inline-horizontal-adapt-layout { |
||||
&:after { |
||||
display: inline-block; |
||||
width: 0; |
||||
min-height: 100%; |
||||
vertical-align: middle; |
||||
content: ' '; |
||||
} |
||||
|
||||
& > .inline-horizontal-adapt-item { |
||||
display: inline-block; |
||||
|
||||
&.x-icon { |
||||
display: inline-block !important; |
||||
} |
||||
} |
||||
|
||||
& > .bi-combo { |
||||
&.bi-combo-popup { |
||||
display: inline-block !important; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue