blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 06:31:45 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] replace icons (#2304)

Browse Source
This commit is contained in:
neverland 2018-12-16 15:59:52 +08:00 committed by GitHub
parent f473a0eb66
commit c100b045d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 143 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/cell/demo/index.vue
View File

@ -32,7 +32,7 @@
<van-cell <van-cell
:title="$t('cell')" :title="$t('cell')"
:value="$t('content')" :value="$t('content')"
icon="location" icon="location-o"
/> />
</demo-block> </demo-block>
@ -74,7 +74,7 @@
<demo-block :title="$t('advancedUsage')"> <demo-block :title="$t('advancedUsage')">
<van-cell <van-cell
:value="$t('content')" :value="$t('content')"
icon="shop" icon="shop-o"
is-link is-link
> >
<template slot="title"> <template slot="title">
@ -84,7 +84,7 @@
</van-cell> </van-cell>
<van-cell <van-cell
:title="$t('cell')" :title="$t('cell')"
icon="location" icon="location-o"
is-link is-link
/> />
<van-cell :title="$t('cell')"> <van-cell :title="$t('cell')">

6
packages/cell/en-US.md
View File

@ -31,7 +31,7 @@ Vue.use(Cell).use(CellGroup);
```html ```html
<van-cell-group> <van-cell-group>
<van-cell title="Cell title" icon="location" /> <van-cell title="Cell title" icon="location-o" />
</van-cell-group> </van-cell-group>
``` ```
@ -66,13 +66,13 @@ Vue.use(Cell).use(CellGroup);
```html ```html
<van-cell-group> <van-cell-group>
<van-cell value="Content" icon="shop" is-link> <van-cell value="Content" icon="shop-o" is-link>
<template slot="title"> <template slot="title">
<span class="custom-text">Cell title</span> <span class="custom-text">Cell title</span>
<van-tag type="danger">Tag</van-tag> <van-tag type="danger">Tag</van-tag>
</template> </template>
</van-cell> </van-cell>
<van-cell title="Cell title" icon="location" is-link /> <van-cell title="Cell title" icon="location-o" is-link />
<van-cell title="Cell title"> <van-cell title="Cell title">
<van-icon slot="right-icon" name="search" class="custom-icon" /> <van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell> </van-cell>

6
packages/cell/test/__snapshots__/demo.spec.js.snap
View File

@ -41,7 +41,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-cell"><i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;"> <div class="van-cell"><i class="van-icon van-icon-location-o van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>
@ -109,7 +109,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;"> <div class="van-cell van-cell--clickable"><i class="van-icon van-icon-shop-o van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span></div> <div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span></div>
@ -117,7 +117,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----></i> <!----></i>
</div> </div>
<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;"> <div class="van-cell van-cell--clickable"><i class="van-icon van-icon-location-o van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<div class="van-cell__title"><span>单元格</span> <div class="van-cell__title"><span>单元格</span>

6
packages/cell/zh-CN.md
View File

@ -34,7 +34,7 @@ Vue.use(Cell).use(CellGroup);
通过`icon`属性在标题左侧展示图标 通过`icon`属性在标题左侧展示图标
```html ```html
<van-cell title="单元格" icon="location" /> <van-cell title="单元格" icon="location-o" />
``` ```
#### 只设置 value #### 只设置 value
@ -69,13 +69,13 @@ Vue.use(Cell).use(CellGroup);
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
```html ```html
<van-cell value="内容" icon="shop" is-link> <van-cell value="内容" icon="shop-o" is-link>
<template slot="title"> <template slot="title">
<span class="custom-text">单元格</span> <span class="custom-text">单元格</span>
<van-tag type="danger">标签</van-tag> <van-tag type="danger">标签</van-tag>
</template> </template>
</van-cell> </van-cell>
<van-cell title="单元格" icon="location" is-link /> <van-cell title="单元格" icon="location-o" is-link />
<van-cell title="单元格"> <van-cell title="单元格">
<van-icon slot="right-icon" name="search" class="custom-icon" /> <van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell> </van-cell>

6
packages/collapse/demo/index.vue
View File

@ -27,13 +27,13 @@
<demo-block :title="$t('titleSlot')"> <demo-block :title="$t('titleSlot')">
<van-collapse v-model="active3"> <van-collapse v-model="active3">
<van-collapse-item> <van-collapse-item>
<div slot="title">{{ $t('title1') }}<van-icon name="question" /></div> <div slot="title">{{ $t('title1') }}<van-icon name="question-o" /></div>
{{ $t('content1') }} {{ $t('content1') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item <van-collapse-item
:title="$t('title2')" :title="$t('title2')"
:value="$t('content')" :value="$t('content')"
icon="shop" icon="shop-o"
> >
{{ $t('content2') }} {{ $t('content2') }}
</van-collapse-item> </van-collapse-item>
@ -81,7 +81,7 @@ export default {
@import '../../style/var'; @import '../../style/var';
.demo-collapse { .demo-collapse {
.van-icon-question { .van-icon-question-o {
color: @blue; color: @blue;
vertical-align: -3px; vertical-align: -3px;
margin-left: 5px; margin-left: 5px;

8
packages/collapse/en-US.md
View File

@ -56,10 +56,14 @@ export default {
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
<van-collapse-item name="1"> <van-collapse-item name="1">
<div slot="title">Title1<van-icon name="question" /></div> <div slot="title">Title1<van-icon name="question-o" /></div>
Content Content
</van-collapse-item> </van-collapse-item>
<van-collapse-item title="Title2" name="2"> <van-collapse-item
title="Title2"
name="2"
icon="shop-o"
>
Content Content
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>

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

@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable van-collapse-item__title"> <div class="van-cell van-cell--clickable van-collapse-item__title">
<!----> <!---->
<div class="van-cell__title"> <div class="van-cell__title">
<div>有赞微商城<i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;"> <div>有赞微商城<i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i></div> <!----></i></div>
</div> </div>
@ -103,7 +103,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-collapse-item van-hairline--top"> <div class="van-collapse-item van-hairline--top">
<div class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;"> <div class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<div class="van-cell__title"><span>有赞零售</span> <div class="van-cell__title"><span>有赞零售</span>

8
packages/collapse/zh-CN.md
View File

@ -68,10 +68,14 @@ export default {
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
<van-collapse-item name="1"> <van-collapse-item name="1">
<div slot="title">有赞微商城<van-icon name="question" /></div> <div slot="title">有赞微商城<van-icon name="question-o" /></div>
提供多样店铺模板，快速搭建网上商城 提供多样店铺模板，快速搭建网上商城
</van-collapse-item> </van-collapse-item>
<van-collapse-item title="有赞零售" name="2"> <van-collapse-item
title="有赞零售"
name="2"
icon="shop-o"
>
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>

2
packages/contact-card/index.vue
View File

@ -4,7 +4,7 @@
:border="false" :border="false"
:class="b([type])" :class="b([type])"
:is-link="editable" :is-link="editable"
:icon="type === 'edit' ? 'contact' : 'add2'" :icon="type === 'edit' ? 'contact' : 'add-square'"
@click="onClick" @click="onClick"
> >
<template v-if="type === 'add'">{{ addText || $t('addText') }}</template> <template v-if="type === 'add'">{{ addText || $t('addText') }}</template>

2
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add"><i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;"> <div class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add"><i class="van-icon van-icon-add-square van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<!----> <!---->

2
packages/field/demo/index.vue
View File

@ -16,7 +16,7 @@
:label="$t('username')" :label="$t('username')"
:placeholder="$t('usernamePlaceholder')" :placeholder="$t('usernamePlaceholder')"
clearable clearable
icon="question" icon="question-o"
required required
@click-icon="$toast('question')" @click-icon="$toast('question')"
/> />

2
packages/field/en-US.md
View File

@ -28,7 +28,7 @@ Use `type` prop to custom diffrent type fields.
required required
clearable clearable
label="Username" label="Username"
icon="question" icon="question-o"
placeholder="Username" placeholder="Username"
@click-icon="$toast('question')" @click-icon="$toast('question')"
/> />

2
packages/field/test/__snapshots__/demo.spec.js.snap
View File

@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control"> <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!----> <!---->
<div class="van-field__icon"><i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;"> <div class="van-field__icon"><i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i></div> <!----></i></div>
<!----> <!---->

2
packages/field/zh-CN.md
View File

@ -30,7 +30,7 @@ Vue.use(Field);
required required
clearable clearable
label="用户名" label="用户名"
icon="question" icon="question-o"
placeholder="请输入用户名" placeholder="请输入用户名"
@click-icon="$toast('question')" @click-icon="$toast('question')"
/> />

10
packages/goods-action/demo/index.vue
View File

@ -3,12 +3,12 @@
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-mini-btn
icon="chat" icon="chat-o"
:text="$t('icon1')" :text="$t('icon1')"
@click="onClickMiniBtn" @click="onClickMiniBtn"
/> />
<van-goods-action-mini-btn <van-goods-action-mini-btn
icon="cart" icon="cart-o"
:text="$t('icon2')" :text="$t('icon2')"
@click="onClickMiniBtn" @click="onClickMiniBtn"
/> />
@ -27,18 +27,18 @@
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-mini-btn
icon="chat" icon="chat-o"
:text="$t('icon1')" :text="$t('icon1')"
@click="onClickMiniBtn" @click="onClickMiniBtn"
/> />
<van-goods-action-mini-btn <van-goods-action-mini-btn
icon="cart" icon="cart-o"
info="5" info="5"
:text="$t('icon2')" :text="$t('icon2')"
@click="onClickMiniBtn" @click="onClickMiniBtn"
/> />
<van-goods-action-mini-btn <van-goods-action-mini-btn
icon="shop" icon="shop-o"
:text="$t('icon3')" :text="$t('icon3')"
@click="onClickMiniBtn" @click="onClickMiniBtn"
/> />

45
packages/goods-action/en-US.md
View File

@ -19,10 +19,25 @@ Vue
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn icon="chat" text="Icon1" @click="onClickMiniBtn" /> <van-goods-action-mini-btn
<van-goods-action-mini-btn icon="cart" text="Icon2" @click="onClickMiniBtn" /> icon="chat-o"
<van-goods-action-big-btn text="Button1" @click="onClickBigBtn" /> text="Icon1"
<van-goods-action-big-btn text="Button2" @click="onClickBigBtn" primary /> @click="onClickMiniBtn"
/>
<van-goods-action-mini-btn
icon="cart-o"
text="Icon2"
@click="onClickMiniBtn"
/>
<van-goods-action-big-btn
text="Button1"
@click="onClickBigBtn"
/>
<van-goods-action-big-btn
primary
text="Button2"
@click="onClickBigBtn"
/>
</van-goods-action> </van-goods-action>
``` ```
@ -40,15 +55,29 @@ export default {
``` ```
#### Icon info #### Icon info
Use `info` prop to show messages in upper right corner of icon Use `info` prop to show messages in upper right corner of icon
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn icon="chat" text="Icon1" /> <van-goods-action-mini-btn
<van-goods-action-mini-btn icon="cart" text="Icon2" info="5" /> icon="chat-o"
<van-goods-action-mini-btn icon="shop" text="Icon3" /> text="Icon1"
/>
<van-goods-action-mini-btn
info="5"
icon="cart-o"
text="Icon2"
/>
<van-goods-action-mini-btn
icon="shop-o"
text="Icon3"
/>
<van-goods-action-big-btn text="Button1" /> <van-goods-action-big-btn text="Button1" />
<van-goods-action-big-btn text="Button2" primary /> <van-goods-action-big-btn
primary
text="Button2"
/>
</van-goods-action> </van-goods-action>
``` ```

10
packages/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -4,26 +4,26 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-goods-action"> <div class="van-goods-action">
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;"> <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> 客服</div> <!----></i> 客服</div>
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;"> <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> 购物车</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button> <!----></i> 购物车</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
</div> </div>
</div> </div>
<div> <div>
<div class="van-goods-action"> <div class="van-goods-action">
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;"> <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> 客服</div> <!----></i> 客服</div>
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;"> <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<div class="van-info"> <div class="van-info">
5 5
</div> </div>
</i> 购物车</div> </i> 购物车</div>
<div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;"> <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> 店铺</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button> <!----></i> 店铺</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
</div> </div>

44
packages/goods-action/zh-CN.md
View File

@ -19,10 +19,25 @@ Vue
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn icon="chat" text="客服" @click="onClickMiniBtn" /> <van-goods-action-mini-btn
<van-goods-action-mini-btn icon="cart" text="购物车" @click="onClickMiniBtn" /> icon="chat-o"
<van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn" /> text="客服"
<van-goods-action-big-btn text="立即购买" @click="onClickBigBtn" primary /> @click="onClickMiniBtn"
/>
<van-goods-action-mini-btn
icon="cart-o"
text="购物车"
@click="onClickMiniBtn"
/>
<van-goods-action-big-btn
text="加入购物车"
@click="onClickBigBtn"
/>
<van-goods-action-big-btn
primary
text="立即购买"
@click="onClickBigBtn"
/>
</van-goods-action> </van-goods-action>
``` ```
@ -44,11 +59,24 @@ export default {
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn icon="chat" text="客服" /> <van-goods-action-mini-btn
<van-goods-action-mini-btn icon="cart" text="购物车" info="5" /> icon="chat-o"
<van-goods-action-mini-btn icon="shop" text="店铺" /> text="客服"
/>
<van-goods-action-mini-btn
info="5"
icon="cart-o"
text="购物车"
/>
<van-goods-action-mini-btn
icon="shop-o"
text="店铺"
/>
<van-goods-action-big-btn text="加入购物车" /> <van-goods-action-big-btn text="加入购物车" />
<van-goods-action-big-btn text="立即购买" primary /> <van-goods-action-big-btn
primary
text="立即购买"
/>
</van-goods-action> </van-goods-action>
``` ```

2
packages/sku/components/SkuImgUploader.vue
View File

@ -12,7 +12,7 @@
<template v-else> <template v-else>
<icon name="photograph" /> <icon name="photograph" />
<span class="label">{{ value ? '重拍' : '拍照' }}</span> 或 <span class="label">{{ value ? '重拍' : '拍照' }}</span> 或
<icon name="photo" /> <icon name="picture" />
<span class="label">{{ value ? '重新选择照片' : '选择照片' }}</span> <span class="label">{{ value ? '重新选择照片' : '选择照片' }}</span>
</template> </template>
</div> </div>

15
packages/steps/demo/index.vue
View File

@ -11,21 +11,6 @@
<van-button @click="nextStep">{{ $t('nextStep') }}</van-button> <van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="$t('title2')">
<van-steps
:active="active"
icon="logistics"
icon-class="steps-success"
:title="$t('title')"
:description="$t('desc')"
>
<van-step>{{ $t('step1') }}</van-step>
<van-step>{{ $t('step2') }}</van-step>
<van-step>{{ $t('step3') }}</van-step>
<van-step>{{ $t('step4') }}</van-step>
</van-steps>
</demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
<van-steps <van-steps
:active="0" :active="0"

16
packages/steps/en-US.md
View File

@ -30,22 +30,6 @@ export default {
} }
``` ```
#### Description
```html
<van-steps
:active="active"
icon="logistics"
title="Title"
description="Description"
>
<van-step>Step1</van-step>
<van-step>Step2</van-step>
<van-step>Step3</van-step>
<van-step>Step4</van-step>
</van-steps>
```
#### Vertical Steps #### Vertical Steps
```html ```html

37
packages/steps/test/__snapshots__/demo.spec.js.snap
View File

@ -31,43 +31,6 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">下一步</span></button> </div> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">下一步</span></button>
</div> </div>
<div>
<div class="van-steps van-steps--horizontal">
<div class="van-steps__status">
<div class="van-steps__icon"><i class="van-icon van-icon-logistics steps-success" style="color:undefined;font-size:undefined;">
<!---->
<!----></i></div>
<div class="van-steps__message">
<div class="van-steps__title">标题</div>
<div class="van-ellipsis van-steps__desc">描述信息</div>
</div>
</div>
<div class="van-steps__items">
<div class="van-hairline van-step van-step--horizontal van-step--finish">
<div class="van-step__title">买家下单</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
<div class="van-step__title" style="color:#4b0;">商家接单</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
<!---->
<!----></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">买家提货</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">交易完成</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
</div>
</div>
</div>
<div> <div>
<div class="van-steps van-steps--vertical"> <div class="van-steps van-steps--vertical">
<!----> <!---->

18
packages/steps/zh-CN.md
View File

@ -30,24 +30,6 @@ export default {
} }
``` ```
#### 描述信息
通过`title`和`description`属性来定义描述信息信息
```html
<van-steps
:active="active"
icon="logistics"
title="标题"
description="描述信息"
>
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
```
#### 竖向步骤条 #### 竖向步骤条
可以通过设置`direction`属性来改变步骤条的显示方式 可以通过设置`direction`属性来改变步骤条的显示方式

12
packages/tabbar/demo/index.vue
View File

@ -2,21 +2,21 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="shop">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item <van-tabbar-item
icon="chat" icon="search"
dot dot
> >
{{ $t('tab') }} {{ $t('tab') }}
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item <van-tabbar-item
icon="records" icon="friends-o"
info="5" info="5"
> >
{{ $t('tab') }} {{ $t('tab') }}
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item <van-tabbar-item
icon="gold-coin" icon="setting-o"
info="20" info="20"
> >
{{ $t('tab') }} {{ $t('tab') }}
@ -34,8 +34,8 @@
:src="props.active ? icon.active : icon.normal" :src="props.active ? icon.active : icon.normal"
> >
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
</van-tabbar> </van-tabbar>
</demo-block> </demo-block>
</demo-section> </demo-section>

12
packages/tabbar/en-US.md
View File

@ -13,10 +13,10 @@ Vue.use(Tabbar).use(TabbarItem);
```html ```html
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="shop">Tab</van-tabbar-item> <van-tabbar-item icon="home-o">Tab</van-tabbar-item>
<van-tabbar-item icon="chat" dot>Tab</van-tabbar-item> <van-tabbar-item icon="search" dot>Tab</van-tabbar-item>
<van-tabbar-item icon="records" info="5">Tab</van-tabbar-item> <van-tabbar-item icon="freinds-o" info="5">Tab</van-tabbar-item>
<van-tabbar-item icon="gold-coin" info="20">Tab</van-tabbar-item> <van-tabbar-item icon="setting-o" info="20">Tab</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```
@ -43,8 +43,8 @@ Use `icon` slot to custom icon
:src="props.active ? icon.active : icon.normal" :src="props.active ? icon.active : icon.normal"
> >
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="chat">Tab</van-tabbar-item> <van-tabbar-item icon="search">Tab</van-tabbar-item>
<van-tabbar-item icon="records">Tab</van-tabbar-item> <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```

12
packages/tabbar/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-shop" style="color:undefined;font-size:undefined;"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<!----> <!---->
@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__text">标签</div> <div class="van-tabbar-item__text">标签</div>
</div> </div>
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon van-tabbar-item__icon--dot"><i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;"> <div class="van-tabbar-item__icon van-tabbar-item__icon--dot"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<!----> <!---->
@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<div class="van-info"> <div class="van-info">
@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-gold-coin" style="color:undefined;font-size:undefined;"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<div class="van-info"> <div class="van-info">
@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__text"><span>自定义</span></div> <div class="van-tabbar-item__text"><span>自定义</span></div>
</div> </div>
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<!----> <!---->
@ -67,7 +67,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__text">标签</div> <div class="van-tabbar-item__text">标签</div>
</div> </div>
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o" style="color:undefined;font-size:undefined;">
<!----> <!---->
<!----></i> <!----></i>
<!----> <!---->

12
packages/tabbar/zh-CN.md
View File

@ -14,10 +14,10 @@ Vue.use(Tabbar).use(TabbarItem);
```html ```html
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="shop">标签</van-tabbar-item> <van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="chat" dot>标签</van-tabbar-item> <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
<van-tabbar-item icon="records" info="5">标签</van-tabbar-item> <van-tabbar-item icon="freinds-o" info="5">标签</van-tabbar-item>
<van-tabbar-item icon="gold-coin" info="20">标签</van-tabbar-item> <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```
@ -45,8 +45,8 @@ export default {
:src="props.active ? icon.active : icon.normal" :src="props.active ? icon.active : icon.normal"
> >
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="chat">标签</van-tabbar-item> <van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="records">标签</van-tabbar-item> <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```