stellar-ui-plus 1.16.18

package/components/ste-tabs/README.md

@@ -0,0 +1,165 @@
+# Tabs 标签页
+
+标签页组件，集成了常见标签页所需功能。
+
+---$
+
+### 代码演示
+
+```html
+<script setup lang="ts">
+    import { ref, computed } from 'vue';
+    import type { SwitchOnChangeEvent } from '@uni-helper/uni-app-types';
+
+    const list1 = [
+        {
+            title: '标签1',
+            subTitle: '子标题',
+            image: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+            content: 'https://image.whzb.com/chain/StellarUI/image/banner1.png',
+            badge: 5,
+        },
+        {
+            title: '标签2',
+            subTitle: '子标题',
+            image: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+            content: 'https://image.whzb.com/chain/StellarUI/image/banner2.png',
+            badge: 0,
+        },
+        {
+            title: '这是一个超长的标签',
+            subTitle: '子标题',
+            image: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+            content: 'https://image.whzb.com/chain/StellarUI/image/banner1.png',
+            badge: 10,
+        },
+        {
+            title: '标签4',
+            subTitle: '子标题',
+            image: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+            content: 'https://image.whzb.com/chain/StellarUI/image/banner2.png',
+            badge: 0,
+        },
+    ];
+    const list2 = [
+        {
+            title: '标签5',
+            subTitle: '子标题',
+            image: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+            content: 'https://image.whzb.com/chain/StellarUI/image/banner1.png',
+            badge: 0,
+        },
+        {
+            title: '标签6',
+            subTitle: '子标题',
+            image: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+            content: 'https://image.whzb.com/chain/StellarUI/image/banner2.png',
+            badge: 0,
+        },
+        {
+            title: '标签7',
+            subTitle: '子标题',
+            image: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+            content: 'https://image.whzb.com/chain/StellarUI/image/banner1.png',
+            badge: 0,
+        },
+        {
+            title: '标签8',
+            subTitle: '子标题',
+            image: 'https://image.whzb.com/chain/StellarUI/图片.jpg',
+            content: 'https://image.whzb.com/chain/StellarUI/image/banner2.png',
+            badge: 0,
+        },
+    ];
+
+    const showData = ref(false);
+    const datas = computed(() => (showData.value ? [...list1].concat(list2) : list1));
+    const switchData = (v: SwitchOnChangeEvent) => (showData.value = v.detail.value);
+
+    const showImage = ref(false);
+    const setShowImage = (v: SwitchOnChangeEvent) => (showImage.value = v.detail.value);
+    const showTitle = ref(true);
+    const setShowTitle = (v: SwitchOnChangeEvent) => (showTitle.value = v.detail.value);
+    const showSubTitle = ref(false);
+    const setSubTitle = (v: SwitchOnChangeEvent) => (showSubTitle.value = v.detail.value);
+    const showBadge = ref(false);
+    const setShowBadge = (v: SwitchOnChangeEvent) => (showBadge.value = v.detail.value);
+    const swipeable = ref(false);
+    const setSwipeable = (v: SwitchOnChangeEvent) => (swipeable.value = v.detail.value);
+    const showType = ref('line');
+    const setShowType = (v: SwitchOnChangeEvent) => (showType.value = v.detail.value ? 'card' : 'line');
+</script>
+<ste-tabs :showImage="showImage" :showSubtitle="showSubTitle" :showTitle="showTitle" :swipeable="swipeable" :type="showType">
+    <ste-tab v-for="item in datas" :key="item.title" :title="item.title" :image="item.image" :badge="showBadge ? item.badge : 0" :subTitle="item.subTitle">
+        <view>{{ item.title }} Content</view>
+        <image mode="widthFix" :src="item.content" />
+    </ste-tab>
+</ste-tabs>
+<view class="method-list">
+    <view>
+        显示主标题
+        <switch :checked="showTitle" @change="setShowTitle"></switch>
+    </view>
+    <view>
+        显示图标
+        <switch @change="setShowImage"></switch>
+    </view>
+    <view>
+        显示子标题
+        <switch @change="setSubTitle"></switch>
+    </view>
+    <view>
+        切换数据
+        <switch @change="switchData"></switch>
+    </view>
+    <view>
+        显示徽标
+        <switch @change="setShowBadge"></switch>
+    </view>
+    <view>
+        手势切换
+        <switch @change="setSwipeable"></switch>
+    </view>
+    <view>
+        卡片模式
+        <switch @change="setShowType"></switch>
+    </view>
+</view>
+```
+
+####
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Tabs Slot
+
+| 插槽名    | 说明                              | 插槽参数 | 支持版本 |
+| --------- | --------------------------------- | -------- | -------- |
+| `default` | 默认插槽，请传入`ste-tab`标签列表 | -        | -        |
+
+#### Tab Props
+
+| 属性名          | 说明                                                                 | 类型              | 默认值  | 可选值 | 支持版本 |
+| --------------- | -------------------------------------------------------------------- | ----------------- | ------- | ------ | -------- |
+| `title`         | 标题                                                                 | `String`          | -       | -      | -        |
+| `subTitle`      | 子标题                                                               | `String`          | -       | -      | -        |
+| `image`         | 图片（同image的src属性）                                             | `String`          | -       | -      | -        |
+| `name`          | 标签唯一标识（当tabs的active值类型为string时，作为匹配激活的标识符） | `String`          | -       | -      | -        |
+| `index`         | 标签下标（当tabs的active值类型为number时，作为匹配激活的标识符）     | `Number`          | -       | -      | -        |
+| `disabled`      | 禁用当前标签                                                         | `Boolean`         | `false` | -      | -        |
+| `showDot`       | 是否在主标题右上角显示小红点（隐藏主标题时无法显示）                 | `Boolean`         | `false` | -      | -        |
+| `badge`         | 右上角徽标的内容                                                     | `String`/`Number` | `0`     | -      | -        |
+| `showZeroBadge` | 当 badge 为数字 0 时，是否展示徽标                                   | `Boolean`         | `false` | -      | -        |
+
+#### Tab Slot
+
+| 插槽名    | 说明                                         | 插槽参数 | 支持版本 |
+| --------- | -------------------------------------------- | -------- | -------- |
+| `default` | 默认插槽，在插槽中的内容会展示在标签内容区域 | -        | -        |
+
+---$
+{{xuyajun}}

