alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: add guide of safe-area-inset-bottom (#4418)

Browse Source
This commit is contained in:
neverland
2019-09-10 20:07:31 +08:00
committed by GitHub
parent 4192ef198e
commit 50aa27fc64
24 changed files with 60 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/goods-action/README.md
+3 -3
View File
@@ -44,13 +44,13 @@ export default {
### Icon info
Use `info` prop to show messages in upper right corner of icon
Use `info` prop to show badge in icon
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" />
<van-goods-action-icon icon="cart-o" text="Icon2" info="5" />
<van-goods-action-icon icon="shop-o" text="Icon3" />
<van-goods-action-icon icon="shop-o" text="Icon3" info=12" />
<van-goods-action-button type="warning" text="Button1" />
<van-goods-action-button type="danger" text="Button2" />
</van-goods-action>
@@ -73,7 +73,7 @@ Use `info` prop to show messages in upper right corner of icon
| Attribute | Description | Type | Default | Version |
|------|------|------|------|------|
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | *boolean* | `false` | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - |
### GoodsActionIcon Props
src/goods-action/README.zh-CN.md
+4 -4
View File
@@ -42,15 +42,15 @@ export default {
}
```
### 图标提示
### 徽标提示
通过`info`属性在图标右上角增加相应的提示
通过`info`属性在图标右上角显示徽标
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="cart-o" text="购物车" info="5" />
<van-goods-action-icon icon="shop-o" text="店铺" />
<van-goods-action-icon icon="shop-o" text="店铺" info=12" />
<van-goods-action-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
@@ -75,7 +75,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | *boolean* | `false` | - |
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
### GoodsActionIcon Props
src/goods-action/demo/index.vue
+2 -2
View File
@@ -14,7 +14,7 @@
<van-goods-action>
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
<van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
<van-goods-action-icon icon="shop-o" :text="$t('icon3')" />
<van-goods-action-icon icon="shop-o" info="12" :text="$t('icon3')" />
<van-goods-action-button type="warning" :text="$t('button1')" />
<van-goods-action-button type="danger" :text="$t('button2')" />
</van-goods-action>
@@ -42,7 +42,7 @@ export default {
icon3: '店铺',
button1: '加入购物车',
button2: '立即购买',
title2: '图标提示',
title2: '徽标提示',
customButtonColor: '自定义按钮颜色'
},
'en-US': {
src/goods-action/test/__snapshots__/demo.spec.js.snap
+1 -1
View File
@@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
<!---->
<div class="van-info">12</div>
</div>店铺
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
</div>