blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 22:49:15 +08:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 321 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/button/test/__snapshots__/demo.spec.js.snap
View File

@ -41,11 +41,11 @@ exports[`renders demo correctly 1`] = `
<button class="van-button van-button--primary van-button--normal van-button--bottom-action"> <button class="van-button van-button--primary van-button--normal van-button--bottom-action">
<!----><span class="van-button__text">按钮</span></button> <!----><span class="van-button__text">按钮</span></button>
<div class="van-row"> <div class="van-row">
<div class="van-col van-col-12"> <div class="van-col van-col--12">
<button class="van-button van-button--default van-button--normal van-button--bottom-action"> <button class="van-button van-button--default van-button--normal van-button--bottom-action">
<!----><span class="van-button__text">按钮</span></button> <!----><span class="van-button__text">按钮</span></button>
</div> </div>
<div class="van-col van-col-12"> <div class="van-col van-col--12">
<button class="van-button van-button--primary van-button--normal van-button--bottom-action"> <button class="van-button van-button--primary van-button--normal van-button--bottom-action">
<!----><span class="van-button__text">按钮</span></button> <!----><span class="van-button__text">按钮</span></button>
</div> </div>

38
packages/col/demo/index.vue
View File

@ -24,6 +24,38 @@
<van-col span="8">span: 8</van-col> <van-col span="8">span: 8</van-col>
</van-row> </van-row>
</demo-block> </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> </demo-section>
</template> </template>
@ -31,10 +63,12 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title2: '在列元素之间增加间距' title2: '在列元素之间增加间距',
title3: 'Flex 布局'
}, },
'en-US': { 'en-US': {
title2: 'Column Spacing' title2: 'Column Spacing',
title3: 'Flex Layout'
} }
} }
}; };

46
packages/col/en-US.md
View File

@ -48,6 +48,42 @@ Set grid spacing using `gutter` attribute. The default value is 0
</van-row> </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 ### API
@ -55,11 +91,15 @@ Set grid spacing using `gutter` attribute. The default value is 0
| Attribute | Description | Type | Default | | 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 #### Column
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| span | number of column the grid spans | `String | Number` | - | | span | Number of column the grid spans | `String | Number` | - |
| offset | number of spacing on the left side of the grid | `String | Number` | - | | offset | Number of spacing on the left side of the grid | `String | Number` | - |
| tag | Custom element tag | `String` | `div` |

14
packages/col/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div <component
class="van-col" :is="tag"
:class="{ [`van-col-${span}`]: span, [`van-col-offset-${offset}`]: offset}" :class="b({ [span]: span, [`offset-${offset}`]: offset })"
:style="style" :style="style"
> >
<slot /> <slot />
</div> </component>
</template> </template>
<script> <script>
@ -16,7 +16,11 @@ export default create({
props: { props: {
span: [Number, String], span: [Number, String],
offset: [Number, String] offset: [Number, String],
tag: {
type: String,
default: 'div'
}
}, },
computed: { computed: {

45
packages/col/test/__snapshots__/demo.spec.js.snap
View File

@ -4,23 +4,50 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-row"> <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>
<div class="van-row"> <div class="van-row">
<div class="van-col van-col-4">span: 4</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 class="van-col van-col--10 van-col--offset-4">offset: 4, span: 10</div>
</div> </div>
<div class="van-row"> <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>
<div> <div>
<div class="van-row" style="margin-left:-10px;margin-right:-10px;"> <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> </div>
</div> </div>

45
packages/col/zh-CN.md
View File

@ -45,6 +45,47 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
</van-row> </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 ### API
#### Row #### Row
@ -52,6 +93,9 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | | gutter | 列元素之间的间距（单位为px） | `String | Number` | - |
| tag | 自定义元素标签 | `String` | `div` |
| justify | Flex 主轴对齐方式，可选值为 end/center/space-around/space-between | `String` | `start` |
| align | Flex 交叉轴对齐方式，可选值为 center/bottom | `String` | `top` |
#### Column #### Column
@ -59,3 +103,4 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| span | 列元素宽度 | `String | Number` | - | | span | 列元素宽度 | `String | Number` | - |
| offset | 列元素偏移距离 | `String | Number` | - | | offset | 列元素偏移距离 | `String | Number` | - |
| tag | 自定义元素标签 | `String` | `div` |

190
packages/icon/test/__snapshots__/demo.spec.js.snap
View File

@ -3,383 +3,383 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-close" style="color:undefined;"> <i class="van-icon van-icon-close" style="color:undefined;">
<!----> <!---->
</i> <span>close</span></div> </i> <span>close</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-upgrade" style="color:undefined;"> <i class="van-icon van-icon-upgrade" style="color:undefined;">
<!----> <!---->
</i> <span>upgrade</span></div> </i> <span>upgrade</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-add-o" style="color:undefined;"> <i class="van-icon van-icon-add-o" style="color:undefined;">
<!----> <!---->
</i> <span>add-o</span></div> </i> <span>add-o</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-passed" style="color:undefined;"> <i class="van-icon van-icon-passed" style="color:undefined;">
<!----> <!---->
</i> <span>passed</span></div> </i> <span>passed</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-chat" style="color:undefined;"> <i class="van-icon van-icon-chat" style="color:undefined;">
<!----> <!---->
</i> <span>chat</span></div> </i> <span>chat</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-question" style="color:undefined;"> <i class="van-icon van-icon-question" style="color:undefined;">
<!----> <!---->
</i> <span>question</span></div> </i> <span>question</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-clock" style="color:undefined;"> <i class="van-icon van-icon-clock" style="color:undefined;">
<!----> <!---->
</i> <span>clock</span></div> </i> <span>clock</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-gold-coin" style="color:undefined;"> <i class="van-icon van-icon-gold-coin" style="color:undefined;">
<!----> <!---->
</i> <span>gold-coin</span></div> </i> <span>gold-coin</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-play" style="color:undefined;"> <i class="van-icon van-icon-play" style="color:undefined;">
<!----> <!---->
</i> <span>play</span></div> </i> <span>play</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-pause" style="color:undefined;"> <i class="van-icon van-icon-pause" style="color:undefined;">
<!----> <!---->
</i> <span>pause</span></div> </i> <span>pause</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-stop" style="color:undefined;"> <i class="van-icon van-icon-stop" style="color:undefined;">
<!----> <!---->
</i> <span>stop</span></div> </i> <span>stop</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-more-o" style="color:undefined;"> <i class="van-icon van-icon-more-o" style="color:undefined;">
<!----> <!---->
</i> <span>more-o</span></div> </i> <span>more-o</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-info-o" style="color:undefined;"> <i class="van-icon van-icon-info-o" style="color:undefined;">
<!----> <!---->
</i> <span>info-o</span></div> </i> <span>info-o</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-share" style="color:undefined;"> <i class="van-icon van-icon-share" style="color:undefined;">
<!----> <!---->
</i> <span>share</span></div> </i> <span>share</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-like-o" style="color:undefined;"> <i class="van-icon van-icon-like-o" style="color:undefined;">
<!----> <!---->
</i> <span>like-o</span></div> </i> <span>like-o</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-logistics" style="color:undefined;"> <i class="van-icon van-icon-logistics" style="color:undefined;">
<!----> <!---->
</i> <span>logistics</span></div> </i> <span>logistics</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-edit" style="color:undefined;"> <i class="van-icon van-icon-edit" style="color:undefined;">
<!----> <!---->
</i> <span>edit</span></div> </i> <span>edit</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-exchange" style="color:undefined;"> <i class="van-icon van-icon-exchange" style="color:undefined;">
<!----> <!---->
</i> <span>exchange</span></div> </i> <span>exchange</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-location" style="color:undefined;"> <i class="van-icon van-icon-location" style="color:undefined;">
<!----> <!---->
</i> <span>location</span></div> </i> <span>location</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-cart" style="color:undefined;"> <i class="van-icon van-icon-cart" style="color:undefined;">
<!----> <!---->
</i> <span>cart</span></div> </i> <span>cart</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-shop" style="color:undefined;"> <i class="van-icon van-icon-shop" style="color:undefined;">
<!----> <!---->
</i> <span>shop</span></div> </i> <span>shop</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-gift" style="color:undefined;"> <i class="van-icon van-icon-gift" style="color:undefined;">
<!----> <!---->
</i> <span>gift</span></div> </i> <span>gift</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-contact" style="color:undefined;"> <i class="van-icon van-icon-contact" style="color:undefined;">
<!----> <!---->
</i> <span>contact</span></div> </i> <span>contact</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-wap-home" style="color:undefined;"> <i class="van-icon van-icon-wap-home" style="color:undefined;">
<!----> <!---->
</i> <span>wap-home</span></div> </i> <span>wap-home</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-points" style="color:undefined;"> <i class="van-icon van-icon-points" style="color:undefined;">
<!----> <!---->
</i> <span>points</span></div> </i> <span>points</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-discount" style="color:undefined;"> <i class="van-icon van-icon-discount" style="color:undefined;">
<!----> <!---->
</i> <span>discount</span></div> </i> <span>discount</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-point-gift" style="color:undefined;"> <i class="van-icon van-icon-point-gift" style="color:undefined;">
<!----> <!---->
</i> <span>point-gift</span></div> </i> <span>point-gift</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-after-sale" style="color:undefined;"> <i class="van-icon van-icon-after-sale" style="color:undefined;">
<!----> <!---->
</i> <span>after-sale</span></div> </i> <span>after-sale</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-edit-data" style="color:undefined;"> <i class="van-icon van-icon-edit-data" style="color:undefined;">
<!----> <!---->
</i> <span>edit-data</span></div> </i> <span>edit-data</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-delete" style="color:undefined;"> <i class="van-icon van-icon-delete" style="color:undefined;">
<!----> <!---->
</i> <span>delete</span></div> </i> <span>delete</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-records" style="color:undefined;"> <i class="van-icon van-icon-records" style="color:undefined;">
<!----> <!---->
</i> <span>records</span></div> </i> <span>records</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-completed" style="color:undefined;"> <i class="van-icon van-icon-completed" style="color:undefined;">
<!----> <!---->
</i> <span>completed</span></div> </i> <span>completed</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-certificate" style="color:undefined;"> <i class="van-icon van-icon-certificate" style="color:undefined;">
<!----> <!---->
</i> <span>certificate</span></div> </i> <span>certificate</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-tosend" style="color:undefined;"> <i class="van-icon van-icon-tosend" style="color:undefined;">
<!----> <!---->
</i> <span>tosend</span></div> </i> <span>tosend</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-sign" style="color:undefined;"> <i class="van-icon van-icon-sign" style="color:undefined;">
<!----> <!---->
</i> <span>sign</span></div> </i> <span>sign</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-home" style="color:undefined;"> <i class="van-icon van-icon-home" style="color:undefined;">
<!----> <!---->
</i> <span>home</span></div> </i> <span>home</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-free-postage" style="color:undefined;"> <i class="van-icon van-icon-free-postage" style="color:undefined;">
<!----> <!---->
</i> <span>free-postage</span></div> </i> <span>free-postage</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-birthday-privilege" style="color:undefined;"> <i class="van-icon van-icon-birthday-privilege" style="color:undefined;">
<!----> <!---->
</i> <span>birthday-privilege</span></div> </i> <span>birthday-privilege</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-member-day-privilege" style="color:undefined;"> <i class="van-icon van-icon-member-day-privilege" style="color:undefined;">
<!----> <!---->
</i> <span>member-day-privilege</span></div> </i> <span>member-day-privilege</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-balance-details" style="color:undefined;"> <i class="van-icon van-icon-balance-details" style="color:undefined;">
<!----> <!---->
</i> <span>balance-details</span></div> </i> <span>balance-details</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-cash-back-record" style="color:undefined;"> <i class="van-icon van-icon-cash-back-record" style="color:undefined;">
<!----> <!---->
</i> <span>cash-back-record</span></div> </i> <span>cash-back-record</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-points-mall" style="color:undefined;"> <i class="van-icon van-icon-points-mall" style="color:undefined;">
<!----> <!---->
</i> <span>points-mall</span></div> </i> <span>points-mall</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-exchange-record" style="color:undefined;"> <i class="van-icon van-icon-exchange-record" style="color:undefined;">
<!----> <!---->
</i> <span>exchange-record</span></div> </i> <span>exchange-record</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-pending-payment" style="color:undefined;"> <i class="van-icon van-icon-pending-payment" style="color:undefined;">
<!----> <!---->
</i> <span>pending-payment</span></div> </i> <span>pending-payment</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-pending-orders" style="color:undefined;"> <i class="van-icon van-icon-pending-orders" style="color:undefined;">
<!----> <!---->
</i> <span>pending-orders</span></div> </i> <span>pending-orders</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-pending-deliver" style="color:undefined;"> <i class="van-icon van-icon-pending-deliver" style="color:undefined;">
<!----> <!---->
</i> <span>pending-deliver</span></div> </i> <span>pending-deliver</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-pending-evaluate" style="color:undefined;"> <i class="van-icon van-icon-pending-evaluate" style="color:undefined;">
<!----> <!---->
</i> <span>pending-evaluate</span></div> </i> <span>pending-evaluate</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-password-view" style="color:undefined;"> <i class="van-icon van-icon-password-view" style="color:undefined;">
<!----> <!---->
</i> <span>password-view</span></div> </i> <span>password-view</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-password-not-view" style="color:undefined;"> <i class="van-icon van-icon-password-not-view" style="color:undefined;">
<!----> <!---->
</i> <span>password-not-view</span></div> </i> <span>password-not-view</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-check" style="color:undefined;"> <i class="van-icon van-icon-check" style="color:undefined;">
<!----> <!---->
</i> <span>check</span></div> </i> <span>check</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-arrow" style="color:undefined;"> <i class="van-icon van-icon-arrow" style="color:undefined;">
<!----> <!---->
</i> <span>arrow</span></div> </i> <span>arrow</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-arrow-left" style="color:undefined;"> <i class="van-icon van-icon-arrow-left" style="color:undefined;">
<!----> <!---->
</i> <span>arrow-left</span></div> </i> <span>arrow-left</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-search" style="color:undefined;"> <i class="van-icon van-icon-search" style="color:undefined;">
<!----> <!---->
</i> <span>search</span></div> </i> <span>search</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-success" style="color:undefined;"> <i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span>success</span></div> </i> <span>success</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-fail" style="color:undefined;"> <i class="van-icon van-icon-fail" style="color:undefined;">
<!----> <!---->
</i> <span>fail</span></div> </i> <span>fail</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-add" style="color:undefined;"> <i class="van-icon van-icon-add" style="color:undefined;">
<!----> <!---->
</i> <span>add</span></div> </i> <span>add</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-checked" style="color:undefined;"> <i class="van-icon van-icon-checked" style="color:undefined;">
<!----> <!---->
</i> <span>checked</span></div> </i> <span>checked</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-warn" style="color:undefined;"> <i class="van-icon van-icon-warn" style="color:undefined;">
<!----> <!---->
</i> <span>warn</span></div> </i> <span>warn</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-clear" style="color:undefined;"> <i class="van-icon van-icon-clear" style="color:undefined;">
<!----> <!---->
</i> <span>clear</span></div> </i> <span>clear</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-underway" style="color:undefined;"> <i class="van-icon van-icon-underway" style="color:undefined;">
<!----> <!---->
</i> <span>underway</span></div> </i> <span>underway</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-more" style="color:undefined;"> <i class="van-icon van-icon-more" style="color:undefined;">
<!----> <!---->
</i> <span>more</span></div> </i> <span>more</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-like" style="color:undefined;"> <i class="van-icon van-icon-like" style="color:undefined;">
<!----> <!---->
</i> <span>like</span></div> </i> <span>like</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-photograph" style="color:undefined;"> <i class="van-icon van-icon-photograph" style="color:undefined;">
<!----> <!---->
</i> <span>photograph</span></div> </i> <span>photograph</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-qr-invalid" style="color:undefined;"> <i class="van-icon van-icon-qr-invalid" style="color:undefined;">
<!----> <!---->
</i> <span>qr-invalid</span></div> </i> <span>qr-invalid</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-qr" style="color:undefined;"> <i class="van-icon van-icon-qr" style="color:undefined;">
<!----> <!---->
</i> <span>qr</span></div> </i> <span>qr</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-add2" style="color:undefined;"> <i class="van-icon van-icon-add2" style="color:undefined;">
<!----> <!---->
</i> <span>add2</span></div> </i> <span>add2</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-photo" style="color:undefined;"> <i class="van-icon van-icon-photo" style="color:undefined;">
<!----> <!---->
</i> <span>photo</span></div> </i> <span>photo</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-wechat" style="color:undefined;"> <i class="van-icon van-icon-wechat" style="color:undefined;">
<!----> <!---->
</i> <span>wechat</span></div> </i> <span>wechat</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-alipay" style="color:undefined;"> <i class="van-icon van-icon-alipay" style="color:undefined;">
<!----> <!---->
</i> <span>alipay</span></div> </i> <span>alipay</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-wap-nav" style="color:undefined;"> <i class="van-icon van-icon-wap-nav" style="color:undefined;">
<!----> <!---->
</i> <span>wap-nav</span></div> </i> <span>wap-nav</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-ecard-pay" style="color:undefined;"> <i class="van-icon van-icon-ecard-pay" style="color:undefined;">
<!----> <!---->
</i> <span>ecard-pay</span></div> </i> <span>ecard-pay</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-balance-pay" style="color:undefined;"> <i class="van-icon van-icon-balance-pay" style="color:undefined;">
<!----> <!---->
</i> <span>balance-pay</span></div> </i> <span>balance-pay</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-peer-pay" style="color:undefined;"> <i class="van-icon van-icon-peer-pay" style="color:undefined;">
<!----> <!---->
</i> <span>peer-pay</span></div> </i> <span>peer-pay</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-credit-pay" style="color:undefined;"> <i class="van-icon van-icon-credit-pay" style="color:undefined;">
<!----> <!---->
</i> <span>credit-pay</span></div> </i> <span>credit-pay</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-debit-pay" style="color:undefined;"> <i class="van-icon van-icon-debit-pay" style="color:undefined;">
<!----> <!---->
</i> <span>debit-pay</span></div> </i> <span>debit-pay</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-other-pay" style="color:undefined;"> <i class="van-icon van-icon-other-pay" style="color:undefined;">
<!----> <!---->
</i> <span>other-pay</span></div> </i> <span>other-pay</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-shopping-cart" style="color:undefined;"> <i class="van-icon van-icon-shopping-cart" style="color:undefined;">
<!----> <!---->
</i> <span>shopping-cart</span></div> </i> <span>shopping-cart</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-browsing-history" style="color:undefined;"> <i class="van-icon van-icon-browsing-history" style="color:undefined;">
<!----> <!---->
</i> <span>browsing-history</span></div> </i> <span>browsing-history</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-goods-collect" style="color:undefined;"> <i class="van-icon van-icon-goods-collect" style="color:undefined;">
<!----> <!---->
</i> <span>goods-collect</span></div> </i> <span>goods-collect</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-shop-collect" style="color:undefined;"> <i class="van-icon van-icon-shop-collect" style="color:undefined;">
<!----> <!---->
</i> <span>shop-collect</span></div> </i> <span>shop-collect</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-receive-gift" style="color:undefined;"> <i class="van-icon van-icon-receive-gift" style="color:undefined;">
<!----> <!---->
</i> <span>receive-gift</span></div> </i> <span>receive-gift</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-send-gift" style="color:undefined;"> <i class="van-icon van-icon-send-gift" style="color:undefined;">
<!----> <!---->
</i> <span>send-gift</span></div> </i> <span>send-gift</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-setting" style="color:undefined;"> <i class="van-icon van-icon-setting" style="color:undefined;">
<!----> <!---->
</i> <span>setting</span></div> </i> <span>setting</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-coupon" style="color:undefined;"> <i class="van-icon van-icon-coupon" style="color:undefined;">
<!----> <!---->
</i> <span>coupon</span></div> </i> <span>coupon</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-gift-card-pay" style="color:undefined;"> <i class="van-icon van-icon-gift-card-pay" style="color:undefined;">
<!----> <!---->
</i> <span>gift-card-pay</span></div> </i> <span>gift-card-pay</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-cash-on-deliver" style="color:undefined;"> <i class="van-icon van-icon-cash-on-deliver" style="color:undefined;">
<!----> <!---->
</i> <span>cash-on-deliver</span></div> </i> <span>cash-on-deliver</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-phone" style="color:undefined;"> <i class="van-icon van-icon-phone" style="color:undefined;">
<!----> <!---->
</i> <span>phone</span></div> </i> <span>phone</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-description" style="color:undefined;"> <i class="van-icon van-icon-description" style="color:undefined;">
<!----> <!---->
</i> <span>description</span></div> </i> <span>description</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-card" style="color:undefined;"> <i class="van-icon van-icon-card" style="color:undefined;">
<!----> <!---->
</i> <span>card</span></div> </i> <span>card</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-value-card" style="color:undefined;"> <i class="van-icon van-icon-value-card" style="color:undefined;">
<!----> <!---->
</i> <span>value-card</span></div> </i> <span>value-card</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-gift-card" style="color:undefined;"> <i class="van-icon van-icon-gift-card" style="color:undefined;">
<!----> <!---->
</i> <span>gift-card</span></div> </i> <span>gift-card</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-hot" style="color:undefined;"> <i class="van-icon van-icon-hot" style="color:undefined;">
<!----> <!---->
</i> <span>hot</span></div> </i> <span>hot</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-new" style="color:undefined;"> <i class="van-icon van-icon-new" style="color:undefined;">
<!----> <!---->
</i> <span>new</span></div> </i> <span>new</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-new-arrival" style="color:undefined;"> <i class="van-icon van-icon-new-arrival" style="color:undefined;">
<!----> <!---->
</i> <span>new-arrival</span></div> </i> <span>new-arrival</span></div>
<div class="van-col van-col-8"> <div class="van-col van-col--8">
<i class="van-icon van-icon-hot-sale" style="color:undefined;"> <i class="van-icon van-icon-hot-sale" style="color:undefined;">
<!----> <!---->
</i> <span>hot-sale</span></div> </i> <span>hot-sale</span></div>

23
packages/row/index.vue
View File

@ -1,7 +1,15 @@
<template> <template>
<div :class="b()" :style="style"> <component
:is="tag"
:class="b({
flex,
[`align-${align}`]: flex && align,
[`justify-${justify}`]: flex && justify
})"
:style="style"
>
<slot /> <slot />
</div> </component>
</template> </template>
<script> <script>
@ -11,6 +19,13 @@ export default create({
name: 'row', name: 'row',
props: { props: {
type: String,
align: String,
justify: String,
tag: {
type: String,
default: 'div'
},
gutter: { gutter: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
@ -18,6 +33,10 @@ export default create({
}, },
computed: { computed: {
flex() {
return this.type === 'flex';
},
style() { style() {
const margin = `-${Number(this.gutter) / 2}px`; const margin = `-${Number(this.gutter) / 2}px`;
return this.gutter return this.gutter

4
packages/vant-css/src/col.css
View File

@ -6,6 +6,6 @@
} }
@for $i from 1 to 24 { @for $i from 1 to 24 {
.van-col-$i { width: calc($i * 100% / 24); } .van-col--$i { width: calc($i * 100% / 24); }
.van-col-offset-$i { margin-left: calc($i * 100% / 24); } .van-col--offset-$i { margin-left: calc($i * 100% / 24); }
} }

32
packages/vant-css/src/row.css
View File

@ -6,4 +6,36 @@
display: table; display: table;
clear: both; clear: both;
} }
&--flex {
display: flex;
&::after {
display: none;
}
}
&--justify-center {
justify-content: center;
}
&--justify-end {
justify-content: flex-end;
}
&--justify-space-between {
justify-content: space-between;
}
&--justify-space-around {
justify-content: space-around;
}
&--align-center {
align-items: center;
}
&--align-bottom {
align-items: bottom;
}
} }