From 50aa27fc646300e7fba000c731754c99ff0082a9 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 10 Sep 2019 20:07:31 +0800 Subject: [PATCH] docs: add guide of safe-area-inset-bottom (#4418) --- docs/markdown/quickstart.en-US.md | 2 + docs/markdown/quickstart.zh-CN.md | 18 ++++++++- docs/site/components/DemoPages.vue | 4 +- package.json | 2 +- packages/vant-doc/package.json | 2 +- packages/vant-doc/src/component/Content.vue | 3 +- packages/vant-doc/src/component/Header.vue | 2 +- src/action-sheet/README.md | 2 +- src/action-sheet/README.zh-CN.md | 4 +- src/goods-action/README.md | 6 +-- src/goods-action/README.zh-CN.md | 8 ++-- src/goods-action/demo/index.vue | 4 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- src/number-keyboard/README.md | 2 +- src/number-keyboard/README.zh-CN.md | 2 +- src/number-keyboard/demo/index.vue | 37 ------------------- .../test/__snapshots__/demo.spec.js.snap | 30 +++------------ src/search/README.md | 8 ++-- src/search/README.zh-CN.md | 8 ++-- src/submit-bar/README.md | 2 +- src/submit-bar/README.zh-CN.md | 2 +- src/tabbar/README.md | 2 +- src/tabbar/README.zh-CN.md | 2 +- yarn.lock | 8 ++-- 24 files changed, 60 insertions(+), 102 deletions(-) diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md index c5bcc4c62..a6bc206d5 100644 --- a/docs/markdown/quickstart.en-US.md +++ b/docs/markdown/quickstart.en-US.md @@ -122,6 +122,8 @@ Vant use `px` as size units by default，you can use tools such as `postcss-pxto - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) - [lib-flexible](https://github.com/amfe/lib-flexible) +#### PostCSS Config + postcss config example: ```js diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md index 0d146bde0..e3d1d7d99 100644 --- a/docs/markdown/quickstart.zh-CN.md +++ b/docs/markdown/quickstart.zh-CN.md @@ -122,11 +122,13 @@ vant.Toast('提示'); ### Rem 适配 -Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具 +Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具： - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件，用于将单位转化为 rem - [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值 +#### PostCSS 配置 + 下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改 ```js @@ -145,6 +147,20 @@ module.exports = { > 注意：在配置 postcss-loader 时，应避免 ignore node_modules 目录，这会导致 Vant 的样式无法被编译 +### 底部安全区适配 + +iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了`safe-area-inset-bottom`属性，设置该属性后，即可在对应的机型上开启适配，如下示例： + +```html + + + + + +``` + + + ### 在桌面端使用 Vant 组件默认只适配了移动端设备，如果你需要在桌面端使用 vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator). diff --git a/docs/site/components/DemoPages.vue b/docs/site/components/DemoPages.vue index 0a05930cb..218de7a87 100644 --- a/docs/site/components/DemoPages.vue +++ b/docs/site/components/DemoPages.vue @@ -109,9 +109,7 @@ export default { } h4 { - font-weight: normal; - font-size: 14px; - line-height: 20px; + margin-top: 0; } img { diff --git a/package.json b/package.json index bf365ac1d..faa253410 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "@babel/preset-typescript": "^7.6.0", "@types/jest": "^24.0.16", "@vant/cli": "^1.0.6", - "@vant/doc": "^2.5.6", + "@vant/doc": "^2.5.7", "@vant/eslint-config": "^1.2.5", "@vant/markdown-loader": "^2.2.0", "@vant/markdown-vetur": "^1.0.0", diff --git a/packages/vant-doc/package.json b/packages/vant-doc/package.json index d3b11042e..b937c4060 100644 --- a/packages/vant-doc/package.json +++ b/packages/vant-doc/package.json @@ -1,6 +1,6 @@ { "name": "@vant/doc", - "version": "2.5.6", + "version": "2.5.7", "description": "vant document template", "main": "./lib/index.js", "publishConfig": { diff --git a/packages/vant-doc/src/component/Content.vue b/packages/vant-doc/src/component/Content.vue index 8cc96ab01..23210f931 100644 --- a/packages/vant-doc/src/component/Content.vue +++ b/packages/vant-doc/src/component/Content.vue @@ -210,14 +210,13 @@ export default { } h3 { - font-size: 20px; - + p code { margin: 0; } a { color: inherit; + font-size: 20px; } } } diff --git a/packages/vant-doc/src/component/Header.vue b/packages/vant-doc/src/component/Header.vue index 5a5073cd5..cd2f108e9 100644 --- a/packages/vant-doc/src/component/Header.vue +++ b/packages/vant-doc/src/component/Header.vue @@ -203,7 +203,7 @@ export default { } img { - width: 26px; + width: 24px; margin-right: 10px; } diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index 3e182394a..c81e039a8 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -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 diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index 5883108f3..5ede23096 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -120,7 +120,7 @@ export default { | lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - | | duration | 动画时长，单位秒 | *number* | `0.3` | 2.0.3 | | get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *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`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值： | 键名 | 说明 | 类型 | |------|------|------| diff --git a/src/goods-action/README.md b/src/goods-action/README.md index 7d86272d9..2db111d60 100644 --- a/src/goods-action/README.md +++ b/src/goods-action/README.md @@ -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 - + @@ -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 diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md index 9098309c3..c24b57ffe 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/goods-action/README.zh-CN.md @@ -42,15 +42,15 @@ export default { } ``` -### 图标提示 +### 徽标提示 -通过`info`属性在图标右上角增加相应的提示 +通过`info`属性在图标右上角显示徽标 ```html - + @@ -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 diff --git a/src/goods-action/demo/index.vue b/src/goods-action/demo/index.vue index 16faedc8f..2fe00b579 100644 --- a/src/goods-action/demo/index.vue +++ b/src/goods-action/demo/index.vue @@ -14,7 +14,7 @@ - + @@ -42,7 +42,7 @@ export default { icon3: '店铺', button1: '加入购物车', button2: '立即购买', - title2: '图标提示', + title2: '徽标提示', customButtonColor: '自定义按钮颜色' }, 'en-US': { diff --git a/src/goods-action/test/__snapshots__/demo.spec.js.snap b/src/goods-action/test/__snapshots__/demo.spec.js.snap index 92b7adf09..7e1ee1706 100644 --- a/src/goods-action/test/__snapshots__/demo.spec.js.snap +++ b/src/goods-action/test/__snapshots__/demo.spec.js.snap @@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
- +
12
店铺
diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index afdf84c0c..c0443d62d 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -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 diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 8afb0904f..7c8382103 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -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 diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue index e61700961..51e8dac5c 100644 --- a/src/number-keyboard/demo/index.vue +++ b/src/number-keyboard/demo/index.vue @@ -1,31 +1,13 @@ diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap index 0588e6866..49e29c55b 100644 --- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap +++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap @@ -2,31 +2,13 @@ exports[`renders demo correctly 1`] = `
-
-
-
完成
-
123456789.0删除
-
+
+
完成
+
123456789.0删除
-
- -
-
-
-
-
-
-
- diff --git a/src/search/README.md b/src/search/README.md index f0f9240a3..b68793134 100644 --- a/src/search/README.md +++ b/src/search/README.md @@ -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
@@ -45,6 +41,8 @@ Tips: There will be a search button on the keyboard when Search is inside a 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 diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index 3f91b79b6..c1a7894b6 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -13,7 +13,7 @@ Vue.use(Search); ### 基础用法 -`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。 +v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。 ```html @@ -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
@@ -37,6 +35,8 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
``` +> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 + ### 自定义按钮 `van-search` 支持自定义右侧取消按钮，使用名字为 action 的插槽即可。使用此插槽以后，原有的 cancel 事件不再生效。 diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md index 0a77319d0..677ac7eab 100644 --- a/src/submit-bar/README.md +++ b/src/submit-bar/README.md @@ -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 diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index 0ea900833..2852592d0 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -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 diff --git a/src/tabbar/README.md b/src/tabbar/README.md index fe211920b..0375bfcfb 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -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 diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index 3f8c8e404..e60eb8a20 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -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 diff --git a/yarn.lock b/yarn.lock index 556132e86..a25a40055 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1285,10 +1285,10 @@ shelljs "^0.8.2" signale "^1.4.0" -"@vant/doc@^2.5.6": - version "2.5.6" - resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.5.6.tgz#789dc09dab86fd7a0e713aba17eafd8dfbde59f6" - integrity sha512-qSX3D+zvDljYoaBD3co7sH+aqO3AgHTtU4WOY5TUqFlapjG+3kw/N8icXDyF9jnRp6Q5WCZaedmhZvAEykL3cQ== +"@vant/doc@^2.5.7": + version "2.5.7" + resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.5.7.tgz#67ae6bedcdb7caccb73ff43d0d13b626e9d4d622" + integrity sha512-1n0/YEFB0QvnNKzzjJAzZIJIInyn3y3UFFr31K3pjb17qdPUPuhg42wEXyFWSLQrOHc9jcUtmcEihD3aQIeL/Q== "@vant/eslint-config@^1.2.5": version "1.2.5"