package/components/ste-tabs/config.json

@@ -0,0 +1,5 @@
+{
+  "group": "导航组件",
+  "title": "Tabs 标签页",
+  "icon": "https://image.whzb.com/chain/StellarUI/组件图标/badge.png"
+}

package/components/ste-tabs/props.ts

@@ -0,0 +1,133 @@
+export const TAB_KEY = Symbol('ste-tabs')
+
+export interface SteTabsProps {
+  active: number | string
+  type: string
+  showImage: boolean
+  showTitle: boolean
+  showSubtitle: boolean
+  color: string
+  background: string
+  radius: number | string
+  duration: number | string
+  showLine: boolean
+  lineWidth: number | string
+  lineHeight: number | string
+  border: boolean
+  ellipsis: boolean
+  tabWidth: number | string
+  tabPadding: number | string
+  tabSpace: number | string
+  divideNum: number
+  sticky: boolean
+  offsetTop: number | string
+  swipeable: boolean
+  titleColor: string
+  activeTitleColor: string
+  titleHeight: number | string
+  subColor: string
+  activeSubColor: string
+  subTitleHeight: number | string
+  subTitleRadius: number | string
+  imageWidth: number | string
+  imageHeight: number | string
+  imageRadius: number | string
+  imageBorderWidth: number | string
+  showGapLine: boolean
+  lock: boolean
+  disabled: boolean
+  pullDown: boolean
+  placeholder: string
+  maskTop: number | string
+  maskRight: number | string
+  maskBottom: number | string
+  maskLeft: number | string
+  maskZindex: number | string
+}
+
+export default {
+  // 当前激活的选项支持sync双向绑定（类型为number时绑定index，类型为string时绑定name）
+  active: { type: [Number, String], default: () => 0 },
+  // 样式风格类型，可选值为 line  card
+  type: { type: String, default: () => 'line' },
+  // 是否显示图片
+  showImage: { type: Boolean, default: () => false },
+  // 是否显示主标题
+  showTitle: { type: Boolean, default: () => true },
+  // 是否显示副标题
+  showSubtitle: { type: Boolean, default: () => false },
+  // 主题色（滑块颜色，边框颜色，选中的背景色，激活下拉列表中选项颜色）
+  color: { type: String, default: () => '' },
+  // 背景
+  background: { type: String, default: () => '' },
+  // 圆角
+  radius: { type: [String, Number], default: () => 0 },
+  // 动画时间，单位秒，设置为 0 可以禁用动画
+  duration: { type: [String, Number], default: () => 0.3 },
+  // 底部条是否显示，默认true（显示副标题的情况下会自动隐藏）
+  showLine: { type: Boolean, default: () => true },
+  // 底部条宽度，默认单位rpx
+  lineWidth: { type: [String, Number], default: () => 52 },
+  // 底部条高度，默认单位rpx
+  lineHeight: { type: [String, Number], default: () => 6 },
+  // 是否显示标签栏外边框，仅在 type="line" 时有效
+  border: { type: Boolean, default: () => false },
+  // 是否省略过长的标题文字
+  ellipsis: { type: Boolean, default: () => false },
+  // tab内容的宽度
+  tabWidth: { type: [String, Number], default: () => 'auto' },
+  // 选项内边距，默认24，单位rpx
+  tabPadding: { type: [Number, String], default: () => 24 },
+  // tab间距rpx
+  tabSpace: { type: [Number, String], default: () => 0 },
+  // tab等分数量，设置为 0 ，则不等分
+  divideNum: { type: Number, default: () => 4 },
+  // 是否使用粘性布局
+  sticky: { type: Boolean, default: () => false },
+  // 粘性布局下吸顶时与顶部的距离，单位rpx
+  offsetTop: { type: [String, Number], default: () => 0 },
+  // 是否开启手势左右滑动切换
+  swipeable: { type: Boolean, default: () => false },
+  // 主标题字体颜色和下拉列表中选项颜色
+  titleColor: { type: String, default: () => '#000000' },
+  // 激活主标题字体颜色
+  activeTitleColor: { type: String, default: () => '#000000' },
+  // 标题高度
+  titleHeight: { type: [Number, String], default: () => 48 },
+  // 子标题字体颜色和下拉列表中选项颜色
+  subColor: { type: String, default: () => '#000' },
+  // 激活子标题字体颜色和下拉列表中选项颜色
+  activeSubColor: { type: String, default: () => '#fff' },
+  // 子标题高度
+  subTitleHeight: { type: [Number, String], default: () => 42 },
+  // 子标题圆角
+  subTitleRadius: { type: [Number, String], default: () => 21 },
+  // 图片宽度，默认80，单位rpx
+  imageWidth: { type: [Number, String], default: () => 80 },
+  // 图片高度，默认80，单位rpx
+  imageHeight: { type: [Number, String], default: () => 80 },
+  // 图片圆角，默认50%，单位rpx
+  imageRadius: { type: [Number, String], default: () => '50%' },
+  // 选中图片边框宽度，默认4，单位rpx
+  imageBorderWidth: { type: [Number, String], default: () => 4 },
+  // 是否显示分隔符
+  showGapLine: { type: Boolean, default: () => false },
+  // 是否锁定tab(无法切换)
+  lock: { type: Boolean, default: () => false },
+  // 是否禁用tab(所有功能失效)
+  disabled: { type: Boolean, default: () => false },
+  // 是否有下拉选择按钮
+  pullDown: { type: Boolean, default: () => false },
+  // 下拉占位符
+  placeholder: { type: String, default: () => '请选择' },
+  // 下拉蒙层顶部距离
+  maskTop: { type: [String, Number], default: () => 0 },
+  // 下拉蒙层右侧距离
+  maskRight: { type: [String, Number], default: () => 0 },
+  // 下拉蒙层底部距离
+  maskBottom: { type: [String, Number], default: () => 0 },
+  // 下拉蒙层左侧距离
+  maskLeft: { type: [String, Number], default: () => 0 },
+  // 下拉蒙层层级
+  maskZindex: { type: [String, Number], default: () => 1001 },
+}

