feat: ✨ 新增 Gap 间隔槽组件 (#147)

docs/component/gap.md

@@ -0,0 +1,50 @@
+<frame/>
+
+# Gap 间隔槽
+一般用于页面布局时代替margin或者padding;或者充当（底部）占位元素。
+
+## 基本使用
+
+通过 `height` 属性设置标题 `background` 属性设置背景色。
+
+
+```html
+<wd-gap bg-color="#FFFFFF"></wd-gap>
+```
+
+## 自定义背景色
+
+
+```html
+<wd-gap bg-color="#4D80F0"></wd-gap>
+```
+
+## 自定义高度
+
+
+```html
+<wd-gap bg-color="#4D80F0" height="120rpx"></wd-gap>
+```
+
+
+
+## 底部安全区
+
+
+```html
+<wd-gap bg-color="#FFFFFF"></wd-gap>
+```
+
+## Attributes
+
+| 参数              | 说明      | 类型      | 可选值        | 默认值         | 最低版本 |
+|-----------------|---------|---------|------------|-------------| -------- |
+| height          | 高度      | string  | -          | 30rpx       | -        |
+| background      | 背景颜色    | string  |            | transparent | -        |
+| safeAreaBbottom | 底部安全区  | boolean | true/false | false       | -        |
+
+## 外部样式类
+
+| 类名                 | 说明             | 最低版本 |
+| -------------------- | ---------------- | -------- |
+| custom-class         | 自定义样式 | -        |

src/pages.json

@@ -701,6 +701,16 @@
         },
         "navigationBarTitleText": "NumberKeyboard 数字键盘"
       }
+    },
+    {
+      "path": "pages/gap/Index",
+      "name": "gap",
+      "style": {
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "navigationBarTitleText": "Gap 间隔槽"
+      }
     }
   ],
   // "tabBar": {
@@ -723,4 +733,4 @@
     // "navigationBarBackgroundColor": "#FFF",
     // "backgroundColor": "#F8F8F8"
   }
-}
+}

src/pages/gap/Index.vue

@@ -0,0 +1,34 @@
+<template>
+  <page-wraper>
+    <view>
+      <demo-block title="基本使用" transparent>
+        <wd-gap bg-color="#FFFFFF"></wd-gap>
+      </demo-block>
+      <demo-block title="自定义背景颜色" transparent>
+        <wd-gap bg-color="#4D80F0"></wd-gap>
+      </demo-block>
+      <demo-block title="自定义高度" transparent>
+        <wd-gap bg-color="#4D80F0" height="120rpx"></wd-gap>
+      </demo-block>
+      <demo-block title="自定义样式" transparent>
+        <wd-gap custom-class="custom-gap"></wd-gap>
+      </demo-block>
+      <demo-block custom-class="custom-safe-area-bottom" title="底部安全区" transparent>
+        <wd-gap bg-color="#FFFFFF" safe-area-bottom height="120rpx"></wd-gap>
+      </demo-block>
+    </view>
+  </page-wraper>
+</template>
+<script lang="ts" setup></script>
+<style lang="scss" scoped>
+:deep(.custom-safe-area-bottom) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+:deep(.custom-gap) {
+  padding-bottom: 120rpx;
+  background: #34d19d !important;
+}
+</style>

src/pages/index/Index.vue

@@ -299,6 +299,10 @@ const list = ref([
         id: 'divider',
         name: 'Divider 分割线'
       },
+      {
+        id: 'gap',
+        name: 'Gap 间隔槽'
+      },
       {
         id: 'img',
         name: 'Img 图片'

src/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue

@@ -0,0 +1,35 @@
+<template>
+  <view :style="{ background: bgColor }" :class="[customClass]">
+    <view :style="{ height: height }"></view>
+    <view v-if="safeAreaBottom" :style="{ height: 'var(--window-bottom)' }"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-gap',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script setup lang="ts">
+interface Props {
+  bgColor?: string
+  safeAreaBottom?: boolean
+  customClass?: string
+  height?: string
+}
+withDefaults(defineProps<Props>(), {
+  // 背景颜色（默认transparent）
+  bgColor: 'transparent',
+  //额外添加底部安全区高度
+  safeAreaBottom: false,
+  //分割槽高度，单位rpx（默认30）
+  height: '30rpx',
+  customClass: ''
+})
+</script>