Browse Source

优化布局

es6
guy 4 years ago
parent
commit
5f55b3c3b6
  1. 6
      src/core/wrapper/layout/flex/flex.horizontal.js
  2. 6
      src/core/wrapper/layout/flex/flex.vertical.js
  3. 62
      src/less/core/wrapper/flex.horizontal.less
  4. 62
      src/less/core/wrapper/flex.vertical.less
  5. 28
      src/less/core/wrapper/flex.wrapper.horizontal.less
  6. 21
      src/less/core/wrapper/flex.wrapper.vertical.less

6
src/core/wrapper/layout/flex/flex.horizontal.js

@ -25,6 +25,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments); BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options; var o = this.options;
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
if (o.scrollable === true || o.scrollx === true) {
this.element.addClass("f-scroll-x");
}
if (o.scrollable === true || o.scrolly === true) {
this.element.addClass("f-scroll-y");
}
this.populate(this.options.items); this.populate(this.options.items);
}, },

6
src/core/wrapper/layout/flex/flex.vertical.js

@ -24,6 +24,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments); BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options; var o = this.options;
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
if (o.scrollable === true || o.scrollx === true) {
this.element.addClass("f-scroll-x");
}
if (o.scrollable === true || o.scrolly === true) {
this.element.addClass("f-scroll-y");
}
this.populate(this.options.items); this.populate(this.options.items);
}, },

62
src/less/core/wrapper/flex.horizontal.less

@ -63,20 +63,33 @@
flex-wrap: nowrap; flex-wrap: nowrap;
&.v-middle { &.v-middle {
///* 09版 */ /* 09版 */
//-webkit-box-align: center; -webkit-box-align: center;
///* 12版 */ /* 12版 */
//-webkit-align-items: center; -webkit-align-items: center;
//-moz-align-items: center; -moz-align-items: center;
//-ms-align-items: center; -ms-align-items: center;
//-ms-flex-align: center; -ms-flex-align: center;
//-o-align-items: center; -o-align-items: center;
//align-items: center; align-items: center;
&.f-scroll-x {
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
> .c-e { > .c-e {
margin-top: auto !important; margin-top: auto !important;
margin-bottom: auto !important; margin-bottom: auto !important;
} }
} }
}
&.v-bottom { &.v-bottom {
/* 09版 */ /* 09版 */
@ -103,15 +116,27 @@
} }
&.h-center { &.h-center {
///* 09版 */ /* 09版 */
//-webkit-box-pack: center; -webkit-box-pack: center;
///* 12版 */ /* 12版 */
//-webkit-justify-content: center; -webkit-justify-content: center;
//-moz-justify-content: center; -moz-justify-content: center;
//-ms-justify-content: center; -ms-justify-content: center;
//-ms-flex-pack: center; -ms-flex-pack: center;
//-o-justify-content: center; -o-justify-content: center;
//justify-content: center; justify-content: center;
&.f-scroll-x {
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
> .f-c { > .f-c {
margin-left: auto !important; margin-left: auto !important;
} }
@ -120,6 +145,7 @@
margin-right: auto !important; margin-right: auto !important;
} }
} }
}
&.h-right { &.h-right {
/* 09版 */ /* 09版 */

62
src/less/core/wrapper/flex.vertical.less

@ -62,20 +62,33 @@
flex-wrap: nowrap; flex-wrap: nowrap;
&.h-center { &.h-center {
///* 09版 */ /* 09版 */
//-webkit-box-align: center; -webkit-box-align: center;
///* 12版 */ /* 12版 */
//-webkit-align-items: center; -webkit-align-items: center;
//-moz-align-items: center; -moz-align-items: center;
//-ms-align-items: center; -ms-align-items: center;
//-ms-flex-align: center; -ms-flex-align: center;
//-o-align-items: center; -o-align-items: center;
//align-items: center; align-items: center;
&.f-scroll-x {
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
> .c-e { > .c-e {
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
} }
} }
}
&.h-right { &.h-right {
/* 09版 */ /* 09版 */
@ -102,15 +115,27 @@
} }
&.v-middle { &.v-middle {
///* 09版 */ /* 09版 */
//-webkit-box-pack: center; -webkit-box-pack: center;
///* 12版 */ /* 12版 */
//-webkit-justify-content: center; -webkit-justify-content: center;
//-moz-justify-content: center; -moz-justify-content: center;
//-ms-justify-content: center; -ms-justify-content: center;
//-ms-flex-pack: center; -ms-flex-pack: center;
//-o-justify-content: center; -o-justify-content: center;
//justify-content: center; justify-content: center;
&.f-scroll-y {
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
> .f-c { > .f-c {
margin-top: auto !important; margin-top: auto !important;
} }
@ -119,6 +144,7 @@
margin-bottom: auto !important; margin-bottom: auto !important;
} }
} }
}
&.v-bottom { &.v-bottom {
/* 09版 */ /* 09版 */

28
src/less/core/wrapper/flex.wrapper.horizontal.less

@ -115,14 +115,15 @@
//-ms-flex-align: center; //-ms-flex-align: center;
//-o-align-items: center; //-o-align-items: center;
//align-items: center; //align-items: center;
> .c-e {
margin-top: auto !important;
margin-bottom: auto !important;
}
&.h-center { //> .c-e {
min-width: 100%; // margin-top: auto !important;
} // margin-bottom: auto !important;
//}
//
//&.h-center {
// min-width: 100%;
//}
} }
&.v-bottom { &.v-bottom {
@ -163,13 +164,14 @@
//-ms-flex-pack: center; //-ms-flex-pack: center;
//-o-justify-content: center; //-o-justify-content: center;
//justify-content: center; //justify-content: center;
> .f-c {
margin-left: auto !important;
}
> .l-c { //> .f-c {
margin-right: auto !important; // margin-left: auto !important;
} //}
//
//> .l-c {
// margin-right: auto !important;
//}
} }
&.h-right { &.h-right {

21
src/less/core/wrapper/flex.wrapper.vertical.less

@ -128,10 +128,10 @@
//-o-align-items: center; //-o-align-items: center;
//align-items: center; //align-items: center;
> .c-e { //> .c-e {
margin-left: auto !important; // margin-left: auto !important;
margin-right: auto !important; // margin-right: auto !important;
} //}
} }
&.h-right { &.h-right {
@ -172,13 +172,14 @@
//-o-justify-content: center; //-o-justify-content: center;
//-ms-flex-pack: center; //-ms-flex-pack: center;
//justify-content: center; //justify-content: center;
> .f-c {
margin-top: auto !important;
}
> .l-c { //> .f-c {
margin-bottom: auto !important; // margin-top: auto !important;
} //}
//
//> .l-c {
// margin-bottom: auto !important;
//}
} }
&.v-bottom { &.v-bottom {

Loading…
Cancel
Save