feat(Style): add van-safe-area-bottom util class (#9205)

* feat(Style): add van-safe-area-bottom class

* chore: update test cases

src/action-bar/ActionBar.tsx

@@ -19,7 +19,9 @@ export default defineComponent({
     linkChildren();
 
     return () => (
-      <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
+      <div
+        class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
+      >
         {slots.default?.()}
       </div>
     );

src/action-bar/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-action-bar-background-color: @action-bar-background-color;
@@ -16,9 +15,4 @@
   box-sizing: content-box;
   height: var(--van-action-bar-height);
   background-color: var(--van-action-bar-background-color);
-  .safe-area-inset-bottom();
-
-  &--unfit {
-    padding-bottom: 0;
-  }
 }

src/action-bar/test/__snapshots__/demo.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div class="van-action-bar">
+  <div class="van-action-bar van-safe-area-bottom">
     <div role="button"
          class="van-action-bar-icon"
          tabindex="0"
@@ -39,7 +39,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-action-bar">
+  <div class="van-action-bar van-safe-area-bottom">
     <div role="button"
          class="van-action-bar-icon"
          tabindex="0"
@@ -93,7 +93,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-action-bar">
+  <div class="van-action-bar van-safe-area-bottom">
     <div role="button"
          class="van-action-bar-icon"
          tabindex="0"
@@ -143,7 +143,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-action-bar">
+  <div class="van-action-bar van-safe-area-bottom">
     <div role="button"
          class="van-action-bar-icon"
          tabindex="0"

src/action-bar/test/__snapshots__/index.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should allow to disable safe-area-inset-bottom prop 1`] = `
-<div class="van-action-bar van-action-bar--unfit">
+<div class="van-action-bar">
 </div>
 `;

src/action-sheet/test/__snapshots__/index.spec.ts.snap

@@ -19,7 +19,7 @@ exports[`should render default slot correctly 1`] = `
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet">
+  <div class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet">
     <div class="van-action-sheet__header">
       Title
       <i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close">

src/action-sheet/test/index.spec.ts

@@ -248,13 +248,13 @@ test('should allow to control safe-area with safe-area-inset-bottom prop', async
   });
 
   expect(wrapper.find('.van-action-sheet').classes()).toContain(
-    'van-popup--safe-area-inset-bottom'
+    'van-safe-area-bottom'
   );
 
   await wrapper.setProps({
     safeAreaInsetBottom: false,
   });
   expect(wrapper.find('.van-action-sheet').classes()).not.toContain(
-    'van-popup--safe-area-inset-bottom'
+    'van-safe-area-bottom'
   );
 });

src/address-list/AddressList.tsx

