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

[new feature] Actionsheet: add safe-area-inset-bottom prop (#3171)

Browse Source
This commit is contained in:
neverland 2019-04-18 17:47:44 +08:00 committed by GitHub
parent 2b44f1a8dd
commit 83daca3f8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/index.tpl
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<meta http-Equiv="Cache-Control" Content="no-cache" /> <meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" /> <meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" /> <meta http-Equiv="Expires" Content="0" />

1
packages/actionsheet/en-US.md
View File

@ -85,6 +85,7 @@ Actionsheet will get another style if there is a `title` prop.
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` | | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` | | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
| get-container | Return the mount node for actionsheet | `String | () => HTMLElement` | - | | get-container | Return the mount node for actionsheet | `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` |
### Event ### Event

5
packages/actionsheet/index.less
View File

@ -60,4 +60,9 @@
color: @action-sheet-close-icon-color; color: @action-sheet-close-icon-color;
font-size: @action-sheet-close-icon-size; font-size: @action-sheet-close-icon-size;
} }
&--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
} }

4
packages/actionsheet/index.tsx
View File

@ -23,6 +23,7 @@ export type ActionsheetProps = PopupMixinProps & {
title?: string; title?: string;
actions: ActionsheetItem[]; actions: ActionsheetItem[];
cancelText?: string; cancelText?: string;
safeAreaInsetBottom?: boolean;
}; };
const [sfc, bem] = use('actionsheet'); const [sfc, bem] = use('actionsheet');
@ -79,7 +80,7 @@ function Actionsheet(
return ( return (
<Popup <Popup
class={bem()} class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
value={props.value} value={props.value}
position="bottom" position="bottom"
overlay={props.overlay} overlay={props.overlay}
@ -107,6 +108,7 @@ Actionsheet.props = {
title: String, title: String,
actions: Array, actions: Array,
cancelText: String, cancelText: String,
safeAreaInsetBottom: Boolean,
overlay: { overlay: {
type: Boolean, type: Boolean,
default: true default: true

1
packages/actionsheet/zh-CN.md
View File

@ -90,6 +90,7 @@ export default {
| close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - | | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - |
| lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.11 | | lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.11 |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - | | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
### Event ### Event

2
packages/tabbar/en-US.md
View File

@ -69,9 +69,9 @@ export default {
|------|------|------|------| |------|------|------|------|
| v-model | Index of current tab | `Number` | - | | v-model | Index of current tab | `Number` | - |
| fixed | Whether to fixed bottom | `Boolean` | `true` | | fixed | Whether to fixed bottom | `Boolean` | `true` |
| safe-area-inset-bottom | Whether to iPhone X bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` | 1.6.15 |
| z-index | Z-index | `Number` | `1` | | z-index | Z-index | `Number` | `1` |
| active-color | Color of active tab item | `String` | `#1989fa` | | active-color | Color of active tab item | `String` | `#1989fa` |
| 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` |
### Tabbar Event ### Tabbar Event

5
packages/tabbar/index.js
View File

@ -12,14 +12,11 @@ export default sfc({
props: { props: {
value: Number, value: Number,
activeColor: String, activeColor: String,
safeAreaInsetBottom: Boolean,
fixed: { fixed: {
type: Boolean, type: Boolean,
default: true default: true
}, },
safeAreaInsetBottom: {
type: Boolean,
default: false
},
zIndex: { zIndex: {
type: Number, type: Number,
default: 1 default: 1

1
packages/tabbar/index.less
View File

@ -13,7 +13,6 @@
} }
&--safe-area-inset-bottom { &--safe-area-inset-bottom {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }

2
packages/tabbar/zh-CN.md
View File

@ -84,9 +84,9 @@ export default {
|------|------|------|------|------| |------|------|------|------|------|
| v-model | 当前选中标签的索引 | `Number` | - | - | | v-model | 当前选中标签的索引 | `Number` | - | - |
| fixed | 是否固定在底部 | `Boolean` | `true` | - | | fixed | 是否固定在底部 | `Boolean` | `true` | - |
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，同时需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
| z-index | 元素 z-index | `Number` | `1` | 1.1.9 | | z-index | 元素 z-index | `Number` | `1` | 1.1.9 |
| active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 | | active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
### Tabbar Event ### Tabbar Event