mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 22:49:15 +08:00
[Improvement] Layout: support flex (#1305)
This commit is contained in:
neverland
GitHub
parent
6e25b9823a
commit
c368e36aea
@ -41,11 +41,11 @@ exports[`renders demo correctly 1`] = `
|
||||
<button class="van-button van-button--primary van-button--normal van-button--bottom-action">
|
||||
<!----><span class="van-button__text">按钮</span></button>
|
||||
<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">
|
||||
<!----><span class="van-button__text">按钮</span></button>
|
||||
</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">
|
||||
<!----><span class="van-button__text">按钮</span></button>
|
||||
</div>
|
||||
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -3,383 +3,383 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <span>hot-sale</span></div>
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div :class="b()" :style="style">
|
||||
<component
|
||||
:is="tag"
|
||||
:class="b({
|
||||
flex,
|
||||
[`align-${align}`]: flex && align,
|
||||
[`justify-${justify}`]: flex && justify
|
||||
})"
|
||||
:style="style"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -11,6 +19,13 @@ export default create({
|
||||
name: 'row',
|
||||
|
||||
props: {
|
||||
type: String,
|
||||
align: String,
|
||||
justify: String,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
gutter: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
@ -18,6 +33,10 @@ export default create({
|
||||
},
|
||||
|
||||
computed: {
|
||||
flex() {
|
||||
return this.type === 'flex';
|
||||
},
|
||||
|
||||
style() {
|
||||
const margin = `-${Number(this.gutter) / 2}px`;
|
||||
return this.gutter
|
||||
|
||||
@ -6,6 +6,6 @@
|
||||
}
|
||||
|
||||
@for $i from 1 to 24 {
|
||||
.van-col-$i { width: calc($i * 100% / 24); }
|
||||
.van-col-offset-$i { margin-left: calc($i * 100% / 24); }
|
||||
.van-col--$i { width: calc($i * 100% / 24); }
|
||||
.van-col--offset-$i { margin-left: calc($i * 100% / 24); }
|
||||
}
|
||||
|
||||
@ -6,4 +6,36 @@
|
||||
display: table;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user