diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 2b96ba7d..278e847d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,7 +1,7 @@
/*
* @Author: weisheng
* @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2023-09-28 11:22:30
+ * @LastEditTime: 2023-10-10 22:42:54
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\docs\.vitepress\config.ts
@@ -196,6 +196,9 @@ export default defineConfig({
}, {
link: "/component/segmented",
text: "Segmented 分段器"
+ }, {
+ link: "/component/tabbar",
+ text: "Tabbar 标签栏"
}]
}, {
diff --git a/docs/component/tabbar.md b/docs/component/tabbar.md
index d08d509b..1f664100 100644
--- a/docs/component/tabbar.md
+++ b/docs/component/tabbar.md
@@ -4,25 +4,180 @@
底部导航栏，用于在不同页面之间进行切换。
+## 基础用法
+
+`v-model` 为绑定值，表示选中标签的索引值或者名称。
+
+```html
+
+
+
+
+
+```
+
+```typescript
+import { ref } from 'vue'
+
+const tabbar1 = ref('home')
+```
+
+## 通过名称匹配
+
+通过设置 `name` 属性，可以通过名称匹配选中标签。
+
+```html
+
+
+
+
+
+
+```
+
+## 徽标提示
+
+通过设置 `value` 属性，可以显示徽标提示，而设置 is-dot 属性后，会在图标右上角展示一个小红点。
+
+```html
+
+
+
+
+
+
+```
+
+## 悬浮标签栏
+
+通过设置 `shape` 属性为 `round`，可以将标签栏设置为悬浮样式。
+
+```html
+
+
+
+
+
+
+```
+
+## 自定义图标
+
+通过使用 `` 可以自定义标签页的图标。
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## 自定义颜色
+
+通过设置 `active-color` 和 `inactive-color` 属性，可以自定义激活和未激活标签的颜色。
+
+```html
+
+
+
+
+
+
+
+```
+
+## 监听切换事件
+
+通过监听 `change` 事件，可以获取选中标签的值。
+
+```html
+
+
+
+
+
+
+
+```
+
+```typescript
+function handleChange1({ value }: { value: string }) {
+ show(`选中标签:${value}`)
+}
+```
+
+## 固定底部
+
+通过设置 `fixed` 属性，可以将标签栏固定在底部；通过设置 `placeholder` 属性，可以在固定在底部时在标签位置生成一个等高的占位元素。
+
+```html
+
+
+
+
+
+
+
+```
-## Attributes
+
+## Tabbar Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----------------------|--------------------------------------------|-----------------------------|--------------------------------------|-------------------|------------|
| v-model/modelValue | 选中标签的索引值或者名称 | number / string | - | 0 | 0.1.27 |
| fixed | 是否固定在底部 | boolean | - | false | 0.1.27 |
-| safeAreaInsetBottom | 是否设置底部安全距离（iPhone X 类型的机型） | boolean | - | - | 0.1.27 |
+| safeAreaInsetBottom | 是否设置底部安全距离（iPhone X 类型的机型） | boolean | - | false | 0.1.27 |
| bordered | 是否显示顶部边框 | boolean | - | true | 0.1.27 |
| shape | 标签栏的形状 | TabbarShape | 'default' / 'round' | 'default' | 0.1.27 |
-| activeColor | 激活标签的颜色 | string | - | '' | 0.1.27 |
-| inactiveColor | 未激活标签的颜色 | string | - | '' | 0.1.27 |
+| activeColor | 激活标签的颜色 | string | - | - | 0.1.27 |
+| inactiveColor | 未激活标签的颜色 | string | - | - | 0.1.27 |
| placeholder | 固定在底部时，是否在标签位置生成一个等高的占位元素 | boolean | - | false | 0.1.27 |
| zIndex | tabbar组件的层级 | number | - | 500 | 0.1.27 |
-## 外部样式类
+## Tabbar Events
+
+| 事件名称 | 说明 | 参数 | 最低版本 |
+| -------- | -------------------------- | ----------- | -------- |
+| change | tabbar标签切换时触发 | `{ value }` | 0.1.27 |
+
+
+
+
+## Tabbar 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
-| custom-class | 根节点样式类 | - |
-| custom-style | 根节点样式 | - |
+| custom-class | 根节点样式类 | 0.1.27 |
+| custom-style | 根节点样式 | 0.1.27 |
+
+
+
+## TabbarItem Attributes
+| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
+|--------------|----------------|-------------------------|----------------|----------|------------|
+| title | 标签页的标题 | string | - | - | 0.1.27 |
+| name | 唯一标识符 | string / number | - | - | 0.1.27 |
+| icon | 图标 | string | - | - | 0.1.27 |
+| value | 徽标显示值 | number / string | - | - | 0.1.27 |
+| isDot | 是否点状徽标 | boolean | - | false | 0.1.27 |
+| max | 徽标最大值 | number | - | 99 | 0.1.27 |
+
+## TabbarItem Slots
+| name | 说明 | 参数 | 最低版本 |
+| ------ | -------------------- | ----------------------- | -------- |
+| icon | 自定义图标 | `active: boolean` | 0.1.27 |
+
+
+## TabbarItem 外部样式类
+
+| 类名 | 说明 | 最低版本 |
+|-----|-----|---------|
+| custom-class | 根节点样式类 | 0.1.27 |
+| custom-style | 根节点样式 | 0.1.27 |
diff --git a/src/pages.json b/src/pages.json
index 388ef1e0..7877a980 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -591,6 +591,16 @@
},
"navigationBarTitleText": "Segmented 分段器"
}
+ },
+ {
+ "path": "pages/tabbar/Index",
+ "name": "tabbar",
+ "style": {
+ "mp-alipay": {
+ "allowsBounceVertical": "NO"
+ },
+ "navigationBarTitleText": "Tabbar 标签栏"
+ }
}
],
// "tabBar": {
diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
index 388e1f64..c758e2ad 100644
--- a/src/pages/index/Index.vue
+++ b/src/pages/index/Index.vue
@@ -98,6 +98,10 @@ const list = ref([
{
id: 'segmented',
name: 'Segmented 分段器'
+ },
+ {
+ id: 'tabbar',
+ name: 'Tabbar 标签栏'
}
]
},
diff --git a/src/pages/swiper/Index.vue b/src/pages/swiper/Index.vue
index 4f47be29..7d01494c 100644
--- a/src/pages/swiper/Index.vue
+++ b/src/pages/swiper/Index.vue
@@ -93,11 +93,11 @@
import { ref } from 'vue'
const swiperList = ref([
- 'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/redpanda.jpg',
- 'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/capybara.jpg',
- 'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/panda.jpg',
+ 'https://unpkg.com/wot-design-uni-assets/redpanda.jpg',
+ 'https://unpkg.com/wot-design-uni-assets/capybara.jpg',
+ 'https://unpkg.com/wot-design-uni-assets/panda.jpg',
'https://img.yzcdn.cn/vant/cat.jpeg',
- 'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/meng.jpg'
+ 'https://unpkg.com/wot-design-uni-assets/meng.jpg'
])
function handleClick(e) {
console.log(e)
diff --git a/src/pages/tabbar/Index.vue b/src/pages/tabbar/Index.vue
new file mode 100644
index 00000000..0fb757fc
--- /dev/null
+++ b/src/pages/tabbar/Index.vue
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
index fc417e50..871175ff 100644
--- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@@ -762,8 +762,18 @@ $-swiper-nav-btn-size: var(--wot-swiper-nav-btn-size, 48rpx) !default;
// segmented
+$-segmented-padding: var(--wot-segmented-padding, 4px) !default; // 分段器padding
$-segmented-item-bg-color: var(--wot-segmented-item-bg-color, #eeeeee) !default;
$-segmented-item-color: var(--wot-segmented-item-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
$-segmented-item-acitve-bg: var(--wot-segmented-item-acitve-bg, #FFFFFF) !default; // 标题文字颜色
$-segmented-item-disabled-color: var(--wot-segmented-item-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 标题文字禁用颜色
+// tabbar
+$-tabbar-height: var(--wot-tabbar-height, 50px) !default;
+$-tabbar-box-shadow: var(--wot-tabbar-box-shadow, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)) !default; // round类型tabbar阴影
+
+// tabbar-item
+$-tabbar-item-title-font-size: var(--wot-tabbar-item-title-font-size, 10px) !default; // tabbar选项文字大小
+$-tabbar-item-title-line-height: var(--wot-tabbar-item-title-line-height, initial) !default; // tabbar选项标题文字行高
+$-tabbar-inactive-color: var(--wot-tabbar-inactive-color, $-color-title) !default; // 标题文字和图标颜色
+$-tabbar-active-color: var(--wot-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss
new file mode 100644
index 00000000..132bf16e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss
@@ -0,0 +1,51 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+ @include b(tabbar-item) {
+ @include e(body) {
+ :deep(){
+ @include when(inactive) {
+ color: $-dark-color-gray;
+ }
+ }
+ }
+ }
+}
+
+
+@include b(tabbar-item) {
+ flex: 1;
+ text-align: center;
+ text-decoration: none;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ @include e(body) {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ line-height: 1;
+ padding: 0;
+ position: relative;
+
+ :deep(){
+ @include when(active) {
+ color: $-tabbar-active-color;
+ }
+
+ @include when(inactive) {
+ color: $-tabbar-inactive-color;
+ }
+ }
+ }
+
+
+ @include e(body-title) {
+ font-size: $-tabbar-item-title-font-size;
+ line-height: $-tabbar-item-title-line-height;
+ }
+
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts
new file mode 100644
index 00000000..ad1114b3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts
@@ -0,0 +1,7 @@
+/**
+ * 折叠面板子项
+ */
+export interface TabbarItem {
+ // 唯一标识
+ name: string
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue
new file mode 100644
index 00000000..b3e924c6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss b/src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss
new file mode 100644
index 00000000..f430aad9
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss
@@ -0,0 +1,43 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+ @include b(tabbar) {
+ background: $-dark-background;
+ }
+}
+
+
+@include b(tabbar) {
+ display: flex;
+ align-items: center;
+ flex-wrap: nowrap;
+ position: relative;
+ background: $-color-white;
+ height: $-tabbar-height;
+
+ @include m(round){
+ margin-left: 32rpx;
+ margin-right: 32rpx;
+ border-radius: 999px;
+ box-shadow: $-tabbar-box-shadow;
+ }
+
+ @include when(border){
+ @include m(default){
+ @include halfPixelBorder('top');
+ }
+ }
+
+ @include when(fixed) {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 500;
+ @include when(safe) {
+ padding-bottom: constant(safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue b/src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue
new file mode 100644
index 00000000..31baacff
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue
@@ -0,0 +1,157 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/uni_modules/wot-design-uni/global.d.ts b/src/uni_modules/wot-design-uni/global.d.ts
index 7a459daf..b8d6b1fc 100644
--- a/src/uni_modules/wot-design-uni/global.d.ts
+++ b/src/uni_modules/wot-design-uni/global.d.ts
@@ -81,6 +81,8 @@ declare module '@vue/runtime-core' {
WdSwiper: typeof import('./components/wd-swiper/wd-swiper.vue')['default']
WdSwiperNav: typeof import('./components/wd-swiper-nav/wd-swiper-nav.vue')['default']
WdSegmented: typeof import('./components/wd-segmented/wd-segmented.vue')['default']
+ WdTabbar: typeof import('./components/wd-tabbar/wd-tabbar.vue')['default']
+ WdTabbarItem: typeof import('./components/wd-tabbar-item/wd-tabbar-item.vue')['default']
}
}