update: [grid] full demo supported :octocat:
wanlei
parent
f2ea0ccc0f
commit
7e6374fc3c
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<CheckboxGroup @change="onChange">
|
<CheckboxGroup @change="onChange">
|
||||||
<Row>
|
<AntRow>
|
||||||
<Col :span="8"><Checkbox value="A">A</Checkbox></Col>
|
<AntCol :span="8"><Checkbox value="A">A</Checkbox></AntCol>
|
||||||
<Col :span="8"><Checkbox value="B">B</Checkbox></Col>
|
<AntCol :span="8"><Checkbox value="B">B</Checkbox></AntCol>
|
||||||
<Col :span="8"><Checkbox value="C">C</Checkbox></Col>
|
<AntCol :span="8"><Checkbox value="C">C</Checkbox></AntCol>
|
||||||
<Col :span="8"><Checkbox value="D">D</Checkbox></Col>
|
<AntCol :span="8"><Checkbox value="D">D</Checkbox></AntCol>
|
||||||
<Col :span="8"><Checkbox value="E">E</Checkbox></Col>
|
<AntCol :span="8"><Checkbox value="E">E</Checkbox></AntCol>
|
||||||
</Row>
|
</AntRow>
|
||||||
</CheckboxGroup>
|
</CheckboxGroup>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -19,8 +19,8 @@ export default {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Row,
|
AntRow: Row,
|
||||||
Col,
|
AntCol: Col,
|
||||||
CheckboxGroup: Checkbox.Group,
|
CheckboxGroup: Checkbox.Group,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Col',
|
name: 'Ant-Col',
|
||||||
props: {
|
props: {
|
||||||
prefixCls: {
|
prefixCls: {
|
||||||
'default': 'ant-col',
|
'default': 'ant-col',
|
||||||
|
|
@ -27,6 +27,9 @@
|
||||||
lg: [Number, Object],
|
lg: [Number, Object],
|
||||||
xl: [Number, Object],
|
xl: [Number, Object],
|
||||||
},
|
},
|
||||||
|
inject: {
|
||||||
|
parentRow: { 'default': undefined },
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
classes () {
|
classes () {
|
||||||
const { prefixCls, span, order, offset, push, pull } = this
|
const { prefixCls, span, order, offset, push, pull } = this
|
||||||
|
|
@ -59,12 +62,8 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
gutter () {
|
gutter () {
|
||||||
let parent = this.$parent
|
const parent = this.parentRow
|
||||||
while (parent && parent.$options.name !== 'Row') {
|
return parent ? +parent.gutter : 0
|
||||||
console.info(parent.$options.name)
|
|
||||||
parent = parent.$parent
|
|
||||||
}
|
|
||||||
return parent ? parent.gutter : 0
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
render (h) {
|
render (h) {
|
||||||
|
|
@ -73,7 +72,6 @@
|
||||||
style.paddingLeft = this.gutter / 2 + 'px'
|
style.paddingLeft = this.gutter / 2 + 'px'
|
||||||
style.paddingRight = style.paddingLeft
|
style.paddingRight = style.paddingLeft
|
||||||
}
|
}
|
||||||
console.info(style)
|
|
||||||
// why only unnamed slots
|
// why only unnamed slots
|
||||||
return h('div', {
|
return h('div', {
|
||||||
'class': this.classes,
|
'class': this.classes,
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Row',
|
name: 'Ant-Row',
|
||||||
props: {
|
props: {
|
||||||
prefixCls: {
|
prefixCls: {
|
||||||
'default': 'ant-row',
|
'default': 'ant-row',
|
||||||
|
|
@ -47,6 +47,11 @@
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
parentRow: this,
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
classes () {
|
classes () {
|
||||||
const { prefixCls, type, align, justify } = this
|
const { prefixCls, type, align, justify } = this
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid">
|
||||||
|
<ant-row type="flex" justify="center" align="top">
|
||||||
|
<ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
|
||||||
|
</ant-row>
|
||||||
|
|
||||||
|
<p>Align Center</p>
|
||||||
|
<ant-row type="flex" justify="space-around" align="middle">
|
||||||
|
<ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
|
||||||
|
</ant-row>
|
||||||
|
|
||||||
|
<p>Align Bottom</p>
|
||||||
|
<ant-row type="flex" justify="space-between" align="bottom">
|
||||||
|
<ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
|
||||||
|
<ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Vue from 'vue'
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
const DemoBox = Vue.component('DemoBox', {
|
||||||
|
props: ['value'],
|
||||||
|
template: `<p :style="{height: value + 'px'}">{{value}}</p>`,
|
||||||
|
})
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col,
|
||||||
|
DemoBox,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.height-100 {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<div class="basic">
|
||||||
|
<ant-row>
|
||||||
|
<ant-col class="color1" :span="24" >100%</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
<ant-row>
|
||||||
|
<ant-col class="color1" :span="6" >25%</ant-col>
|
||||||
|
<ant-col class="color1" :span="6" :offset="6" >25%</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
<ant-row>
|
||||||
|
<ant-col class="color1" :span="8" >33.33%</ant-col>
|
||||||
|
<ant-col class="color1" :span="8" :offset="8" >33.33%</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
<ant-row>
|
||||||
|
<ant-col class="color1" :span="12" >50%</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
<ant-row>
|
||||||
|
<ant-col class="color1" :span="18" >66.66%</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.basic {
|
||||||
|
background: linear-gradient(90deg,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
|
||||||
|
}
|
||||||
|
.basic div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.show-block {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgba(0, 191, 255, 0.52);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid">
|
||||||
|
<ant-row>
|
||||||
|
<ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
|
||||||
|
<ant-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color2">Col</ant-col>
|
||||||
|
<ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid">
|
||||||
|
<ant-row type="flex">
|
||||||
|
<ant-col :span="6" :order="4" class="color1">1 col-order-4</ant-col>
|
||||||
|
<ant-col :span="6" :order="3" class="color2">2 col-order-3</ant-col>
|
||||||
|
<ant-col :span="6" :order="2" class="color1">3 col-order-2</ant-col>
|
||||||
|
<ant-col :span="6" :order="1" class="color2">4 col-order-1</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid">
|
||||||
|
<p>sub-element align left</p>
|
||||||
|
<ant-row type="flex" justify="start">
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
|
||||||
|
<p>sub-element align center</p>
|
||||||
|
<ant-row type="flex" justify="center">
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
|
||||||
|
<p>sub-element align right</p>
|
||||||
|
<ant-row type="flex" justify="end">
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
|
||||||
|
<p>sub-element monospaced arrangement</p>
|
||||||
|
<ant-row type="flex" justify="space-between">
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
|
||||||
|
<p>sub-element align full</p>
|
||||||
|
<ant-row type="flex" justify="space-around">
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color1">col-4</ant-col>
|
||||||
|
<ant-col :span="4" class="color2">col-4</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid">
|
||||||
|
<ant-row>
|
||||||
|
<ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
|
||||||
|
<ant-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" class="color2">Col</ant-col>
|
||||||
|
<ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid" style="overflow: hidden;">
|
||||||
|
<ant-row :gutter="24">
|
||||||
|
<ant-col :span="6"><div class="color2">col-6</div></ant-col>
|
||||||
|
<ant-col :span="6"><div class="color2">col-6</div></ant-col>
|
||||||
|
<ant-col :span="6"><div class="color2">col-6</div></ant-col>
|
||||||
|
<ant-col :span="6"><div class="color2">col-6</div></ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<template>
|
||||||
|
<div class="topLevel">
|
||||||
|
<h1>基础布局</h1>
|
||||||
|
<basic/>
|
||||||
|
<h1>恩。基础</h1>
|
||||||
|
<layout/>
|
||||||
|
<h1>区块间隔</h1>
|
||||||
|
<gutter/>
|
||||||
|
<h1>偏移</h1>
|
||||||
|
<offset/>
|
||||||
|
<h1>栅格排序</h1>
|
||||||
|
<pull/>
|
||||||
|
<h1>FLEX</h1>
|
||||||
|
<flex/>
|
||||||
|
<h1>对齐</h1>
|
||||||
|
<align/>
|
||||||
|
<h1>Flex排序</h1>
|
||||||
|
<flex-order/>
|
||||||
|
<h1>响应式设计</h1>
|
||||||
|
<flexible/>
|
||||||
|
<h1>复杂一点</h1>
|
||||||
|
<complex/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
import Basic from './basic.vue'
|
||||||
|
import Layout from './layout.vue'
|
||||||
|
import Gutter from './gutter.vue'
|
||||||
|
import Offset from './offset.vue'
|
||||||
|
import Pull from './pull.vue'
|
||||||
|
import Flex from './flex.vue'
|
||||||
|
import Align from './align.vue'
|
||||||
|
import FlexOrder from './flex-order.vue'
|
||||||
|
import Flexible from './flexible.vue'
|
||||||
|
import Complex from './complex.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col,
|
||||||
|
Basic,
|
||||||
|
Layout,
|
||||||
|
Gutter,
|
||||||
|
Offset,
|
||||||
|
Pull,
|
||||||
|
Flex,
|
||||||
|
Align,
|
||||||
|
FlexOrder,
|
||||||
|
Flexible,
|
||||||
|
Complex,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.topLevel .ant-row{
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.show-block {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: #00bfff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid">
|
||||||
|
<ant-row>
|
||||||
|
<ant-col class="color1" :span="12" >col-12</ant-col>
|
||||||
|
<ant-col class="color2" :span="12" >col-12</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
<ant-row>
|
||||||
|
<ant-col class="color1" :span="8" >col-8</ant-col>
|
||||||
|
<ant-col class="color2" :span="8" >col-8</ant-col>
|
||||||
|
<ant-col class="color1" :span="8" >col-8</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
<ant-row>
|
||||||
|
<ant-col class="color1" :span="6" >col-6</ant-col>
|
||||||
|
<ant-col class="color2" :span="6" >col-6</ant-col>
|
||||||
|
<ant-col class="color1" :span="6" >col-6</ant-col>
|
||||||
|
<ant-col class="color2" :span="6" >col-6</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid">
|
||||||
|
<ant-row>
|
||||||
|
<ant-col :span="8" class="color1">col-8</ant-col>
|
||||||
|
<ant-col :span="8" :offset="8" class="color2">col-8</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
<ant-row>
|
||||||
|
<ant-col :span="6" :offset="6" class="color1">col-6 col-offset-6</ant-col>
|
||||||
|
<ant-col :span="6" :offset="6" class="color2">col-6 col-offset-6</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
<ant-row>
|
||||||
|
<ant-col :span="12" :offset="6" class="color1">col-12 col-offset-6</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid">
|
||||||
|
<ant-row>
|
||||||
|
<ant-col :span="18" :push="6" class="color1">col-18 col-push-6</ant-col>
|
||||||
|
<ant-col :span="6" :pull="18" class="color2">col-6 col-pull-18</ant-col>
|
||||||
|
</ant-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Grid } from 'antd'
|
||||||
|
const { Row, Col } = Grid
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AntRow: Row,
|
||||||
|
AntCol: Col
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.grid div {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
background: rgb(0, 191, 255);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
background: #0e77ca;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import Row from './row.vue'
|
import Row from './Row.vue'
|
||||||
import Col from './col.vue'
|
import Col from './Col.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
Col, Row,
|
Col, Row,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,6 @@ export { default as Rate } from './rate'
|
||||||
|
|
||||||
export { default as ToolTip } from './tooltip'
|
export { default as ToolTip } from './tooltip'
|
||||||
|
|
||||||
export { default as Row } from './grid/row'
|
export { default as Row } from './grid/Row'
|
||||||
|
|
||||||
export { default as Col } from './grid/col'
|
export { default as Col } from './grid/Col'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<template>
|
||||||
|
<span>
|
||||||
|
<span class={`${prefixCls}-inner`}>
|
||||||
|
<component></component>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Radio',
|
||||||
|
props: {
|
||||||
|
prefixCls: {
|
||||||
|
default: 'ant-radio',
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
defaultChecked: Boolean,
|
||||||
|
checked: { type: Boolean, default: undefined },
|
||||||
|
disabled: Boolean,
|
||||||
|
isGroup: Boolean,
|
||||||
|
value: [String, Number, Boolean],
|
||||||
|
name: String,
|
||||||
|
onGroupChange: Function,
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'checked',
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
const { checked, defaultChecked } = this
|
||||||
|
return {
|
||||||
|
stateChecked: checked === undefined ? defaultChecked : checked,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasDefaultSlot () {
|
||||||
|
return !!this.$slots.default
|
||||||
|
},
|
||||||
|
classes () {
|
||||||
|
const { prefixCls, disabled, stateChecked } = this
|
||||||
|
return {
|
||||||
|
[`${prefixCls}-wrapper`]: true,
|
||||||
|
[`${prefixCls}-wrapper-checked`]: stateChecked,
|
||||||
|
[`${prefixCls}-wrapper-disabled`]: disabled,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
checkboxClass () {
|
||||||
|
const { prefixCls, disabled, stateChecked } = this
|
||||||
|
return {
|
||||||
|
[`${prefixCls}`]: true,
|
||||||
|
[`${prefixCls}-checked`]: stateChecked,
|
||||||
|
[`${prefixCls}-disabled`]: disabled,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange (event) {
|
||||||
|
const targetChecked = event.target.checked
|
||||||
|
const { name, value, checked } = this
|
||||||
|
if (checked === undefined) {
|
||||||
|
this.stateChecked = targetChecked
|
||||||
|
}
|
||||||
|
this.$emit('input', targetChecked)
|
||||||
|
const target = {
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
checked: targetChecked,
|
||||||
|
}
|
||||||
|
this.$emit('change', {
|
||||||
|
target,
|
||||||
|
stopPropagation () {
|
||||||
|
event.stopPropagation()
|
||||||
|
},
|
||||||
|
preventDefault () {
|
||||||
|
event.preventDefault()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
if (this.isGroup) {
|
||||||
|
this.onGroupChange({ target })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
checked (val) {
|
||||||
|
this.stateChecked = val
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import Switch from './Switch.vue'
|
||||||
|
export default Switch
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import '../../style/index.less'
|
||||||
|
import './index.less'
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
@import "../../style/themes/default";
|
||||||
|
@import "../../style/mixins/index";
|
||||||
|
|
||||||
|
@switch-prefix-cls: ~"@{ant-prefix}-switch";
|
||||||
|
@switch-duration: .36s;
|
||||||
|
|
||||||
|
.@{switch-prefix-cls} {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 22px;
|
||||||
|
min-width: 44px;
|
||||||
|
line-height: 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-color: @disabled-color;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all @switch-duration;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
color: #fff;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
margin-left: 24px;
|
||||||
|
margin-right: 6px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
left: 1px;
|
||||||
|
top: 1px;
|
||||||
|
|
||||||
|
border-radius: 18px;
|
||||||
|
background-color: @component-background;
|
||||||
|
content: " ";
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all @switch-duration @ease-in-out-circ;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:after {
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-small {
|
||||||
|
height: 14px;
|
||||||
|
min-width: 28px;
|
||||||
|
line-height: 12px;
|
||||||
|
|
||||||
|
.@{switch-prefix-cls}-inner {
|
||||||
|
margin-left: 18px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
top: 0;
|
||||||
|
left: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:after {
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-small&-checked {
|
||||||
|
&:after {
|
||||||
|
left: 100%;
|
||||||
|
margin-left: -12.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{switch-prefix-cls}-inner {
|
||||||
|
margin-left: 3px;
|
||||||
|
margin-right: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-small:active&-checked:after {
|
||||||
|
margin-left: -16.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-checked {
|
||||||
|
background-color: @primary-color;
|
||||||
|
|
||||||
|
.@{switch-prefix-cls}-inner {
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
left: 100%;
|
||||||
|
margin-left: -19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:after {
|
||||||
|
margin-left: -25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
background: #f4f4f4;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
background: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{switch-prefix-cls}-inner {
|
||||||
|
color: @disabled-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="grid">
|
|
||||||
<div class="show-block">
|
|
||||||
<ant-row gutter="10">
|
|
||||||
<ant-col :style="style1" :span="6">
|
|
||||||
<div :style="style2">1</div>
|
|
||||||
</ant-col>
|
|
||||||
<ant-col :style="style1" :span="6">
|
|
||||||
<div :style="style2">2</div>
|
|
||||||
</ant-col>
|
|
||||||
<ant-col :style="style1" :span="6">
|
|
||||||
<div :style="style2">3</div>
|
|
||||||
</ant-col>
|
|
||||||
<ant-col :style="style1" :span="6">
|
|
||||||
<div :style="style2">4</div>
|
|
||||||
</ant-col>
|
|
||||||
</ant-row>
|
|
||||||
</div>
|
|
||||||
<div class="show-block">
|
|
||||||
<ant-row gutter="10">
|
|
||||||
<ant-col :style="style1" :span="6" :offset="2">
|
|
||||||
<div :style="style2">offset = 2</div>
|
|
||||||
</ant-col>
|
|
||||||
<ant-col :style="style1" :span="6" :offset="2">
|
|
||||||
<div :style="style2">offset = 2</div>
|
|
||||||
</ant-col>
|
|
||||||
</ant-row>
|
|
||||||
</div>
|
|
||||||
<div class="show-block">
|
|
||||||
<ant-row gutter="10" type="flex">
|
|
||||||
<ant-col class="height1 color1" :span="6">
|
|
||||||
<div class="">F</div>
|
|
||||||
</ant-col>
|
|
||||||
<ant-col class="height2 color2" :span="6">
|
|
||||||
<div class="">L</div>
|
|
||||||
</ant-col>
|
|
||||||
<ant-col class="height3 color1" :span="6">
|
|
||||||
<div class="">E</div>
|
|
||||||
</ant-col>
|
|
||||||
<ant-col class="height4 color2" :span="6">
|
|
||||||
<div class="">X</div>
|
|
||||||
</ant-col>
|
|
||||||
</ant-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Grid } from '../components'
|
|
||||||
const { Row, Col } = Grid
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
style1: { height: 40 + 'px' },
|
|
||||||
style2: { background: '#00bfff', height: 40 + 'px' }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick (event) {
|
|
||||||
console.log(event)
|
|
||||||
this.type = this.type === 'primary' ? 'danger' : 'primary'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
AntRow: Row,
|
|
||||||
AntCol: Col
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
.grid div {
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
.show-block {
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
.height1 {
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
.height2 {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
.height3 {
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
.height4 {
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
.color1 {
|
|
||||||
background: #00bfff;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.color2 {
|
|
||||||
background: #0e77ca;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue