diff --git a/packages/tabbar/en-US.md b/packages/tabbar/en-US.md index 13028873d..0dc825120 100644 --- a/packages/tabbar/en-US.md +++ b/packages/tabbar/en-US.md @@ -69,6 +69,7 @@ export default { |------|------|------|------| | v-model | Index of current tab | `Number` | - | | 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` | | active-color | Color of active tab item | `String` | `#1989fa` | diff --git a/packages/tabbar/index.js b/packages/tabbar/index.js index 5b414ccb2..01e004ea6 100644 --- a/packages/tabbar/index.js +++ b/packages/tabbar/index.js @@ -16,6 +16,10 @@ export default sfc({ type: Boolean, default: true }, + safeAreaInsetBottom: { + type: Boolean, + default: false + }, zIndex: { type: Number, default: 1 @@ -51,7 +55,13 @@ export default sfc({ return (
{this.slots()}
diff --git a/packages/tabbar/index.less b/packages/tabbar/index.less index 5664ae146..b2d862887 100644 --- a/packages/tabbar/index.less +++ b/packages/tabbar/index.less @@ -11,4 +11,10 @@ bottom: 0; position: fixed; } + + &--safe-area-inset-bottom { + padding-bottom: 0; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } } diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md index 47dc29fd0..3933b16c7 100644 --- a/packages/tabbar/zh-CN.md +++ b/packages/tabbar/zh-CN.md @@ -84,6 +84,7 @@ export default { |------|------|------|------|------| | v-model | 当前选中标签的索引 | `Number` | - | - | | 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 | | active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |