test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-11-30 02:57:50 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/vueComponent/ant-design

Browse Source
This commit is contained in:
tangjinzhou 2017-11-09 11:28:00 +08:00
commit 1cf1cf05f1
19 changed files with 539 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/checkbox/demo/layout.vue
View File

@ -1,12 +1,12 @@
<template>
<CheckboxGroup @change="onChange">
<Row>
<Col :span="8"><Checkbox value="A">A</Checkbox></Col>
<Col :span="8"><Checkbox value="B">B</Checkbox></Col>
<Col :span="8"><Checkbox value="C">C</Checkbox></Col>
<Col :span="8"><Checkbox value="D">D</Checkbox></Col>
<Col :span="8"><Checkbox value="E">E</Checkbox></Col>
</Row>
<AntRow>
<AntCol :span="8"><Checkbox value="A">A</Checkbox></AntCol>
<AntCol :span="8"><Checkbox value="B">B</Checkbox></AntCol>
<AntCol :span="8"><Checkbox value="C">C</Checkbox></AntCol>
<AntCol :span="8"><Checkbox value="D">D</Checkbox></AntCol>
<AntCol :span="8"><Checkbox value="E">E</Checkbox></AntCol>
</AntRow>
</CheckboxGroup>
</template>
<script>
@ -19,8 +19,8 @@ export default {
},
components: {
Checkbox,
Row,
Col,
AntRow: Row,
AntCol: Col,
CheckboxGroup: Checkbox.Group,
},
}

14
components/grid/col.vue → components/grid/Col.vue
View File

@ -10,7 +10,7 @@
}
export default {
name: 'Col',
name: 'Ant-Col',
props: {
prefixCls: {
'default': 'ant-col',
@ -27,6 +27,9 @@
lg: [Number, Object],
xl: [Number, Object],
},
inject: {
parentRow: { 'default': undefined },
},
computed: {
classes () {
const { prefixCls, span, order, offset, push, pull } = this
@ -59,12 +62,8 @@
}
},
gutter () {
let parent = this.$parent
while (parent && parent.$options.name !== 'Row') {
console.info(parent.$options.name)
parent = parent.$parent
}
return parent ? parent.gutter : 0
const parent = this.parentRow
return parent ? +parent.gutter : 0
},
},
render (h) {
@ -73,7 +72,6 @@
style.paddingLeft = this.gutter / 2 + 'px'
style.paddingRight = style.paddingLeft
}
console.info(style)
// why only unnamed slots
return h('div', {
'class': this.classes,

7
components/grid/row.vue → components/grid/Row.vue
View File

@ -5,7 +5,7 @@
</template>
<script>
export default {
name: 'Row',
name: 'Ant-Row',
props: {
prefixCls: {
'default': 'ant-row',
@ -47,6 +47,11 @@
},
}
},
provide() {
return {
parentRow: this,
}
},
computed: {
classes () {
const { prefixCls, type, align, justify } = this

62
components/grid/demo/align.vue Normal file
View File

@ -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>

48
components/grid/demo/basic.vue Normal file
View File

@ -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>

34
components/grid/demo/complex.vue Normal file
View File

@ -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>

35
components/grid/demo/flex-order.vue Normal file
View File

@ -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>

68
components/grid/demo/flex.vue Normal file
View File

@ -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>

34
components/grid/demo/flexible.vue Normal file
View File

@ -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>

35
components/grid/demo/gutter.vue Normal file
View File

@ -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>

75
components/grid/demo/index.vue Normal file
View File

@ -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>

44
components/grid/demo/layout.vue Normal file
View File

@ -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>

40
components/grid/demo/offset.vue Normal file
View File

@ -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>

33
components/grid/demo/pull.vue Normal file
View File

@ -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>

5
components/grid/index.js
View File

@ -1,7 +1,6 @@
import Row from './row.vue'
import Col from './col.vue'
import Row from './Row.vue'
import Col from './Col.vue'
export default {
Col, Row,
}

4
components/index.js
View File

@ -14,6 +14,6 @@ export { default as ToolTip } from './tooltip'
export { default as Pagination } from './pagination'
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'

7
components/pagination/demo/pagination.vue
View File

@ -8,7 +8,7 @@
<vc-button @click="changeValue">改值</vc-button>
</div>
<div>
<pagination v-model="current" :total="total"></pagination>
<pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
<vc-button @click="changeValue">改值</vc-button>
<vc-button @click="getValue">当前值</vc-button>
</div>
@ -22,7 +22,7 @@ export default {
return {
simple: true,
current: 1,
total: 500,
total: 483,
}
},
methods: {
@ -32,6 +32,9 @@ export default {
getValue () {
alert(this.current)
},
showTotal (total) {
return `共 ${total} 条`
},
},
components: {
Pagination,

1
components/pagination/pagination.vue
View File

@ -52,6 +52,7 @@ export default {
type: Boolean,
default: true,
},
showTotal: Function,
},
model: {
prop: 'current',

98
examples/grid.vue
View File

@ -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>