drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add gutter to Row and Col

Browse source 
add gutter to Row and Col
This commit is contained in:
梁灏 2016-10-31 22:28:13 +08:00
parent e3a12bd330
commit d2203972af
7 changed files with 105 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/layout/col.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="classes">
<div :class="classes" :style="styles">
<slot></slot>
</div>
</template>
@ -17,6 +17,11 @@
pull: [Number, String],
className: String
},
data () {
return {
gutter: 0
}
},
computed: {
classes () {
return [
@ -30,6 +35,17 @@
[`${this.className}`]: !!this.className
}
]
},
styles () {
let style = {};
if (this.gutter !== 0) {
style = {
paddingLeft: this.gutter / 2 + 'px',
paddingRight: this.gutter / 2 + 'px'
}
}
return style;
}
}
}

34
src/components/layout/row.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="classes">
<div :class="classes" :style="styles">
<slot></slot>
</div>
</template>
@ -25,6 +25,10 @@
return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
}
},
gutter: {
type: Number,
default: 0
},
className: String
},
computed: {
@ -38,7 +42,35 @@
[`${this.className}`]: !!this.className
}
]
},
styles () {
let style = {};
if (this.gutter !== 0) {
style = {
marginLeft: this.gutter / -2 + 'px',
marginRight: this.gutter / -2 + 'px'
}
}
return style;
}
},
methods: {
updateGutter (val) {
this.$children.forEach((child) => {
if (val !== 0) {
child.gutter = val;
}
});
}
},
watch: {
gutter (val) {
this.updateGutter(val);
}
},
ready () {
this.updateGutter(this.gutter);
}
}
</script>

16
src/styles/themes/default/custom.less
View file

@ -2,12 +2,12 @@
@css-prefix : ivu-;
@css-prefix-iconfont : ivu-icon;
// Color
@primary-color : #0099e5;
@primary-color : #3399ff;
@info-color : #2db7f5;
@success-color : #5cb85c;
@success-color : #00cc66;
@warning-color : #ff9900;
@error-color : #ff5500;
@warning-color : #f0ad4e;
@link-color : #0099e5;
@link-color : #3399ff;
@link-hover-color : tint(@link-color, 20%);
@link-active-color : shade(@link-color, 5%);
@selected-color : fade(@primary-color, 90%);
@ -17,7 +17,7 @@
@body-background : #fff;
@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@code-family : Consolas,Menlo,Courier,monospace;
@text-color : #525558;
@text-color : #657180;
@font-size-base : 14px;
@font-size-small : 12px;
@line-height-base : 1.5;
@ -27,8 +27,8 @@
@cursor-disabled : not-allowed;
// Border color
@border-color-base : #d9d9d9; // outside
@border-color-split : #e9e9e9; // inside
@border-color-base : #d7dde4; // outside
@border-color-split : #e3e8ee; // inside
// Background color
@background-color-base : #f7f7f7; // base
@ -55,7 +55,7 @@
@btn-border-radius-small: 3px;
@btn-group-border : shade(@primary-color, 5%);
@btn-disable-color : #ccc;
@btn-disable-color : #c3cbd6;
@btn-disable-bg : @background-color-base;
@btn-disable-border : @border-color-base;