blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(NavBar): add safe-area-inset-top link (#7527)

Browse Source
This commit is contained in:
neverland 2020-11-09 21:15:07 +08:00 committed by GitHub
parent 85e1548fc5
commit 7ed8c42853
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/markdown/advanced-usage.zh-CN.md
View File

@ -104,7 +104,7 @@ import '@vant/touch-emulator';
### 底部安全区适配
iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了`safe-area-inset-bottom`属性，设置该属性后，即可在对应的机型上开启适配，如下示例：
iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行安全区适配。Vant 中部分组件提供了 `safe-area-inset-top` 或 `safe-area-inset-bottom` 属性，设置该属性后，即可在对应的机型上开启适配，如下示例：
```html
<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
@ -113,7 +113,10 @@ iPhone X 等机型底部存在底部指示条，指示条的操作区域与页
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<!-- 开启 safe-area-inset-bottom 属性 -->
<!-- 开启顶部安全区适配 -->
<van-nav-bar safe-area-inset-top />
<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />
```

2
src/nav-bar/README.zh-CN.md
View File

@ -65,7 +65,7 @@ export default {
| fixed | 是否固定在顶部 | _boolean_ | `false` |
| placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
| z-index | 导航栏 z-index | _number \| string_ | `1` |
| safe-area-inset-top `v2.10.13` | 是否开启顶部安全区适配 | _boolean_ | `false` |
| safe-area-inset-top `v2.10.13` | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
### Slots