feat(tabbar): 新增底部安全区适配属性 #876 (#953)

* fix: doc更新

* fix: circleprogress 修改

* fix: tabbar新增底部安全适配属性

src/packages/__VUE/tabbar/demo.vue

@@ -53,11 +53,7 @@
       <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="购物车"
-        icon="cart"
-        num="110"
-      ></nut-tabbar-item>
+      <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
       <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
     </nut-tabbar>
 
@@ -76,20 +72,12 @@
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
     </nut-tabbar>
     <h2>固定底部，可自由跳转</h2>
-    <nut-tabbar :bottom="true">
+    <nut-tabbar :bottom="true" :safeAreaInsetBottom="true">
       <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="购物车"
-        href="https://m.jd.com"
-        icon="cart"
-      ></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="我的"
-        href="######"
-        icon="my"
-      ></nut-tabbar-item>
+      <nut-tabbar-item tab-title="购物车" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="我的" href="######" icon="my"></nut-tabbar-item>
     </nut-tabbar>
   </div>
 </template>

src/packages/__VUE/tabbar/doc.md

@@ -168,24 +168,24 @@ setup() {
 | 字段            | 说明               | 类型   | 默认值  |
 |-----------------|--------------------|--------|---------|
 | v-model:visible | 选中标签的索引值   | number | 0       |
-| bottom          | 是否固定在页面底部 | Booble | false   |
+| bottom          | 是否固定在页面底部 | boolean | false   |
 | size          | icon的尺寸/图片的宽高 | string | '20px'  |
 | unactive-color  | icon未激活的颜色   | string | #7d7e80 |
 | active-color    | icon激活的颜色     | string | #1989fa |
-
+| safe-area-inset-bottom   | 是否开启iphone系列全面屏底部安全区适配    | boolean | false |
 ### tabbar-item
 
 | 字段      | 说明                                      | 类型   | 默认值 |
 |-----------|-------------------------------------------|--------|--------|
-| tab-title | 标签页的标题                              | String | --     |
-| icon      | 标签页显示的[图标名称](#/icon)  | String | --     |
-| font-class-name | 自定义icon 字体基础类名     | String           | `nutui-iconfont` |
-| class-prefix | 自定义icon 类名前缀，用于使用自定义图标     | String           | `nut-icon` |
+| tab-title | 标签页的标题                              | string | --     |
+| icon      | 标签页显示的[图标名称](#/icon)  | string | --     |
+| font-class-name | 自定义icon 字体基础类名     | string           | `nutui-iconfont` |
+| class-prefix | 自定义icon 类名前缀，用于使用自定义图标     | string           | `nut-icon` |
 | img      | 标签页显示图片链接 | String | --     |
-| activeImg      | 激活以后的标签页显示图片链接（同一个item中icon和img只能选择一个） | String | --     |
-| href      | 标签页的跳转链接                          | String | --     |
-| to  `小程序不支持`      | 	标签页的路由对象，等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String｜Object | --     |
-| num       | 页签右上角的数字角标，超出99之后为99+     | Number | --     |
+| active-img      | 激活以后的标签页显示图片链接（同一个item中icon和img只能选择一个） | string | --     |
+| href      | 标签页的跳转链接                          | string | --     |
+| to  `小程序不支持`      | 	标签页的路由对象，等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | string｜object | --     |
+| num       | 页签右上角的数字角标，超出99之后为99+     | number | --     |
 
 
 ### Event

src/packages/__VUE/tabbar/index.scss

@@ -4,7 +4,7 @@
   border-top: 1px solid $tabbar-border-color;
   width: 100%;
   display: flex;
-  height: 50px;
+  padding: 7px 0;
   box-sizing: border-box;
   background: $white;
 
@@ -17,4 +17,8 @@
     left: 0px;
     z-index: 888;
   }
+  &-safebottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }

src/packages/__VUE/tabbar/index.taro.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-tabbar" :class="{ 'nut-tabbar-bottom': bottom }">
+  <view class="nut-tabbar" :class="{ 'nut-tabbar-bottom': bottom, 'nut-tabbar-safebottom': safeAreaInsetBottom }">
     <slot></slot>
   </view>
 </template>
@@ -33,6 +33,10 @@ export default create({
     activeColor: {
       type: String,
       default: ''
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['tab-switch', 'update:visible'],

src/packages/__VUE/tabbar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-tabbar" :class="{ 'nut-tabbar-bottom': bottom }">
+  <view class="nut-tabbar" :class="{ 'nut-tabbar-bottom': bottom, 'nut-tabbar-safebottom': safeAreaInsetBottom }">
     <slot></slot>
   </view>
 </template>
@@ -33,6 +33,10 @@ export default create({
     activeColor: {
       type: String,
       default: ''
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['tab-switch', 'update:visible'],

src/sites/mobile-taro/vue/src/nav/pages/tabbar/index.vue

@@ -50,11 +50,7 @@
       <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="购物车"
-        icon="cart"
-        num="110"
-      ></nut-tabbar-item>
+      <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
       <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
     </nut-tabbar>
 
@@ -73,20 +69,12 @@
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
     </nut-tabbar>
     <h2>固定底部，可自由跳转</h2>
-    <nut-tabbar :bottom="true">
+    <nut-tabbar :bottom="true" :safeAreaInsetBottom="true">
       <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="购物车"
-        href="https://m.jd.com"
-        icon="cart"
-      ></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="我的"
-        href="######"
-        icon="my"
-      ></nut-tabbar-item>
+      <nut-tabbar-item tab-title="购物车" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="我的" href="######" icon="my"></nut-tabbar-item>
     </nut-tabbar>
   </div>
 </template>