From 02d55fc8b1e35584d1ae40d4208bdbb30581e359 Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 28 Aug 2020 02:24:00 +0800 Subject: [PATCH] bugfix --- src/core/platform/web/config.js | 37 +++++--- src/core/wrapper/layout/adapt/adapt.center.js | 4 +- .../wrapper/layout/adapt/adapt.horizontal.js | 2 + .../wrapper/layout/adapt/adapt.vertical.js | 4 +- .../wrapper/layout/adapt/inline.center.js | 11 ++- .../wrapper/layout/adapt/inline.horizontal.js | 91 +++++++++++++++++++ .../wrapper/layout/adapt/inline.vertical.js | 7 +- src/core/wrapper/layout/flex/flex.center.js | 50 ++++++---- .../flex/wrapper/flex.wrapper.center.js | 63 ++++++------- src/less/core/wrapper/flex.center.less | 37 -------- src/less/core/wrapper/flex.horizontal.less | 36 ++++++-- src/less/core/wrapper/flex.vertical.less | 36 ++++++-- .../core/wrapper/flex.wrapper.center.less | 42 --------- .../core/wrapper/flex.wrapper.horizontal.less | 36 ++++++-- .../core/wrapper/flex.wrapper.vertical.less | 38 ++++++-- src/less/core/wrapper/inline.center.less | 18 ++-- src/less/core/wrapper/inline.horizontal.less | 23 +++++ src/less/core/wrapper/inline.vertical.less | 17 ++-- 18 files changed, 351 insertions(+), 201 deletions(-) create mode 100644 src/core/wrapper/layout/adapt/inline.horizontal.js delete mode 100644 src/less/core/wrapper/flex.center.less delete mode 100644 src/less/core/wrapper/flex.wrapper.center.less create mode 100644 src/less/core/wrapper/inline.horizontal.less diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js index a5a63fe51..a17ed19f9 100644 --- a/src/core/platform/web/config.js +++ b/src/core/platform/web/config.js @@ -18,31 +18,46 @@ BI.prepares.push(function () { if (isLessIE8) { return ob; } - if (ob.items && ob.items.length > 1) { + // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性（flex处理不了这种情况） + // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景 + if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) { return BI.extend(ob, {type: "bi.table_adapt"}); } if (!IE && supportFlex) { return BI.extend(ob, {type: "bi.flex_horizontal"}); } + // 解决使用inline_vertical_adapt的顺序问题 + // 从右往左放置时，为了兼容，我们统一采用从右到左的放置方式 + if (ob.horizontalAlign === BI.HorizontalAlign.Right) { + return BI.extend(ob, {type: "bi.inline_vertical_adapt", items: ob.items && ob.items.reverse()}); + } return BI.extend(ob, {type: "bi.table_adapt"}); }); BI.Plugin.configWidget("bi.center_adapt", function (ob) { var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1); - if (!isIE && supportFlex && justOneItem) { - return BI.extend(ob, {type: "bi.flex_center_adapt"}); + var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch; + if (!isIE && supportFlex) { + if (!isAdapt || justOneItem) { + return BI.extend(ob, {type: "bi.flex_center_adapt"}); + } } - // 一个item的情况下inline布局睥睨天下 - if (justOneItem) { + if (!isAdapt || justOneItem) { return BI.extend(ob, {type: "bi.inline_center_adapt"}); } return ob; }); BI.Plugin.configWidget("bi.vertical_adapt", function (ob) { - var isIE = BI.isIE(), supportFlex = isSupportFlex(); + var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1); + var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch; if (!isIE && supportFlex) { - return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"}); + if (!isAdapt || justOneItem) { + return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"}); + } } - return BI.extend(ob, {type: "bi.inline_vertical_adapt"}); + if (!isAdapt || justOneItem) { + return BI.extend(ob, {type: "bi.inline_vertical_adapt"}); + } + return ob; }); BI.Plugin.configWidget("bi.horizontal_adapt", function (ob) { if (ob.verticalAlign === BI.VerticalAlign.TOP && ob.items && ob.items.length <= 1) { @@ -50,11 +65,11 @@ BI.prepares.push(function () { } return ob; }); - BI.Plugin.configWidget("bi.float_center_adapt", function (ob) { + BI.Plugin.configWidget("bi.horizontal_float", function (ob) { if (!BI.isIE() && isSupportFlex()) { - return BI.extend(ob, {type: "bi.flex_center_adapt"}); + return BI.extend(ob, {type: "bi.flex_horizontal_adapt"}); } - return BI.extend(ob, {type: "bi.inline_center_adapt"}); + return BI.extend(ob, {type: "bi.inline_horizontal_adapt"}); }); BI.Plugin.configWidget("bi.flex_horizontal", function (ob) { diff --git a/src/core/wrapper/layout/adapt/adapt.center.js b/src/core/wrapper/layout/adapt/adapt.center.js index 34d161711..10a3c2166 100644 --- a/src/core/wrapper/layout/adapt/adapt.center.js +++ b/src/core/wrapper/layout/adapt/adapt.center.js @@ -27,6 +27,8 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, { horizontalAlign: o.horizontalAlign, columnSize: o.columnSize, scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable, items: o.items, ref: function (_ref) { self.layout = _ref; @@ -48,4 +50,4 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, { this.layout.populate.apply(this, arguments); } }); -BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout); \ No newline at end of file +BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout); diff --git a/src/core/wrapper/layout/adapt/adapt.horizontal.js b/src/core/wrapper/layout/adapt/adapt.horizontal.js index 91d5d0027..f4e0d136d 100644 --- a/src/core/wrapper/layout/adapt/adapt.horizontal.js +++ b/src/core/wrapper/layout/adapt/adapt.horizontal.js @@ -28,6 +28,8 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, { columnSize: o.columnSize, items: o.items, scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable, ref: function (_ref) { self.layout = _ref; }, diff --git a/src/core/wrapper/layout/adapt/adapt.vertical.js b/src/core/wrapper/layout/adapt/adapt.vertical.js index 8d3ec5837..cd9255b11 100644 --- a/src/core/wrapper/layout/adapt/adapt.vertical.js +++ b/src/core/wrapper/layout/adapt/adapt.vertical.js @@ -27,6 +27,8 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, { columnSize: o.columnSize, items: o.items, scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable, ref: function (_ref) { self.layout = _ref; }, @@ -47,4 +49,4 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, { this.layout.populate.apply(this, arguments); } }); -BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout); \ No newline at end of file +BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout); diff --git a/src/core/wrapper/layout/adapt/inline.center.js b/src/core/wrapper/layout/adapt/inline.center.js index 0ac6c5389..9e0ea3ab2 100644 --- a/src/core/wrapper/layout/adapt/inline.center.js +++ b/src/core/wrapper/layout/adapt/inline.center.js @@ -10,9 +10,11 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, { props: function () { - return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), { + return BI.extend(BI.InlineCenterAdaptLayout.superclass.props.apply(this, arguments), { baseCls: "bi-inline-center-adapt-layout", horizontalAlign: BI.HorizontalAlign.Center, + verticalAlign: BI.VerticalAlign.Middle, + columnSize: [], hgap: 0, vgap: 0, lgap: 0, @@ -23,8 +25,8 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, { }, render: function () { - var o = this.options; BI.InlineCenterAdaptLayout.superclass.render.apply(this, arguments); + var o = this.options; this.element.css({ whiteSpace: "nowrap", textAlign: o.horizontalAlign @@ -34,10 +36,11 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, { _addElement: function (i, item, length) { var o = this.options; - var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments); + var w = BI.InlineCenterAdaptLayout.superclass._addElement.apply(this, arguments); w.element.css({ + width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i], position: "relative", - "vertical-align": "middle" + "vertical-align": o.verticalAlign }); w.element.addClass("inline-center-adapt-item"); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { diff --git a/src/core/wrapper/layout/adapt/inline.horizontal.js b/src/core/wrapper/layout/adapt/inline.horizontal.js new file mode 100644 index 000000000..f079bc99a --- /dev/null +++ b/src/core/wrapper/layout/adapt/inline.horizontal.js @@ -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); diff --git a/src/core/wrapper/layout/adapt/inline.vertical.js b/src/core/wrapper/layout/adapt/inline.vertical.js index 17bb7ccab..290cc5ade 100644 --- a/src/core/wrapper/layout/adapt/inline.vertical.js +++ b/src/core/wrapper/layout/adapt/inline.vertical.js @@ -10,9 +10,11 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, { props: function () { - return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), { + return BI.extend(BI.InlineVerticalAdaptLayout.superclass.props.apply(this, arguments), { baseCls: "bi-inline-vertical-adapt-layout", horizontalAlign: BI.HorizontalAlign.Left, + verticalAlign: BI.VerticalAlign.Middle, + columnSize: [], hgap: 0, vgap: 0, lgap: 0, @@ -36,8 +38,9 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, { var o = this.options; var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments); w.element.css({ + width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i], position: "relative", - "vertical-align": "middle" + "vertical-align": o.verticalAlign }); w.element.addClass("inline-vertical-adapt-item"); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { diff --git a/src/core/wrapper/layout/flex/flex.center.js b/src/core/wrapper/layout/flex/flex.center.js index add02edbb..99859c75d 100644 --- a/src/core/wrapper/layout/flex/flex.center.js +++ b/src/core/wrapper/layout/flex/flex.center.js @@ -9,36 +9,46 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, { props: function () { return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), { baseCls: "bi-flex-center-adapt-layout", + verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: BI.HorizontalAlign.Center, hgap: 0, - vgap: 0 + vgap: 0, + lgap: 0, + rgap: 0, + tgap: 0, + bgap: 0 }); }, render: function () { - BI.FlexCenterLayout.superclass.render.apply(this, arguments); - this.populate(this.options.items); - }, - - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexCenterLayout.superclass._addElement.apply(this, arguments); - w.element.css({ - position: "relative", - "flex-shrink": "0", - "margin-left": (i === 0 ? o.hgap : 0) + "px", - "margin-right": o.hgap + "px", - "margin-top": o.vgap + "px", - "margin-bottom": o.vgap + "px" - }); - return w; + var self = this, o = this.options; + return { + type: "bi.flex_horizontal", + ref: function (_ref) { + self.wrapper = _ref; + }, + horizontalAlign: o.horizontalAlign, + verticalAlign: o.verticalAlign, + scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable, + hgap: o.hgap, + vgap: o.vgap, + tgap: o.tgap, + bgap: o.bgap, + items: o.items + }; }, resize: function () { // console.log("flex_center_adapt布局不需要resize"); }, + update: function (opt) { + return this.wrapper.update(opt); + }, + populate: function (items) { - BI.FlexCenterLayout.superclass.populate.apply(this, arguments); - this._mount(); + this.wrapper.populate(items); } }); -BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout); \ No newline at end of file +BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout); diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js index 9be30ab8f..bbe7d79c0 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js @@ -9,44 +9,45 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { props: function () { return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), { baseCls: "bi-flex-scrollable-center-adapt-layout clearfix", - scrollable: true + horizontalAlign: BI.HorizontalAlign.Center, + verticalAlign: BI.VerticalAlign.Middle, + columnSize: [], + scrollx: false, + scrollable: true, + hgap: 0, + vgap: 0, + lgap: 0, + rgap: 0, + tgap: 0, + bgap: 0 }); }, render: function () { - BI.FlexWrapperCenterLayout.superclass.render.apply(this, arguments); - this.$wrapper = BI.Widget._renderEngine.createElement("
").addClass("flex-scrollable-center-adapt-layout-wrapper"); - this.populate(this.options.items); + var self = this, o = this.options; + return { + type: "bi.flex_scrollable_horizontal", + ref: function (_ref) { + self.wrapper = _ref; + }, + horizontalAlign: o.horizontalAlign, + verticalAlign: o.verticalAlign, + scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable, + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + items: o.items + }; }, - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexWrapperCenterLayout.superclass._addElement.apply(this, arguments); - w.element.css({ - position: "relative", - "margin-left": (i === 0 ? o.hgap : 0) + "px", - "margin-right": o.hgap + "px", - "margin-top": o.vgap + "px", - "margin-bottom": o.vgap + "px" - }); - return w; - }, - - appendFragment: function (frag) { - this.$wrapper.append(frag); - this.element.append(this.$wrapper); - }, - - _getWrapper: function () { - return this.$wrapper; - }, - - resize: function () { - // console.log("flex_center_adapt布局不需要resize"); + update: function (opt) { + return this.wrapper.update(opt); }, populate: function (items) { - BI.FlexWrapperCenterLayout.superclass.populate.apply(this, arguments); - this._mount(); + this.wrapper.populate(items); } }); -BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout); \ No newline at end of file +BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout); diff --git a/src/less/core/wrapper/flex.center.less b/src/less/core/wrapper/flex.center.less deleted file mode 100644 index 4fef2365d..000000000 --- a/src/less/core/wrapper/flex.center.less +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less index 1a3af4617..ecf40ef1c 100644 --- a/src/less/core/wrapper/flex.horizontal.less +++ b/src/less/core/wrapper/flex.horizontal.less @@ -111,15 +111,33 @@ -o-flex-direction: column; flex-direction: column; - /* 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; + &.v-middle { + /* 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; + } + + &.v-bottom { + /* 09版 */ + -webkit-box-pack: flex-end; + /* 12版 */ + -webkit-justify-content: flex-end; + -moz-justify-content: flex-end; + -ms-justify-content: flex-end; + -o-justify-content: flex-end; + -ms-flex-pack: flex-end; + justify-content: flex-end; + } + + &.v-stretch { + } + /* 09版 */ -webkit-box-align: stretch; /* 12版 */ diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less index 4d1171267..01123d14b 100644 --- a/src/less/core/wrapper/flex.vertical.less +++ b/src/less/core/wrapper/flex.vertical.less @@ -111,15 +111,33 @@ -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; + &.h-center { + /* 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; + } + + &.h-right { + /* 09版 */ + -webkit-box-pack: flex-end; + /* 12版 */ + -webkit-justify-content: flex-end; + -moz-justify-content: flex-end; + -ms-justify-content: flex-end; + -ms-flex-pack: flex-end; + -o-justify-content: flex-end; + justify-content: flex-end; + } + + &.h-stretch { + } + /* 09版 */ -webkit-box-align: stretch; /* 12版 */ diff --git a/src/less/core/wrapper/flex.wrapper.center.less b/src/less/core/wrapper/flex.wrapper.center.less deleted file mode 100644 index 913acb8bf..000000000 --- a/src/less/core/wrapper/flex.wrapper.center.less +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less index 3e21f97c7..d1e1a4c19 100644 --- a/src/less/core/wrapper/flex.wrapper.horizontal.less +++ b/src/less/core/wrapper/flex.wrapper.horizontal.less @@ -110,15 +110,33 @@ -o-flex-direction: column; flex-direction: column; - /* 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; + &.v-middle { + /* 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; + } + + &.v-bottom { + /* 09版 */ + -webkit-box-pack: flex-end; + /* 12版 */ + -webkit-justify-content: flex-end; + -moz-justify-content: flex-end; + -ms-justify-content: flex-end; + -ms-flex-pack: flex-end; + -o-justify-content: flex-end; + justify-content: flex-end; + } + + &.v-stretch { + } + /* 09版 */ -webkit-box-align: stretch; /* 12版 */ diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less index 19ea3fc5a..b5db35e23 100644 --- a/src/less/core/wrapper/flex.wrapper.vertical.less +++ b/src/less/core/wrapper/flex.wrapper.vertical.less @@ -57,6 +57,7 @@ -o-align-items: center; align-items: center; } + &.h-right { /* 09版 */ -webkit-box-align: flex-end; @@ -68,6 +69,7 @@ -o-align-items: flex-end; align-items: flex-end; } + &.h-stretch { /* 09版 */ -webkit-box-align: stretch; @@ -111,15 +113,33 @@ -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; + &.h-center { + /* 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; + } + + &.h-right { + /* 09版 */ + -webkit-box-pack: flex-end; + /* 12版 */ + -webkit-justify-content: flex-end; + -moz-justify-content: flex-end; + -ms-justify-content: flex-end; + -ms-flex-pack: flex-end; + -o-justify-content: flex-end; + justify-content: flex-end; + } + + &.h-stretch { + } + /* 09版 */ -webkit-box-align: stretch; /* 12版 */ diff --git a/src/less/core/wrapper/inline.center.less b/src/less/core/wrapper/inline.center.less index 88be36620..019ab0826 100644 --- a/src/less/core/wrapper/inline.center.less +++ b/src/less/core/wrapper/inline.center.less @@ -1,13 +1,15 @@ -.bi-inline-center-adapt-layout{ - &:after{ - display:inline-block; - width:0; - min-height:100%; - vertical-align:middle; - content:' '; +.bi-inline-center-adapt-layout { + &:after { + display: inline-block; + width: 0; + min-height: 100%; + vertical-align: middle; + content: ' '; } + & > .inline-center-adapt-item { display: inline-block; + &.x-icon { display: inline-block !important; } @@ -18,4 +20,4 @@ display: inline-block !important; } } -} \ No newline at end of file +} diff --git a/src/less/core/wrapper/inline.horizontal.less b/src/less/core/wrapper/inline.horizontal.less new file mode 100644 index 000000000..fe8c1cd91 --- /dev/null +++ b/src/less/core/wrapper/inline.horizontal.less @@ -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; + } + } +} diff --git a/src/less/core/wrapper/inline.vertical.less b/src/less/core/wrapper/inline.vertical.less index 1d0185bfb..711835326 100644 --- a/src/less/core/wrapper/inline.vertical.less +++ b/src/less/core/wrapper/inline.vertical.less @@ -1,14 +1,15 @@ -.bi-inline-vertical-adapt-layout{ - &:after{ - display:inline-block; - width:0; - min-height:100%; - vertical-align:middle; - content:' '; +.bi-inline-vertical-adapt-layout { + &:after { + display: inline-block; + width: 0; + min-height: 100%; + vertical-align: middle; + content: ' '; } & > .inline-vertical-adapt-item { display: inline-block; + &.x-icon { display: inline-block !important; } @@ -19,4 +20,4 @@ display: inline-block !important; } } -} \ No newline at end of file +}