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/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` |