Row component forces the use of flex layout, and add prop wrap. Col add flex prop
This commit is contained in:
梁灏
parent
27adf364c0
commit
8d9ba2b089
5 changed files with 274 additions and 219 deletions
|
|
@ -7,6 +7,18 @@
|
|||
import { findComponentUpward } from '../../utils/assist';
|
||||
const prefixCls = 'ivu-col';
|
||||
|
||||
function parseFlex(flex) {
|
||||
if (typeof flex === 'number') {
|
||||
return `${flex} ${flex} auto`;
|
||||
}
|
||||
|
||||
if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
|
||||
return `0 0 ${flex}`;
|
||||
}
|
||||
|
||||
return flex;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'iCol',
|
||||
props: {
|
||||
|
|
@ -21,7 +33,12 @@
|
|||
md: [Number, Object],
|
||||
lg: [Number, Object],
|
||||
xl: [Number, Object],
|
||||
xxl: [Number, Object]
|
||||
xxl: [Number, Object],
|
||||
// 4.5.0
|
||||
flex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -68,6 +85,11 @@
|
|||
};
|
||||
}
|
||||
|
||||
// 4.5.0
|
||||
if (this.flex) {
|
||||
style.flex = parseFlex(this.flex);
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
export default {
|
||||
name: 'Row',
|
||||
props: {
|
||||
// todo 4.5.0 已无效，强制 flex
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['flex']);
|
||||
|
|
@ -30,17 +31,26 @@
|
|||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
className: String
|
||||
className: String,
|
||||
// 4.5.0
|
||||
wrap: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
// todo 4.5.0 已无效，强制 flex
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}`]: !this.type,
|
||||
[`${prefixCls}-${this.type}`]: !!this.type,
|
||||
[`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
|
||||
[`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
|
||||
[`${this.className}`]: !!this.className
|
||||
[`${prefixCls}-${this.align}`]: !!this.align,
|
||||
[`${prefixCls}-${this.justify}`]: !!this.justify,
|
||||
[`${this.className}`]: !!this.className,
|
||||
[`${prefixCls}-no-wrap`]: !this.wrap
|
||||
}
|
||||
];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,54 +1,56 @@
|
|||
.@{row-prefix-cls} {
|
||||
.make-row();
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
&-flex {
|
||||
&::before,
|
||||
&::after {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: flex;
|
||||
}
|
||||
// x轴原点
|
||||
&-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
// x轴居中
|
||||
&-center {
|
||||
justify-content: center;
|
||||
}
|
||||
// x轴反方向
|
||||
&-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
// x轴平分
|
||||
&-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
// x轴有间隔地平分
|
||||
&-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
// 顶部对齐
|
||||
&-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
// 居中对齐
|
||||
&-middle {
|
||||
align-items: center;
|
||||
}
|
||||
// 底部对齐
|
||||
&-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
};
|
||||
// No wrap of flex
|
||||
&-no-wrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
// x轴原点
|
||||
&-start{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
// x轴居中
|
||||
&-center{
|
||||
justify-content: center;
|
||||
}
|
||||
//x轴反方向
|
||||
&-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
// x轴平分
|
||||
&-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
// x轴有间隔地平分
|
||||
&-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
// 顶部对齐
|
||||
&-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
// 居中对齐
|
||||
&-middle {
|
||||
align-items: center;
|
||||
}
|
||||
// 底部对齐
|
||||
&-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.@{col-prefix-cls} {
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.make-grid();
|
||||
|
|
|
|||
|
|
@ -1,36 +1,13 @@
|
|||
@row-prefix-cls: ~"@{css-prefix}row";
|
||||
@col-prefix-cls: ~"@{css-prefix}col";
|
||||
|
||||
.make-row(@gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
height: auto;
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
.float-grid-columns(@class) {
|
||||
.col(@index) { // initial
|
||||
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
float: left;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
}
|
||||
// mixins for grid system
|
||||
|
||||
.loop-grid-columns(@index, @class) when (@index > 0) {
|
||||
.@{col-prefix-cls}-span@{class}-@{index} {
|
||||
display: block;
|
||||
width: percentage((@index / @grid-columns));
|
||||
flex: 0 0 percentage((@index / @grid-columns));
|
||||
max-width: percentage((@index / @grid-columns));
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-push-@{index} {
|
||||
left: percentage((@index / @grid-columns));
|
||||
|
|
@ -51,6 +28,12 @@
|
|||
.@{col-prefix-cls}-span@{class}-@{index} {
|
||||
display: none;
|
||||
}
|
||||
.@{col-prefix-cls}-push-@{index} {
|
||||
left: auto;
|
||||
}
|
||||
.@{col-prefix-cls}-pull-@{index} {
|
||||
right: auto;
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-push-@{index} {
|
||||
left: auto;
|
||||
}
|
||||
|
|
@ -66,6 +49,5 @@
|
|||
}
|
||||
|
||||
.make-grid(@class: ~'') {
|
||||
.float-grid-columns(@class);
|
||||
.loop-grid-columns(@grid-columns, @class);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue