add gutter to Row and Col
add gutter to Row and Col
This commit is contained in:
梁灏
parent
e3a12bd330
commit
d2203972af
7 changed files with 105 additions and 26 deletions
2
dist/styles/iview.all.css
vendored
2
dist/styles/iview.all.css
vendored
File diff suppressed because one or more lines are too long
2
dist/styles/iview.css
vendored
2
dist/styles/iview.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,54 @@
|
|||
<style>
|
||||
.example-demo .ivu-col div{
|
||||
color: #fff;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background: rgba(0, 153, 229, .9);
|
||||
}
|
||||
.example-demo .ivu-col:nth-child(odd) div{
|
||||
background: rgba(0, 153, 229, .7);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<Card :bordered="true" style="width:300px">
|
||||
<template slot="title">
|
||||
<p>放寒假的发货会计师</p>
|
||||
</template>
|
||||
<a href="#" slot="extra">More</a>
|
||||
</Card>
|
||||
<Card style="width:300px">
|
||||
<p>hello</p>
|
||||
<p>hndshf</p>
|
||||
<h3>jfds</h3>
|
||||
</Card>
|
||||
<div class="example-demo">
|
||||
<Row :gutter="16">
|
||||
<i-col span="6">
|
||||
<div>1 | order-4</div>
|
||||
</i-col>
|
||||
<i-col span="6">
|
||||
<div>1 | order-4</div>
|
||||
</i-col>
|
||||
<i-col span="6">
|
||||
<div>1 | order-4</div>
|
||||
</i-col>
|
||||
<i-col span="6">
|
||||
<div>1 | order-4</div>
|
||||
</i-col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<i-col span="6">
|
||||
<div>1 | order-4</div>
|
||||
</i-col>
|
||||
<i-col span="6">
|
||||
<div>1 | order-4</div>
|
||||
</i-col>
|
||||
<i-col span="6">
|
||||
<div>1 | order-4</div>
|
||||
</i-col>
|
||||
<i-col span="6">
|
||||
<div>1 | order-4</div>
|
||||
</i-col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Row, Col, Card } from 'iview';
|
||||
import { Row, iCol, Card } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Row,
|
||||
iCol: Col,
|
||||
iCol,
|
||||
Card
|
||||
},
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<Timeline pending>
|
||||
<Timeline-item color="red">发布3.0版本</Timeline-item>
|
||||
<Timeline-item color="green">
|
||||
<Icon type="time" slot="dot"></Icon>
|
||||
<Icon type="cloak" slot="dot"></Icon>
|
||||
发布2.0版本
|
||||
</Timeline-item>
|
||||
<Timeline-item color="#ff6600">发布1.0版本</Timeline-item>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue