mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Layout: optimize doc && code review
This commit is contained in:
陈嘉涵
parent
bafe9142ea
commit
d76db3d74a
@ -1,93 +1,75 @@
|
||||
<style>
|
||||
.demo-layout {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.white {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
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>
|
||||
|
||||
## Layout 布局
|
||||
|
||||
提供了`van-row`和`van-col`两个组件来进行行列布局。
|
||||
提供了`van-row`和`van-col`两个组件来进行行列布局
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Layout } from 'vant';
|
||||
import { Row, Col } from 'vant';
|
||||
|
||||
Vue.component(Layout.name, Layout);
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Col.name, Col);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 常规用法
|
||||
#### 基本用法
|
||||
|
||||
Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
|
||||
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
|
||||
|
||||
:::demo 常规用法
|
||||
:::demo 基本用法
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<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">
|
||||
<div class="gray">span: 4</div>
|
||||
</van-col>
|
||||
<van-col span="10" offset="4">
|
||||
<div class="gray">offset: 4, span: 10</div>
|
||||
</van-col>
|
||||
<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">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</van-col>
|
||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 在列元素之间增加间距
|
||||
#### 设置列元素间距
|
||||
|
||||
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
|
||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
||||
|
||||
:::demo 在列元素之间增加间距
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
@ -98,9 +80,11 @@ Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | |
|
||||
| prefix | className 前缀 | `String` | `van` | |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | |
|
||||
| offset | 列元素偏移宽度 | `String | Number` | - | |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | |
|
||||
| prefix | className 前缀 | `String` | `van` | |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## Vant
|
||||
|
||||
一套基于`Vue.js 2.0`的 Mobile 组件库
|
||||
基于`Vue 2.0`的 Mobile 组件库
|
||||
|
||||
### 安装
|
||||
|
||||
@ -47,11 +47,11 @@ Vue.use(vant);
|
||||
|
||||
### 自定义主题
|
||||
|
||||
`Vant`默认提供一套主题，`CSS`命名采用`BEM`的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
|
||||
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
|
||||
|
||||
#### 下载主题
|
||||
|
||||
可以通过Github或npm来下载主题：
|
||||
可以通过 Github 或 npm 来下载主题：
|
||||
|
||||
```bash
|
||||
# npm
|
||||
|
||||
@ -40,7 +40,7 @@ module.exports = {
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Vant组件",
|
||||
"name": "组件列表",
|
||||
"showInMobile": true,
|
||||
"groups": [
|
||||
{
|
||||
|
||||
@ -116,6 +116,6 @@
|
||||
"webpack": "^3.5.5",
|
||||
"webpack-dev-server": "^2.7.1",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"zan-doc": "0.2.0"
|
||||
"zan-doc": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,27 +13,28 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-col',
|
||||
props: {
|
||||
span: [Number, String],
|
||||
offset: [Number, String],
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'van'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
gutter() {
|
||||
if (!this.$parent) return 0;
|
||||
return Number(this.$parent.gutter) || 0;
|
||||
},
|
||||
style() {
|
||||
const padding = `${this.gutter / 2}px`;
|
||||
return this.gutter
|
||||
? { paddingLeft: padding, paddingRight: padding }
|
||||
: null;
|
||||
}
|
||||
export default {
|
||||
name: 'van-col',
|
||||
|
||||
props: {
|
||||
span: [Number, String],
|
||||
offset: [Number, String],
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'van'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
gutter() {
|
||||
return (this.$parent && Number(this.$parent.gutter)) || 0;
|
||||
},
|
||||
style() {
|
||||
const padding = `${this.gutter / 2}px`;
|
||||
return this.gutter
|
||||
? { paddingLeft: padding, paddingRight: padding }
|
||||
: null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,32 +1,31 @@
|
||||
<template>
|
||||
<div
|
||||
:class="`${prefix}-row`"
|
||||
:style="style">
|
||||
<div :class="`${prefix}-row`" :style="style">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-row',
|
||||
props: {
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'van'
|
||||
},
|
||||
gutter: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
export default {
|
||||
name: 'van-row',
|
||||
|
||||
props: {
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'van'
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const gutter = Number(this.gutter);
|
||||
const margin = `-${gutter / 2}px`;
|
||||
return gutter
|
||||
? { marginLeft: margin, marginRight: margin }
|
||||
: {};
|
||||
}
|
||||
gutter: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
const margin = `-${Number(this.gutter) / 2}px`;
|
||||
return this.gutter
|
||||
? { marginLeft: margin, marginRight: margin }
|
||||
: null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
10
yarn.lock
10
yarn.lock
@ -4809,7 +4809,7 @@ markdown-it@^6.0.5:
|
||||
mdurl "~1.0.1"
|
||||
uc.micro "^1.0.1"
|
||||
|
||||
markdown-it@^8.3.1, markdown-it@^8.3.2:
|
||||
markdown-it@^8.3.2:
|
||||
version "8.3.2"
|
||||
resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.2.tgz#df4b86530d17c3bc9beec3b68d770b92ea17ae96"
|
||||
dependencies:
|
||||
@ -7926,13 +7926,13 @@ yeast@0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||
|
||||
zan-doc@0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.0.tgz#40b31c4f1cc5ae539853a06b30f1cb479e2edca3"
|
||||
zan-doc@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.1.tgz#34723ea180d0ac2e183b66d2a3e4a04b4f6fe91b"
|
||||
dependencies:
|
||||
cheerio "0.22.0"
|
||||
decamelize "^1.2.0"
|
||||
markdown-it "^8.3.1"
|
||||
markdown-it "^8.3.2"
|
||||
markdown-it-container "^2.0.0"
|
||||
node-watch "^0.5.5"
|
||||
nprogress "^0.2.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user