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/action-sheet/README.md
+1 -1
View File
@@ -106,7 +106,7 @@ export default {
| lock-scroll | Whether to lock background scroll | *boolean* | `true` | - |
| duration | Transition duration, unit second | *number* | `0.3` | 2.0.3 |
| get-container | Return the mount node for action-sheet | *string \| () => HTMLElement* | - | - |
| 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` | - |
### Events
src/action-sheet/README.zh-CN.md
+2 -2
View File
@@ -120,7 +120,7 @@ export default {
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - |
| duration | 动画时长，单位秒 | *number* | `0.3` | 2.0.3 |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
| 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` | - |
### Events
@@ -136,7 +136,7 @@ export default {
### Action 数据结构
`Props`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
`actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
| 键名 | 说明 | 类型 |
|------|------|------|
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>
src/number-keyboard/README.md
+1 -1
View File
@@ -108,7 +108,7 @@ export default {
| delete-button-text | Delete button text | *string* | `delete` | - |
| show-delete-key | Whether to show delete button | *boolean* | `true` | - |
| hide-on-click-outside | Whether to hide keyboard when click outside | *boolean* | `true` | - |
| 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` | - |
### Events
src/number-keyboard/README.zh-CN.md
+1 -1
View File
@@ -114,7 +114,7 @@ export default {
| delete-button-text | 删除按钮文字 | *string* | `删除` | - |
| show-delete-key | 是否展示删除按钮 | *boolean* | `true` | - |
| hide-on-click-outside | 点击外部时是否收起键盘 | *boolean* | `true` | - |
| 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` | - |
### Events
src/number-keyboard/demo/index.vue
-37
View File
@@ -1,31 +1,13 @@
<template>
<demo-section>
<demo-block :title="$t('default')">
<van-button
type="primary"
@touchstart.stop="keyboard = 'default'"
>
{{ $t('button1') }}
</van-button>
<van-number-keyboard
:show="keyboard === 'default'"
:close-button-text="$t('close')"
extra-key="."
safe-area-inset-bottom
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
</demo-block>
<demo-block :title="$t('custom')">
<van-button
type="info"
@touchstart.stop="keyboard = 'custom'"
>
{{ $t('button2') }}
</van-button>
<van-number-keyboard
:show="keyboard === 'custom'"
@@ -37,25 +19,6 @@
@input="onInput"
@delete="onDelete"
/>
</demo-block>
<demo-block :title="$t('bindValue')">
<van-field
readonly
clickable
:value="value"
:placeholder="$t('clickToInput')"
@touchstart.native.stop="keyboard = 'bindValue'"
/>
<van-number-keyboard
v-model="value"
:show="keyboard === 'bindValue'"
maxlength="6"
safe-area-inset-bottom
@blur="keyboard = ''"
/>
</demo-block>
</demo-section>
</template>
src/number-keyboard/test/__snapshots__/demo.spec.js.snap
+6 -24
View File
@@ -2,31 +2,13 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出默认键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
弹出自定义键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key">.</i>
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
</div>
</div>
</div>
<div>
<div class="van-cell van-cell--clickable van-field">
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="text" placeholder="点此输入" readonly="readonly" class="van-field__control"></div>
</div>
</div>
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key">.</i>
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
</div>
</div>
</div>
src/search/README.md
+3 -5
View File
@@ -27,11 +27,7 @@ export default {
### Listen to Events
`search` event will be triggered when click the search button on the keyboard.
`cancel` event will be triggered when click the cancel button.
Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
`search` event will be triggered when click the search button on the keyboard, `cancel` event will be triggered when click the cancel button.
```html
<form action="/">
@@ -45,6 +41,8 @@ Tips: There will be a search button on the keyboard when Search is inside a form
</form>
```
> Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
### Custom Button
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
src/search/README.zh-CN.md
+4 -4
View File
@@ -13,7 +13,7 @@ Vue.use(Search);
### 基础用法
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
```html
<van-search placeholder="请输入搜索关键词" v-model="value" />
@@ -21,9 +21,7 @@ Vue.use(Search);
### 事件监听
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘上的搜索/回车按钮后触发，`cancel`事件在点击搜索框右侧取消按钮时触发
```html
<form action="/">
@@ -37,6 +35,8 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
</form>
```
> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
### 自定义按钮
`van-search` 支持自定义右侧取消按钮，使用名字为 action 的插槽即可。使用此插槽以后，原有的 cancel 事件不再生效。
src/submit-bar/README.md
+1 -1
View File
@@ -83,7 +83,7 @@ Use slot to add custom contents.
| loading | Whether to show loading icon | *boolean* | `false` | - |
| currency | Currency symbol | *string* | `¥` | - |
| decimal-length | number of digits to appear after the decimal point | *number* | `2` | - |
| 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` | - |
### Events
src/submit-bar/README.zh-CN.md
+1 -1
View File
@@ -83,7 +83,7 @@ Vue.use(SubmitBar);
| loading | 是否显示加载中的按钮 | *boolean* | `false` | - |
| currency | 货币符号 | *string* | `¥` | - |
| decimal-length | 价格小数点后位数 | *number* | `2` | - |
| 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` | - |
### Events
src/tabbar/README.md
+1 -1
View File
@@ -148,7 +148,7 @@ export default {
| active-color | Color of active tab item | *string* | `#1989fa` | - |
| inactive-color | Color of inactive tab item | *string* | `#7d7e80` | - |
| route | Whether to enable route mode | *boolean* | `false` | - |
| 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` | - |
### Tabbar Events
src/tabbar/README.zh-CN.md
+1 -1
View File
@@ -154,7 +154,7 @@ export default {
| active-color | 选中标签的颜色 | *string* | `#1989fa` | - |
| inactive-color | 未选中标签的颜色 | *string* | `#7d7e80` | - |
| route | 是否开启路由模式 | *boolean* | `false` | - |
| 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` | - |
### Tabbar Events