feat: add van-safe-area-top class (#10356)

packages/vant/src/nav-bar/NavBar.tsx

@@ -82,8 +82,11 @@ export default defineComponent({
           ref={navBarRef}
           style={style}
           class={[
-            bem({ fixed, 'safe-area-inset-top': props.safeAreaInsetTop }),
-            { [BORDER_BOTTOM]: border },
+            bem({ fixed }),
+            {
+              [BORDER_BOTTOM]: border,
+              'van-safe-area-top': props.safeAreaInsetTop,
+            },
           ]}
         >
           <div class={bem('content')}>

packages/vant/src/nav-bar/test/index.spec.ts

@@ -74,7 +74,7 @@ test('should have safe-area-inset-top class when using safe-area-inset-top prop'
     },
   });
 
-  expect(wrapper.classes()).toContain('van-nav-bar--safe-area-inset-top');
+  expect(wrapper.classes()).toContain('van-safe-area-top');
 });
 
 test('should change z-index when using z-index prop', () => {

packages/vant/src/style/README.md

@@ -49,11 +49,15 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
 <div class="van-hairline--surround"></div>
 ```
 
-### Safe Area Bottom
+### Safe Area
 
-Enable safe area inset bottom.
+Enable safe area.
 
 ```html
+<!-- top -->
+<div class="van-safe-area-top"></div>
+
+<!-- bottom -->
 <div class="van-safe-area-bottom"></div>
 ```
 

packages/vant/src/style/README.zh-CN.md

@@ -47,11 +47,15 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <div class="van-hairline--surround"></div>
 ```
 
-### 底部安全区
+### 安全区
 
-为元素添加底部安全区适配。
+为元素添加安全区适配。
 
 ```html
+<!-- 顶部安全区 -->
+<div class="van-safe-area-top"></div>
+
+<!-- 底部安全区 -->
 <div class="van-safe-area-bottom"></div>
 ```
 

packages/vant/src/style/base.less

@@ -26,6 +26,11 @@
   .multi-ellipsis(3);
 }
 
+.van-safe-area-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+
 .van-safe-area-bottom {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);