mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 06:31:45 +08:00
[improvement] replace icons (#2304)
This commit is contained in:
neverland
GitHub
parent
f473a0eb66
commit
c100b045d1
@ -32,7 +32,7 @@
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
icon="location"
|
||||
icon="location-o"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-cell
|
||||
:value="$t('content')"
|
||||
icon="shop"
|
||||
icon="shop-o"
|
||||
is-link
|
||||
>
|
||||
<template slot="title">
|
||||
@ -84,7 +84,7 @@
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
icon="location"
|
||||
icon="location-o"
|
||||
is-link
|
||||
/>
|
||||
<van-cell :title="$t('cell')">
|
||||
|
||||
@ -31,7 +31,7 @@ Vue.use(Cell).use(CellGroup);
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" icon="location" />
|
||||
<van-cell title="Cell title" icon="location-o" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
@ -66,13 +66,13 @@ Vue.use(Cell).use(CellGroup);
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="Content" icon="shop" is-link>
|
||||
<van-cell value="Content" icon="shop-o" is-link>
|
||||
<template slot="title">
|
||||
<span class="custom-text">Cell title</span>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
</template>
|
||||
</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-icon slot="right-icon" name="search" class="custom-icon" />
|
||||
</van-cell>
|
||||
|
||||
@ -41,7 +41,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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>
|
||||
<div class="van-cell__title"><span>单元格</span>
|
||||
@ -109,7 +109,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<div class="van-cell__title"><span>单元格</span>
|
||||
|
||||
@ -34,7 +34,7 @@ Vue.use(Cell).use(CellGroup);
|
||||
通过`icon`属性在标题左侧展示图标
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" icon="location" />
|
||||
<van-cell title="单元格" icon="location-o" />
|
||||
```
|
||||
|
||||
#### 只设置 value
|
||||
@ -69,13 +69,13 @@ Vue.use(Cell).use(CellGroup);
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
|
||||
|
||||
```html
|
||||
<van-cell value="内容" icon="shop" is-link>
|
||||
<van-cell value="内容" icon="shop-o" is-link>
|
||||
<template slot="title">
|
||||
<span class="custom-text">单元格</span>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="单元格" icon="location" is-link />
|
||||
<van-cell title="单元格" icon="location-o" is-link />
|
||||
<van-cell title="单元格">
|
||||
<van-icon slot="right-icon" name="search" class="custom-icon" />
|
||||
</van-cell>
|
||||
|
||||
@ -27,13 +27,13 @@
|
||||
<demo-block :title="$t('titleSlot')">
|
||||
<van-collapse v-model="active3">
|
||||
<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') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item
|
||||
:title="$t('title2')"
|
||||
:value="$t('content')"
|
||||
icon="shop"
|
||||
icon="shop-o"
|
||||
>
|
||||
{{ $t('content2') }}
|
||||
</van-collapse-item>
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-collapse {
|
||||
.van-icon-question {
|
||||
.van-icon-question-o {
|
||||
color: @blue;
|
||||
vertical-align: -3px;
|
||||
margin-left: 5px;
|
||||
|
||||
@ -56,10 +56,14 @@ export default {
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<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
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">
|
||||
<van-collapse-item
|
||||
title="Title2"
|
||||
name="2"
|
||||
icon="shop-o"
|
||||
>
|
||||
Content
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
|
||||
@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__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>
|
||||
</div>
|
||||
@ -103,7 +103,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<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>
|
||||
<div class="van-cell__title"><span>有赞零售</span>
|
||||
|
||||
@ -68,10 +68,14 @@ export default {
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<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 title="有赞零售" name="2">
|
||||
<van-collapse-item
|
||||
title="有赞零售"
|
||||
name="2"
|
||||
icon="shop-o"
|
||||
>
|
||||
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
:border="false"
|
||||
:class="b([type])"
|
||||
:is-link="editable"
|
||||
:icon="type === 'edit' ? 'contact' : 'add2'"
|
||||
:icon="type === 'edit' ? 'contact' : 'add-square'"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="type === 'add'">{{ addText || $t('addText') }}</template>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<!---->
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
:label="$t('username')"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
clearable
|
||||
icon="question"
|
||||
icon="question-o"
|
||||
required
|
||||
@click-icon="$toast('question')"
|
||||
/>
|
||||
|
||||
@ -28,7 +28,7 @@ Use `type` prop to custom diffrent type fields.
|
||||
required
|
||||
clearable
|
||||
label="Username"
|
||||
icon="question"
|
||||
icon="question-o"
|
||||
placeholder="Username"
|
||||
@click-icon="$toast('question')"
|
||||
/>
|
||||
|
||||
@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__value">
|
||||
<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>
|
||||
<!---->
|
||||
|
||||
@ -30,7 +30,7 @@ Vue.use(Field);
|
||||
required
|
||||
clearable
|
||||
label="用户名"
|
||||
icon="question"
|
||||
icon="question-o"
|
||||
placeholder="请输入用户名"
|
||||
@click-icon="$toast('question')"
|
||||
/>
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn
|
||||
icon="chat"
|
||||
icon="chat-o"
|
||||
:text="$t('icon1')"
|
||||
@click="onClickMiniBtn"
|
||||
/>
|
||||
<van-goods-action-mini-btn
|
||||
icon="cart"
|
||||
icon="cart-o"
|
||||
:text="$t('icon2')"
|
||||
@click="onClickMiniBtn"
|
||||
/>
|
||||
@ -27,18 +27,18 @@
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn
|
||||
icon="chat"
|
||||
icon="chat-o"
|
||||
:text="$t('icon1')"
|
||||
@click="onClickMiniBtn"
|
||||
/>
|
||||
<van-goods-action-mini-btn
|
||||
icon="cart"
|
||||
icon="cart-o"
|
||||
info="5"
|
||||
:text="$t('icon2')"
|
||||
@click="onClickMiniBtn"
|
||||
/>
|
||||
<van-goods-action-mini-btn
|
||||
icon="shop"
|
||||
icon="shop-o"
|
||||
:text="$t('icon3')"
|
||||
@click="onClickMiniBtn"
|
||||
/>
|
||||
|
||||
@ -19,10 +19,25 @@ Vue
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" text="Icon1" @click="onClickMiniBtn" />
|
||||
<van-goods-action-mini-btn icon="cart" text="Icon2" @click="onClickMiniBtn" />
|
||||
<van-goods-action-big-btn text="Button1" @click="onClickBigBtn" />
|
||||
<van-goods-action-big-btn text="Button2" @click="onClickBigBtn" primary />
|
||||
<van-goods-action-mini-btn
|
||||
icon="chat-o"
|
||||
text="Icon1"
|
||||
@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>
|
||||
```
|
||||
|
||||
@ -40,15 +55,29 @@ export default {
|
||||
```
|
||||
|
||||
#### Icon info
|
||||
|
||||
Use `info` prop to show messages in upper right corner of icon
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" text="Icon1" />
|
||||
<van-goods-action-mini-btn icon="cart" text="Icon2" info="5" />
|
||||
<van-goods-action-mini-btn icon="shop" text="Icon3" />
|
||||
<van-goods-action-mini-btn
|
||||
icon="chat-o"
|
||||
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="Button2" primary />
|
||||
<van-goods-action-big-btn
|
||||
primary
|
||||
text="Button2"
|
||||
/>
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
|
||||
@ -4,26 +4,26 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<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">
|
||||
5
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@ -19,10 +19,25 @@ Vue
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" text="客服" @click="onClickMiniBtn" />
|
||||
<van-goods-action-mini-btn icon="cart" text="购物车" @click="onClickMiniBtn" />
|
||||
<van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn" />
|
||||
<van-goods-action-big-btn text="立即购买" @click="onClickBigBtn" primary />
|
||||
<van-goods-action-mini-btn
|
||||
icon="chat-o"
|
||||
text="客服"
|
||||
@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>
|
||||
```
|
||||
|
||||
@ -44,11 +59,24 @@ export default {
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" text="客服" />
|
||||
<van-goods-action-mini-btn icon="cart" text="购物车" info="5" />
|
||||
<van-goods-action-mini-btn icon="shop" text="店铺" />
|
||||
<van-goods-action-mini-btn
|
||||
icon="chat-o"
|
||||
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="立即购买" primary />
|
||||
<van-goods-action-big-btn
|
||||
primary
|
||||
text="立即购买"
|
||||
/>
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<template v-else>
|
||||
<icon name="photograph" />
|
||||
<span class="label">{{ value ? '重拍' : '拍照' }}</span> 或
|
||||
<icon name="photo" />
|
||||
<icon name="picture" />
|
||||
<span class="label">{{ value ? '重新选择照片' : '选择照片' }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -11,21 +11,6 @@
|
||||
<van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
|
||||
</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')">
|
||||
<van-steps
|
||||
:active="0"
|
||||
|
||||
@ -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
|
||||
|
||||
```html
|
||||
|
||||
@ -31,43 +31,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">下一步</span></button>
|
||||
</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 class="van-steps van-steps--vertical">
|
||||
<!---->
|
||||
|
||||
@ -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`属性来改变步骤条的显示方式
|
||||
|
||||
|
||||
@ -2,21 +2,21 @@
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<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
|
||||
icon="chat"
|
||||
icon="search"
|
||||
dot
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
icon="records"
|
||||
icon="friends-o"
|
||||
info="5"
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
icon="gold-coin"
|
||||
icon="setting-o"
|
||||
info="20"
|
||||
>
|
||||
{{ $t('tab') }}
|
||||
@ -34,8 +34,8 @@
|
||||
:src="props.active ? icon.active : icon.normal"
|
||||
>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
|
||||
@ -13,10 +13,10 @@ Vue.use(Tabbar).use(TabbarItem);
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat" dot>Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="records" info="5">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="gold-coin" info="20">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="home-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="search" dot>Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="freinds-o" info="5">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o" info="20">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
@ -43,8 +43,8 @@ Use `icon` slot to custom icon
|
||||
:src="props.active ? icon.active : icon.normal"
|
||||
>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<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__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>
|
||||
<!---->
|
||||
@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<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>
|
||||
<!---->
|
||||
@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="van-info">
|
||||
@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="van-info">
|
||||
@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabbar-item__text"><span>自定义</span></div>
|
||||
</div>
|
||||
<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>
|
||||
<!---->
|
||||
@ -67,7 +67,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
</div>
|
||||
<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>
|
||||
<!---->
|
||||
|
||||
@ -14,10 +14,10 @@ Vue.use(Tabbar).use(TabbarItem);
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="records" info="5">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="gold-coin" info="20">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="freinds-o" info="5">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
@ -45,8 +45,8 @@ export default {
|
||||
:src="props.active ? icon.active : icon.normal"
|
||||
>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user