vant/docs/demos/views/layout.vue
neverland d8b6ad7d54
[new feature] add i18n support (#310)
* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n
2017-11-15 20:08:51 -06:00

65 lines
1.3 KiB
Vue

<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
</demo-block>
<demo-block :title="$t('title2')">
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
title2: '在列元素之间增加间距'
},
'en-US': {
title2: 'Column Spacing'
}
}
}
</script>
<style lang="postcss">
.demo-layout {
.van-row {
padding: 0 15px;
}
.van-col {
color: #fff;
font-size: 13px;
line-height: 30px;
text-align: center;
margin-bottom: 10px;
background-clip: content-box;
&:nth-child(odd) {
background-color: #39a9ed;
}
&:nth-child(even) {
background-color: #66c6f2;
}
}
}
</style>