mirror of
https://github.com/youzan/vant.git
synced 2026-04-26 01:01:51 +08:00
[improvement] replace icons (#2304)
This commit is contained in:
neverland
@@ -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>
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user