alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[Improvement] Layout: support flex (#1305)

Browse Source
This commit is contained in:
neverland
2018-06-19 22:54:02 +08:00
committed by GitHub
parent 6e25b9823a
commit c368e36aea
10 changed files with 321 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/col/demo/index.vue
+36 -2
View File
@@ -24,6 +24,38 @@
<van-col span="8">span: 8</van-col>
</van-row>
</demo-block>
<demo-block :title="$t('title3')">
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
</demo-block>
</demo-section>
</template>
@@ -31,10 +63,12 @@
export default {
i18n: {
'zh-CN': {
title2: '在列元素之间增加间距'
title2: '在列元素之间增加间距',
title3: 'Flex 布局'
},
'en-US': {
title2: 'Column Spacing'
title2: 'Column Spacing',
title3: 'Flex Layout'
}
}
};
packages/col/en-US.md
+43 -3
View File
@@ -48,6 +48,42 @@ Set grid spacing using `gutter` attribute. The default value is 0
</van-row>
```
#### Flex Layout
Setting `type` to `flex` to enable flex layout
```html
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
```
### API
@@ -55,11 +91,15 @@ Set grid spacing using `gutter` attribute. The default value is 0
| Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------|
| gutter | grid spacing（px） | `String | Number` | - |
| gutter | Grid spacing（px） | `String | Number` | - |
| tag | Custom element tag | `String` | `div` |
| justify | Flex main axis，can be set to end/center/space-around/space-between | `String` | `start` |
| align | Flex cross axis, be set to center/bottom | `String` | `top` |
#### Column
| Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------|
| span | number of column the grid spans | `String | Number` | - |
| offset | number of spacing on the left side of the grid | `String | Number` | - |
| span | Number of column the grid spans | `String | Number` | - |
| offset | Number of spacing on the left side of the grid | `String | Number` | - |
| tag | Custom element tag | `String` | `div` |
packages/col/index.vue
+9 -5
View File
@@ -1,11 +1,11 @@
<template>
<div
class="van-col"
:class="{ [`van-col-${span}`]: span, [`van-col-offset-${offset}`]: offset}"
<component
:is="tag"
:class="b({ [span]: span, [`offset-${offset}`]: offset })"
:style="style"
>
<slot />
</div>
</component>
</template>
<script>
@@ -16,7 +16,11 @@ export default create({
props: {
span: [Number, String],
offset: [Number, String]
offset: [Number, String],
tag: {
type: String,
default: 'div'
}
},
computed: {
packages/col/test/__snapshots__/demo.spec.js.snap
+36 -9
View File
@@ -4,23 +4,50 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-row">
<div class="van-col van-col-8">span: 8</div>
<div class="van-col van-col-8">span: 8</div>
<div class="van-col van-col-8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
</div>
<div class="van-row">
<div class="van-col van-col-4">span: 4</div>
<div class="van-col van-col-10 van-col-offset-4">offset: 4, span: 10</div>
<div class="van-col van-col--4">span: 4</div>
<div class="van-col van-col--10 van-col--offset-4">offset: 4, span: 10</div>
</div>
<div class="van-row">
<div class="van-col van-col-12 van-col-offset-12">offset: 12, span: 12</div>
<div class="van-col van-col--12 van-col--offset-12">offset: 12, span: 12</div>
</div>
</div>
<div>
<div class="van-row" style="margin-left:-10px;margin-right:-10px;">
<div class="van-col van-col-8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col-8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col-8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
</div>
</div>
<div>
<div class="van-row van-row--flex">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-center">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-end">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-space-between">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-space-around">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
</div>
</div>
packages/col/zh-CN.md
+45
View File
@@ -45,6 +45,47 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
</van-row>
```
#### Flex 布局
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐
```html
<!-- 左对齐 -->
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 居中 -->
<van-row type="flex" justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 右对齐 -->
<van-row type="flex" justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 两端对齐 -->
<van-row type="flex" justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 每个元素的两侧间隔相等 -->
<van-row type="flex" justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
```
### API
#### Row
@@ -52,6 +93,9 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - |
| tag | 自定义元素标签 | `String` | `div` |
| justify | Flex 主轴对齐方式，可选值为 end/center/space-around/space-between | `String` | `start` |
| align | Flex 交叉轴对齐方式，可选值为 center/bottom | `String` | `top` |
#### Column
@@ -59,3 +103,4 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|-----------|-----------|-----------|-------------|
| span | 列元素宽度 | `String | Number` | - |
| offset | 列元素偏移距离 | `String | Number` | - |
| tag | 自定义元素标签 | `String` | `div` |