feat(ui/app-bar): support props.safeAreaTop

varletjs · Mar 30, 2023 · 9f00d43 · 9f00d43
1 parent 7783acf
commit 9f00d43
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 5 deletions.
diff --git a/packages/varlet-ui/src/app-bar/AppBar.vue b/packages/varlet-ui/src/app-bar/AppBar.vue
@@ -1,5 +1,16 @@
 <template>
-  <div :class="classes(n(), [round, n('--round')], formatElevation(elevation, 3))" :style="rootStyles">
+  <div
+    :class="
+      classes(
+        n(),
+        n('$--box'),
+        [safeAreaTop, n('--safe-area-top')],
+        [round, n('--round')],
+        formatElevation(elevation, 3)
+      )
+    "
+    :style="rootStyles"
+  >
     <div :class="n('toolbar')">
       <div :class="n('left')">
         <slot name="left" />

diff --git a/packages/varlet-ui/src/app-bar/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/app-bar/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test app bar component props test app bar image and image-linear-gradient 1`] = `
-"<div class=\\"var-app-bar var-elevation--3\\" style=\\"background-position: center center; background-size: cover;\\">
+"<div class=\\"var-app-bar var--box var-elevation--3\\" style=\\"background-position: center center; background-size: cover;\\">
   <div class=\\"var-app-bar__toolbar\\">
     <div class=\\"var-app-bar__left\\">
       <div class=\\"var-app-bar__title\\"></div>
@@ -15,7 +15,7 @@ exports[`test app bar component props test app bar image and image-linear-gradie
 `;
 
 exports[`test app bar slots test app bar content slot 1`] = `
-"<div class=\\"var-app-bar var-elevation--3\\">
+"<div class=\\"var-app-bar var--box var-elevation--3\\">
   <div class=\\"var-app-bar__toolbar\\">
     <div class=\\"var-app-bar__left\\">
       <div class=\\"var-app-bar__title\\"></div>

diff --git a/packages/varlet-ui/src/app-bar/appBar.less b/packages/varlet-ui/src/app-bar/appBar.less
@@ -61,4 +61,10 @@
   &--round {
     border-radius: var(--app-bar-border-radius);
   }
+
+  &--safe-area-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+    box-sizing: content-box !important;
+  }
 }
diff --git a/packages/varlet-ui/src/app-bar/docs/en-US.md b/packages/varlet-ui/src/app-bar/docs/en-US.md
@@ -143,6 +143,7 @@ const active = ref(0)
 | `round`          | Whether to use rounded border                        | _boolean_ | `false` |
 | `image`          | Background image                            | _string_ | `-` |
 | `image-linear-gradient` | Background image linear gradient | _string_ | `-` |
+| `safe-area-top` | Whether to enable top safe area adaptation | _boolean_ | `false` |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/app-bar/docs/zh-CN.md b/packages/varlet-ui/src/app-bar/docs/zh-CN.md
@@ -143,6 +143,7 @@ const active = ref(0)
 | `round`          | 是否使用圆角                            | _boolean_ | `false` |
 | `image`          | 背景图片                            | _string_ | `-` |
 | `image-linear-gradient` | 背景图片渐变色 | _string_ | `-` |
+| `safe-area-top` | 是否开启顶部安全区适配 | _boolean_ | `false` |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/src/app-bar/props.ts b/packages/varlet-ui/src/app-bar/props.ts
@@ -32,4 +32,8 @@ export const props = {
   imageLinearGradient: {
     type: String,
   },
+  safeAreaTop: {
+    type: Boolean,
+    default: false,
+  },
 }
diff --git a/packages/varlet-ui/src/bottom-navigation/bottomNavigation.less b/packages/varlet-ui/src/bottom-navigation/bottomNavigation.less
@@ -16,8 +16,9 @@
   -webkit-tap-highlight-color: transparent;
 
   &--safe-area {
-    margin-bottom: constant(safe-area-inset-bottom); // iOS < 11.2
-    margin-bottom: env(safe-area-inset-bottom); // iOS >= 11.2
+    padding-bottom: constant(safe-area-inset-bottom); // iOS < 11.2
+    padding-bottom: env(safe-area-inset-bottom); // iOS >= 11.2
+    box-sizing: content-box !important;
   }
 
   &--fixed {

diff --git a/packages/varlet-ui/types/appBar.d.ts b/packages/varlet-ui/types/appBar.d.ts
@@ -14,6 +14,7 @@ export interface AppBarProps extends BasicAttributes {
   round?: boolean
   image?: string
   imageLinearGradient?: string
+  safeAreaTop?: boolean
 }
 
 export class AppBar extends VarComponent {