@@ -86,7 +86,7 @@ export default defineComponent({
     };
 
     const renderBottom = () => (
-      <div class={bem('bottom')}>
+      <div class={[bem('bottom'), 'van-safe-area-bottom']}>
         <Button
           round
           block

src/address-list/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-address-list-padding: @address-list-padding;
@@ -29,9 +28,9 @@
     z-index: var(--van-address-list-add-button-z-index);
     box-sizing: border-box;
     width: 100%;
-    padding: 0 var(--van-padding-md);
+    padding-left: var(--van-padding-md);
+    padding-right: var(--van-padding-md);
     background-color: var(--van-white);
-    .safe-area-inset-bottom();
   }
 
   &__add {

src/address-list/test/__snapshots__/demo.spec.ts.snap

@@ -85,7 +85,7 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
     </div>
-    <div class="van-address-list__bottom">
+    <div class="van-address-list__bottom van-safe-area-bottom">
       <button type="button"
               class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
       >

src/address-list/test/__snapshots__/index.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`should render tag slot correctly 1`] = `
        role="radiogroup"
   >
   </div>
-  <div class="van-address-list__bottom">
+  <div class="van-address-list__bottom van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
     >

src/calendar/Calendar.tsx

@@ -487,7 +487,12 @@ export default defineComponent({
     };
 
     const renderFooter = () => (
-      <div class={bem('footer', { unfit: !props.safeAreaInsetBottom })}>
+      <div
+        class={[
+          bem('footer'),
+          { 'van-safe-area-bottom': props.safeAreaInsetBottom },
+        ]}
+      >
         {renderFooterButton()}
       </div>
     );

src/calendar/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-calendar-background-color: @calendar-background-color;
@@ -201,12 +200,8 @@
 
   &__footer {
     flex-shrink: 0;
-    padding: 0 var(--van-padding-md);
-    .safe-area-inset-bottom();
-
-    &--unfit {
-      padding-bottom: 0;
-    }
+    padding-left: var(--van-padding-md);
+    padding-right: var(--van-padding-md);
   }
 
   &__confirm {

src/calendar/test/__snapshots__/demo.spec.ts.snap

@@ -271,7 +271,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div class="van-calendar__footer">
+    <div class="van-calendar__footer van-safe-area-bottom">
     </div>
   </div>
 </div>

src/calendar/test/__snapshots__/index.spec.ts.snap

@@ -64,7 +64,7 @@ exports[`color prop when type is range 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
             style="color: white; background: blue; border-color: blue;"
@@ -293,7 +293,7 @@ exports[`color prop when type is single 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
             style="color: white; background: blue; border-color: blue;"
@@ -526,7 +526,7 @@ exports[`formatter prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
     >
@@ -621,7 +621,7 @@ exports[`popup wrapper 2`] = `
           </div>
         </div>
       </div>
-      <div class="van-calendar__footer">
+      <div class="van-calendar__footer van-safe-area-bottom">
         <button type="button"
                 class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
         >
@@ -886,7 +886,7 @@ exports[`row-height prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
     >
@@ -1113,7 +1113,7 @@ exports[`should render title、footer、subtitle slot correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     Custom Footer
   </div>
 </div>

src/calendar/test/__snapshots__/prop.spec.ts.snap

@@ -212,7 +212,7 @@ exports[`lazy-render prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
     >

src/contact-list/ContactList.tsx

@@ -90,7 +90,7 @@ export default defineComponent({
         <RadioGroup modelValue={props.modelValue} class={bem('group')}>
           {props.list && props.list.map(renderItem)}
         </RadioGroup>
-        <div class={bem('bottom')}>
+        <div class={[bem('bottom'), 'van-safe-area-bottom']}>
           <Button
             round
             block

src/contact-list/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-contact-list-edit-icon-size: @contact-list-edit-icon-size;
@@ -56,9 +55,9 @@
     bottom: 0;
     left: 0;
     z-index: var(--van-contact-list-add-button-z-index);
-    padding: 0 var(--van-padding-md);
+    padding-left: var(--van-padding-md);
+    padding-right: var(--van-padding-md);
     background-color: var(--van-white);
-    .safe-area-inset-bottom();
   }
 
   &__add {

src/contact-list/test/__snapshots__/demo.spec.ts.snap

@@ -56,7 +56,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div class="van-contact-list__bottom">
+    <div class="van-contact-list__bottom van-safe-area-bottom">
       <button type="button"
               class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"
       >

src/contact-list/test/__snapshots__/index.spec.ts.snap

@@ -33,7 +33,7 @@ exports[`should render ContactList correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-contact-list__bottom">
+  <div class="van-contact-list__bottom van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"
     >

src/popup/Popup.tsx

@@ -185,11 +185,13 @@ export default defineComponent({
           v-show={props.show}
           ref={popupRef}
           style={style.value}
-          class={bem({
+          class={[
+            bem({
               round,
               [position]: position,
-            'safe-area-inset-bottom': safeAreaInsetBottom,
-          })}
+            }),
+            { 'van-safe-area-bottom': safeAreaInsetBottom },
+          ]}
           onClick={onClick}
           {...attrs}
         >

src/popup/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-popup-background-color: @popup-background-color;
@@ -79,10 +78,6 @@
       }
     }
 
-    &--safe-area-inset-bottom {
-      .safe-area-inset-bottom();
-    }
-
     &-slide-top-enter-active,
     &-slide-left-enter-active,
     &-slide-right-enter-active,

src/share-sheet/test/__snapshots__/index.spec.ts.snap

@@ -28,7 +28,7 @@ exports[`should render title and description slot correctly 1`] = `
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-share-sheet">
+  <div class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-share-sheet">
     <div class="van-share-sheet__header">
       <h2 class="van-share-sheet__title">
         Custom Title

src/style/README.md

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

src/style/README.zh-CN.md

@@ -47,6 +47,14 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <div class="van-hairline--surround"></div>
 ```
 
+### 底部安全区
+
+为元素添加底部安全区适配。
+
+```html
+<div class="van-safe-area-bottom"></div>
+```
+
 ### 动画
 
 可以通过 `transition` 组件使用内置的动画类。

src/style/base.less

@@ -5,7 +5,73 @@
 @import './var.less';
 @import './css-variables.less';
 @import './normalize.less';
-@import './ellipsis.less';
-@import './clearfix.less';
-@import './hairline.less';
 @import './animation.less';
+@import './mixins/clearfix.less';
+@import './mixins/ellipsis.less';
+@import './mixins/hairline.less';
+
+.van-clearfix {
+  .clearfix();
+}
+
+.van-ellipsis {
+  .ellipsis();
+}
+
+.van-multi-ellipsis--l2 {
+  .multi-ellipsis(2);
+}
+
+.van-multi-ellipsis--l3 {
+  .multi-ellipsis(3);
+}
+
+.van-safe-area-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+[class*='van-hairline'] {
+  &::after {
+    .hairline();
+  }
+}
+
+.van-hairline {
+  &,
+  &--top,
+  &--left,
+  &--right,
+  &--bottom,
+  &--surround,
+  &--top-bottom {
+    position: relative;
+  }
+
+  &--top::after {
+    border-top-width: @border-width-base;
+  }
+
+  &--left::after {
+    border-left-width: @border-width-base;
+  }
+
+  &--right::after {
+    border-right-width: @border-width-base;
+  }
+
+  &--bottom::after {
+    border-bottom-width: @border-width-base;
+  }
+
+  &,
+  &-unset {
+    &--top-bottom::after {
+      border-width: @border-width-base 0;
+    }
+  }
+
+  &--surround::after {
+    border-width: @border-width-base;
+  }
+}

src/style/clearfix.less

@@ -1,5 +0,0 @@
-@import './mixins/clearfix';
-
-.van-clearfix {
-  .clearfix();
-}

src/style/ellipsis.less

@@ -1,13 +0,0 @@
-@import './mixins/ellipsis';
-
-.van-ellipsis {
-  .ellipsis();
-}
-
-.van-multi-ellipsis--l2 {
-  .multi-ellipsis(2);
-}
-
-.van-multi-ellipsis--l3 {
-  .multi-ellipsis(3);
-}

src/style/hairline.less

@@ -1,47 +0,0 @@
-@import './var';
-@import './mixins/hairline';
-
-[class*='van-hairline'] {
-  &::after {
-    .hairline();
-  }
-}
-
-.van-hairline {
-  &,
-  &--top,
-  &--left,
-  &--right,
-  &--bottom,
-  &--surround,
-  &--top-bottom {
-    position: relative;
-  }
-
-  &--top::after {
-    border-top-width: @border-width-base;
-  }
-
-  &--left::after {
-    border-left-width: @border-width-base;
-  }
-
-  &--right::after {
-    border-right-width: @border-width-base;
-  }
-
-  &--bottom::after {
-    border-bottom-width: @border-width-base;
-  }
-
-  &,
-  &-unset {
-    &--top-bottom::after {
-      border-width: @border-width-base 0;
-    }
-  }
-
-  &--surround::after {
-    border-width: @border-width-base;
-  }
-}

src/style/mixins/safe-area.less

@@ -1,4 +0,0 @@
-.safe-area-inset-bottom() {
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-}

src/submit-bar/SubmitBar.tsx

@@ -104,7 +104,9 @@ export default defineComponent({
     };
 
     return () => (
-      <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
+      <div
+        class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
+      >
         {slots.top?.()}
         {renderTip()}
         <div class={bem('bar')}>

src/submit-bar/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-submit-bar-height: @submit-bar-height;
@@ -32,7 +31,6 @@
   width: 100%;
   background-color: var(--van-submit-bar-background-color);
   user-select: none;
-  .safe-area-inset-bottom();
 
   &__tip {
     padding: var(--van-submit-bar-tip-padding);
@@ -98,8 +96,4 @@
       background: var(--van-gradient-red);
     }
   }
-
-  &--unfit {
-    padding-bottom: 0;
-  }
 }

src/submit-bar/test/__snapshots__/demo.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div class="van-submit-bar">
+  <div class="van-submit-bar van-safe-area-bottom">
     <div class="van-submit-bar__bar">
       <div class="van-submit-bar__text">
         <span>
@@ -29,7 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-submit-bar">
+  <div class="van-submit-bar van-safe-area-bottom">
     <div class="van-submit-bar__tip">
       <i class="van-badge__wrapper van-icon van-icon-info-o van-submit-bar__tip-icon">
       </i>
@@ -64,7 +64,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-submit-bar">
+  <div class="van-submit-bar van-safe-area-bottom">
     <div class="van-submit-bar__bar">
       <div class="van-submit-bar__text">
         <span>
@@ -102,7 +102,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-submit-bar">
+  <div class="van-submit-bar van-safe-area-bottom">
     <div class="van-submit-bar__tip">
       Some tips,
       <span class="edit-address">

src/submit-bar/test/__snapshots__/index.spec.ts.snap

@@ -11,7 +11,7 @@ exports[`should change the color of submit button when using button-color prop 1
 `;
 
 exports[`should render button slot correctly 1`] = `
-<div class="van-submit-bar">
+<div class="van-submit-bar van-safe-area-bottom">
   <div class="van-submit-bar__bar">
     Custom button
   </div>
@@ -66,7 +66,7 @@ exports[`should render suffix-label correctly 1`] = `
 `;
 
 exports[`should render top slot correctly 1`] = `
-<div class="van-submit-bar">
+<div class="van-submit-bar van-safe-area-bottom">
   Custom Top
   <div class="van-submit-bar__bar">
     <button type="button"

src/submit-bar/test/index.spec.ts

@@ -87,7 +87,7 @@ test('should allow to disable safe-area-inset-bottom prop', () => {
       safeAreaInsetBottom: false,
     },
   });
-  expect(wrapper.find('.van-submit-bar--unfit').exists()).toBeTruthy();
+  expect(wrapper.find('.van-safe-area-bottom').exists()).toBeFalsy();
 });
 
 test('should change the color of submit button when using button-color prop', () => {

src/tabbar/Tabbar.tsx

@@ -61,7 +61,7 @@ export default defineComponent({
     const renderPlaceholder = usePlaceholder(root, bem);
 
     // enable safe-area-inset-bottom by default when fixed
-    const isUnfit = () => !(props.safeAreaInsetBottom ?? props.fixed);
+    const enableSafeArea = () => props.safeAreaInsetBottom ?? props.fixed;
 
     const renderTabbar = () => {
       const { fixed, zIndex, border } = props;
@@ -70,8 +70,11 @@ export default defineComponent({
           ref={root}
           style={getZIndexStyle(zIndex)}
           class={[
-            bem({ unfit: isUnfit(), fixed }),
-            { [BORDER_TOP_BOTTOM]: border },
+            bem({ fixed }),
+            {
+              [BORDER_TOP_BOTTOM]: border,
+              'van-safe-area-bottom': enableSafeArea(),
+            },
           ]}
         >
           {slots.default?.()}

src/tabbar/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-tabbar-height: @tabbar-height;
@@ -14,15 +13,10 @@
   width: 100%;
   height: var(--van-tabbar-height);
   background-color: var(--van-tabbar-background-color);
-  .safe-area-inset-bottom();
 
   &--fixed {
     position: fixed;
     bottom: 0;
     left: 0;
   }
-
-  &--unfit {
-    padding-bottom: 0;
-  }
 }

src/tabbar/test/__snapshots__/demo.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
@@ -42,7 +42,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
@@ -82,7 +82,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
@@ -130,7 +130,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <img src="https://img.yzcdn.cn/vant/user-active.png">
@@ -165,7 +165,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active"
          style="color: rgb(238, 10, 36);"
     >
@@ -213,7 +213,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">

src/tabbar/test/__snapshots__/index.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`should render placeholder element when using placeholder prop 1`] = `
 <div class="van-tabbar__placeholder"
      style="height: 50px;"
 >
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
   </div>
 </div>
 `;