package/components/ste-tabs/ste-tabs.easycom.json

@@ -0,0 +1,278 @@
+{
+    "name": "ste-tabs",
+    "description": "标签页",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/pc/index/index?name=tabs",
+    "attributes": [
+        {
+            "name": "active",
+            "description": "当前激活的选项支持v-model:active双向绑定（类型为number时绑定index，类型为string时绑定name）",
+            "type": "number | string",
+            "default": 0
+        },
+        {
+            "name": "type",
+            "description": "样式风格类型",
+            "type": "string",
+            "default": "line",
+            "values": [
+                {
+                    "name": "line",
+                    "description": "线型"
+                },
+                {
+                    "name": "card",
+                    "description": "卡片型"
+                }
+            ]
+        },
+        {
+            "name": "showImage",
+            "description": "是否显示图片",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "showTitle",
+            "description": "是否显示主标题",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "showSubtitle",
+            "description": "是否显示副标题",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "color",
+            "description": "主题色（滑块颜色，边框颜色，选中的背景色，激活下拉列表中选项颜色）",
+            "type": "string",
+            "default": "#0090FF"
+        },
+        {
+            "name": "background",
+            "description": "背景",
+            "type": "string"
+        },
+        {
+            "name": "radius",
+            "description": "圆角,单位RPX",
+            "type": "number | string",
+            "default": 0
+        },
+        {
+            "name": "duration",
+            "description": "动画时间，单位秒，设置为 0 可以禁用动画",
+            "type": "number | string",
+            "default": 0.3
+        },
+        {
+            "name": "showLine",
+            "description": "底部条是否显示（显示副标题的情况下会自动隐藏）",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "lineWidth",
+            "description": "底部条宽度，默认单位rpx",
+            "type": "number | string",
+            "default": 52
+        },
+        {
+            "name": "lineHeight",
+            "description": "底部条高度，默认单位rpx",
+            "type": "number | string",
+            "default": 6
+        },
+        {
+            "name": "border",
+            "description": "是否显示标签栏外边框，仅在 type=line 时有效",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "ellipsis",
+            "description": "是否省略过长的标题文字",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "tabWidth",
+            "description": "tab内容的宽度",
+            "type": "number | string",
+            "default": "auto"
+        },
+        {
+            "name": "tabPadding",
+            "description": "选项内边距，默认24，单位rpx",
+            "type": "number | string",
+            "default": 24
+        },
+        {
+            "name": "tabSpace",
+            "description": "tab间距rpx",
+            "type": "number | string",
+            "default": 0
+        },
+        {
+            "name": "divideNum",
+            "description": "tab等分数量，设置为 0 ，则不等分",
+            "type": "number | string",
+            "default": 4
+        },
+        {
+            "name": "sticky",
+            "description": "是否使用粘性布局",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "offsetTop",
+            "description": "粘性布局下吸顶时与顶部的距离，单位rpx",
+            "type": "number | string",
+            "default": 0
+        },
+        {
+            "name": "swipeable",
+            "description": "是否开启手势左右滑动切换",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "titleColor",
+            "description": "主标题字体颜色和下拉列表中选项颜色",
+            "type": "string",
+            "default": "#000000"
+        },
+        {
+            "name": "activeTitleColor",
+            "description": "激活主标题字体颜色",
+            "type": "string",
+            "default": "#000000"
+        },
+        {
+            "name": "titleHeight",
+            "description": "主标题高度",
+            "type": "number | string",
+            "default": 48
+        },
+        {
+            "name": "subColor",
+            "description": "子标题字体颜色和下拉列表中选项颜色",
+            "type": "string",
+            "default": "#000000"
+        },
+        {
+            "name": "activeSubColor",
+            "description": "激活子标题字体颜色和下拉列表中选项颜色",
+            "type": "string",
+            "default": "#ffffff"
+        },
+        {
+            "name": "subTitleHeight",
+            "description": "子标题高度",
+            "type": "number | string",
+            "default": 42
+        },
+        {
+            "name": "subTitleRadius",
+            "description": "子标题圆角",
+            "type": "number | string",
+            "default": 21
+        },
+        {
+            "name": "imageWidth",
+            "description": "图片宽度，默认80，单位rpx",
+            "type": "number | string",
+            "default": 80
+        },
+        {
+            "name": "imageHeight",
+            "description": "图片高度，默认80，单位rpx",
+            "type": "number | string",
+            "default": 80
+        },
+        {
+            "name": "imageRadius",
+            "description": "图片圆角，默认50%，单位rpx",
+            "type": "number | string",
+            "default": "50%"
+        },
+        {
+            "name": "imageBorderWidth",
+            "description": "选中图片边框宽度，默认4，单位rpx",
+            "type": "number | string",
+            "default": 4
+        },
+        {
+            "name": "showGapLine",
+            "description": "是否显示分隔符",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "lock",
+            "description": "是否锁定tab(无法切换)",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用tab(所有功能失效)",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "pullDown",
+            "description": "是否有下拉选择按钮",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "placeholder",
+            "description": "下拉占位符",
+            "type": "string",
+            "default": "请选择"
+        },
+        {
+            "name": "maskTop",
+            "description": "下拉蒙层顶部距离",
+            "type": "number | string",
+            "default": 0
+        },
+        {
+            "name": "maskRight",
+            "description": "下拉蒙层右侧距离",
+            "type": "number | string",
+            "default": 0
+        },
+        {
+            "name": "maskBottom",
+            "description": "下拉蒙层底部距离",
+            "type": "number | string",
+            "default": 0
+        },
+        {
+            "name": "maskLeft",
+            "description": "下拉蒙层左侧距离",
+            "type": "number | string",
+            "default": 0
+        },
+        {
+            "name": "maskZindex",
+            "description": "下拉蒙层层级",
+            "type": "number | string",
+            "default": 1001
+        },
+        {
+            "name": "[event]click-tab",
+            "description": "点击tab触发",
+            "type": "(tab:TabProps)=>void"
+        },
+        {
+            "name": "[event]change",
+            "description": "切换tab触发",
+            "type": "(tab:TabProps)=>void"
+        }
+    ]
+}