Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化布局

es6
guy 4 years ago
parent
2c0ce8b026
commit
5f55b3c3b6
6 changed files with 143 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/core/wrapper/layout/flex/flex.horizontal.js
  2. 6
      src/core/wrapper/layout/flex/flex.vertical.js
  3. 78
      src/less/core/wrapper/flex.horizontal.less
  4. 78
      src/less/core/wrapper/flex.vertical.less
  5. 30
      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
Unescape View File

@ -25,6 +25,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
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);
},

6
src/core/wrapper/layout/flex/flex.vertical.js
Unescape View File

@ -24,6 +24,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
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);
},

78
src/less/core/wrapper/flex.horizontal.less
Unescape View File

@ -63,18 +63,31 @@
flex-wrap: nowrap;
&.v-middle {
///* 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;
> .c-e {
margin-top: auto !important;
margin-bottom: auto !important;
/* 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;
&.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 {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
}
@ -103,21 +116,34 @@
}
&.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;
> .f-c {
margin-left: auto !important;
}
/* 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;
&.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 {
margin-left: auto !important;
}
> .l-c {
margin-right: auto !important;
> .l-c {
margin-right: auto !important;
}
}
}

78
src/less/core/wrapper/flex.vertical.less
Unescape View File

@ -62,18 +62,31 @@
flex-wrap: nowrap;
&.h-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;
> .c-e {
margin-left: auto !important;
margin-right: auto !important;
/* 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;
&.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 {
margin-left: auto !important;
margin-right: auto !important;
}
}
}
@ -102,21 +115,34 @@
}
&.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;
> .f-c {
margin-top: auto !important;
}
/* 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;
&.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 {
margin-top: auto !important;
}
> .l-c {
margin-bottom: auto !important;
> .l-c {
margin-bottom: auto !important;
}
}
}

30
src/less/core/wrapper/flex.wrapper.horizontal.less
Unescape View File

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

21
src/less/core/wrapper/flex.wrapper.vertical.less
Unescape View File

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

Write Preview
Loading…
Cancel
Save