limqsh/quinn-accounts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project init & fix ui

Browse Source
This commit is contained in:
limqhz
2023-01-06 14:24:11 +08:00
parent abc4f65a8e
commit ac9b479805
866 changed files with 39916 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
miniprogram_npm/tdesign-miniprogram/tabs/README.en-US.md Normal file
View File

@@ -0,0 +1,38 @@
:: BASE_DOC ::
## API
### Tabs Props
name | type | default | description | required
-- | -- | -- | -- | --
animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
custom-style `v0.25.0` | String | - | \- | N
external-classes | Array | - | `['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
placement | String | top | options：left/top | N
show-bottom-line | Boolean | true | \- | N
space-evenly | Boolean | true | \- | N
sticky | Boolean | false | \- | N
sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
swipeable | Boolean | true | \- | N
theme | String | 'line' | options：line/tag/card | N
value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
default-value | String / Number | undefined | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
### Tabs Events
name | params | description
-- | -- | --
change | `(value: TabValue, label: string)` | \-
click | `(value: TabValue, label: string)` | \-
scroll | `(scrollTop: number, isFixed: boolean)` | \-
### TabPanel Props
name | type | default | description | required
-- | -- | -- | -- | --
badge-props | Object | null | \- | N
destroy-on-hide | Boolean | true | \- | N
disabled | Boolean | false | \- | N
label | String | - | \- | N
panel | String / Slot | - | \- | N
value | String / Number | - | Typescript：`TabValue` | N

142
miniprogram_npm/tdesign-miniprogram/tabs/README.md Normal file
View File

@@ -0,0 +1,142 @@
---
title: Tabs 选项卡
description: 用于内容分类后的展示切换。
spline: navigation
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-80%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-tabs": "tdesign-miniprogram/tabs/tabs",
"t-tab-panel": "tdesign-miniprogram/tabs/tab-panel"
}
```
## 代码演示
### 基础选项卡
{{ base }}
### 等距选项卡
{{ scroll }}
### 带徽章选项卡
{{ with-badge }}
### 带内容区选项卡
{{ with-content }}
### 选项卡状态
{{ status }}
### 选项卡尺寸
{{ size }}
### 选项卡样式
使用 theme 属性可以变换风格，支持 line = 线条（默认）；tag = 标签；card = 卡片
{{ theme }}
<!-- 横向选项卡支持超过屏幕滑动 -->
<img src="https://tdesign.gtimg.com/miniprogram/readme/tabs-3.png" width="375px" height="50%">
### 受控用法
```html
<t-tabs value="{{value}}" bind:change="onTabsChange">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
</t-tabs>
```
```js
Page({
data: {
value: '0',
},
onTabsChange(e) {
this.setData({ value: e.detail.value })
},
});
```
### 与 Popup 使用
```html
<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange">
<t-tabs id="tabs" defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
<t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
</t-tabs>
</t-popup>
```
```js
Page({
data: {
visible: false
},
showPopup() {
this.setData({
visible: true
}, () => {
const tabs = this.selectComponent('tabs');
tabs.setTrack(); // 这一步很重要，因为小程序的无法正确执行生命周期，所以需要手动设置下 tabs 的滑块
})
}
})
```
## API
### Tabs Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名。`['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
placement | String | top | 选项卡位置。可选项：left/top | N
show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
sticky | Boolean | false | 是否开启粘性布局 | N
sticky-props | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
swipeable | Boolean | true | 是否可以滑动切换 | N
theme | String | 'line' | 标签的样式。可选项：line/tag/card | N
value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
### Tabs Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时触发
click | `(value: TabValue, label: string)` | 点击选项卡时触发
scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
### TabPanel Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
custom-style | String | - | 自定义组件样式 | N
badge-props | Object | null | 透传至 Badge 组件 | N
destroy-on-hide | Boolean | true | 【实现有误，暂不支持】选项卡内容隐藏时是否销毁 | N
disabled | Boolean | false | 是否禁用当前选项卡 | N
label | String | - | 选项卡名称 | N
panel | String / Slot | - | 用于自定义选项卡面板内容 | N
value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N

3
miniprogram_npm/tdesign-miniprogram/tabs/props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdTabsProps } from './type';
declare const props: TdTabsProps;
export default props;

47
miniprogram_npm/tdesign-miniprogram/tabs/props.js Normal file
View File

@@ -0,0 +1,47 @@
const props = {
animation: {
type: Object,
},
customStyle: {
type: String,
value: '',
},
externalClasses: {
type: Array,
},
placement: {
type: String,
value: 'top',
},
showBottomLine: {
type: Boolean,
value: true,
},
spaceEvenly: {
type: Boolean,
value: true,
},
sticky: {
type: Boolean,
value: false,
},
stickyProps: {
type: Object,
},
swipeable: {
type: Boolean,
value: true,
},
theme: {
type: String,
value: 'line',
},
value: {
type: null,
value: null,
},
defaultValue: {
type: null,
},
};
export default props;

3
miniprogram_npm/tdesign-miniprogram/tabs/tab-panel-props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdTabPanelProps } from './type';
declare const props: TdTabPanelProps;
export default props;

29
miniprogram_npm/tdesign-miniprogram/tabs/tab-panel-props.js Normal file
View File

@@ -0,0 +1,29 @@
const props = {
badgeProps: {
type: Object,
value: null,
},
customStyle: {
type: String,
value: '',
},
destroyOnHide: {
type: Boolean,
value: true,
},
disabled: {
type: Boolean,
value: false,
},
label: {
type: String,
value: '',
},
panel: {
type: String,
},
value: {
type: null,
},
};
export default props;

19
miniprogram_npm/tdesign-miniprogram/tabs/tab-panel.d.ts vendored Normal file
View File

@@ -0,0 +1,19 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class TabPanel extends SuperComponent {
relations: RelationsOptions;
properties: import("./type").TdTabPanelProps;
data: {
prefix: string;
classPrefix: string;
active: boolean;
hide: boolean;
id: string;
};
setId(id: any): void;
observers: {
label(): void;
};
getComputedName(): string;
update(): void;
render(active: Boolean, parent: any): void;
}

61
miniprogram_npm/tdesign-miniprogram/tabs/tab-panel.js Normal file
View File

@@ -0,0 +1,61 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import props from './tab-panel-props';
import config from '../common/config';
const { prefix } = config;
const name = `${prefix}-tab-panel`;
let TabPanel = class TabPanel extends SuperComponent {
constructor() {
super(...arguments);
this.relations = {
'./tabs': {
type: 'ancestor',
linked(parent) {
this.parent = parent;
},
},
};
this.properties = props;
this.data = {
prefix,
classPrefix: name,
active: false,
hide: true,
id: '',
};
this.observers = {
label() {
this.update();
},
};
}
setId(id) {
this.setData({ id });
}
getComputedName() {
if (this.properties.value != null) {
return `${this.properties.value}`;
}
return `${this.index}`;
}
update() {
if (this.parent) {
this.parent.updateTabs();
}
}
render(active, parent) {
this.setData({
active,
hide: !parent.animated && !active,
});
}
};
TabPanel = __decorate([
wxComponent()
], TabPanel);
export default TabPanel;

4
miniprogram_npm/tdesign-miniprogram/tabs/tab-panel.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

10
miniprogram_npm/tdesign-miniprogram/tabs/tab-panel.wxml Normal file
View File

@@ -0,0 +1,10 @@
<wxs src="../common/utils.wxs" module="utils" />
<view
class="{{classPrefix}} {{active ? prefix + '-is-active': ''}}"
style="{{ customStyle }}; {{ hide ? 'display: none' : ''}}"
id="{{id}}"
aria-role="tabpanel"
>
<view wx:if="{{panel}}">{{panel}}</view>
<slot />
</view>

38
miniprogram_npm/tdesign-miniprogram/tabs/tab-panel.wxss Normal file
View File

@@ -0,0 +1,38 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
:host {
flex-shrink: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.t-tab-panel {
background: var(--td-bg-color,#fff);
height: inherit;
width: inherit;
}

50
miniprogram_npm/tdesign-miniprogram/tabs/tabs.d.ts vendored Normal file
View File

@@ -0,0 +1,50 @@
/// <reference types="miniprogram-api-typings" />
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Tabs extends SuperComponent {
behaviors: string[];
externalClasses: string[];
relations: RelationsOptions;
properties: import("./type").TdTabsProps;
controlledProps: {
key: string;
event: string;
}[];
observers: {
value(name: any): void;
placement(): void;
};
data: {
prefix: string;
classPrefix: string;
tabs: any[];
currentIndex: number;
trackStyle: string;
isScrollX: boolean;
isScrollY: boolean;
direction: string;
offset: number;
tabID: string;
};
lifetimes: {
created(): void;
attached(): void;
};
initChildId(): void;
methods: {
adjustPlacement(): void;
};
updateTabs(cb: any): void;
setCurrentIndexByName(name: any): void;
setCurrentIndex(index: number): void;
getCurrentName(): any;
calcScrollOffset(containerWidth: number, targetLeft: number, targetWidth: number, offset: number): number;
getTrackSize(): Promise<number>;
setTrack(): Promise<void>;
onTabTap(event: any): void;
onTouchStart(event: any): void;
onTouchMove(event: any): void;
onTouchEnd(): void;
onTouchScroll(event: WechatMiniprogram.CustomEvent): void;
changeIndex(index: any): void;
getAvailableTabIndex(deltaX: number): number;
}

280
miniprogram_npm/tdesign-miniprogram/tabs/tabs.js Normal file
View File

@@ -0,0 +1,280 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { SuperComponent, wxComponent } from '../common/src/index';
import props from './props';
import config from '../common/config';
import touch from '../mixins/touch';
import { getRect, uniqueFactory } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-tabs`;
const getUniqueID = uniqueFactory('tabs');
var Position;
(function (Position) {
Position["top"] = "top";
Position["right"] = "right";
Position["bottom"] = "bottom";
Position["left"] = "left";
})(Position || (Position = {}));
let Tabs = class Tabs extends SuperComponent {
constructor() {
super(...arguments);
this.behaviors = [touch];
this.externalClasses = [`${prefix}-class`, `${prefix}-class-item`, `${prefix}-class-active`, `${prefix}-class-track`];
this.relations = {
'./tab-panel': {
type: 'descendant',
linked(target) {
this.children.push(target);
this.initChildId();
target.index = this.children.length - 1;
this.updateTabs();
},
unlinked(target) {
this.children = this.children.filter((item) => item.index !== target.index);
this.updateTabs(() => this.setTrack());
this.initChildId();
},
},
};
this.properties = props;
this.controlledProps = [
{
key: 'value',
event: 'change',
},
];
this.observers = {
value(name) {
if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name);
}
},
placement() {
this.adjustPlacement();
},
};
this.data = {
prefix,
classPrefix: name,
tabs: [],
currentIndex: -1,
trackStyle: '',
isScrollX: true,
isScrollY: false,
direction: 'X',
offset: 0,
tabID: '',
};
this.lifetimes = {
created() {
this.children = this.children || [];
},
attached() {
wx.nextTick(() => {
this.setTrack();
});
this.adjustPlacement();
getRect(this, `.${name}`).then((rect) => {
this.containerWidth = rect.width;
});
this.setData({
tabID: getUniqueID(),
});
},
};
this.methods = {
adjustPlacement() {
const { placement } = this.properties;
let isScrollX = false;
let isScrollY = false;
if (placement === Position.top || placement === Position.bottom) {
isScrollX = true;
}
else {
isScrollY = true;
}
this.setData({
isScrollX,
isScrollY,
direction: isScrollX ? 'X' : 'Y',
});
},
};
}
initChildId() {
this.children.forEach((item, index) => {
item.setId(`${this.data.tabID}_panel_${index}`);
});
}
updateTabs(cb) {
const { children } = this;
const tabs = children.map((child) => child.data);
this.setData({ tabs }, cb);
this.setCurrentIndexByName(this.properties.value);
}
setCurrentIndexByName(name) {
const { children } = this;
const index = children.findIndex((child) => child.getComputedName() === `${name}`);
if (index > -1) {
this.setCurrentIndex(index);
}
}
setCurrentIndex(index) {
if (index <= -1 || index >= this.children.length)
return;
this.children.forEach((child, idx) => {
const isActive = index === idx;
if (isActive !== child.data.active) {
child.render(isActive, this);
}
});
if (this.data.currentIndex === index)
return;
this.setData({
currentIndex: index,
});
this.setTrack();
}
getCurrentName() {
if (this.children) {
const activeTab = this.children[this.data.currentIndex];
if (activeTab) {
return activeTab.getComputedName();
}
}
}
calcScrollOffset(containerWidth, targetLeft, targetWidth, offset) {
return offset + targetLeft - (1 / 2) * containerWidth + targetWidth / 2;
}
getTrackSize() {
// return new Promise((resolve) => {
// if (this.trackWidth) {
// resolve(this.trackWidth);
// return;
// }
// getRect(this, `.${prefix}-tabs__track`).then((res) => {
// if (res) {
// this.trackWidth = res.width;
// resolve(this.trackWidth);
// }
// });
// });
}
setTrack() {
return __awaiter(this, void 0, void 0, function* () {
if (!this.properties.showBottomLine)
return;
const { children } = this;
if (!children)
return;
const { currentIndex, isScrollX, direction } = this.data;
if (currentIndex <= -1)
return;
try {
const res = yield getRect(this, `.${prefix}-tabs__item`, true);
const rect = res[currentIndex];
if (!rect)
return;
let count = 0;
let distance = 0;
let totalSize = 0;
res.forEach((item) => {
if (count < currentIndex) {
distance += isScrollX ? item.width : item.height;
count += 1;
}
totalSize += isScrollX ? item.width : item.height;
});
if (this.containerWidth) {
const offset = this.calcScrollOffset(this.containerWidth, rect.left, rect.width, this.data.offset);
const maxOffset = totalSize - this.containerWidth;
this.setData({
offset: Math.min(Math.max(offset, 0), maxOffset),
});
}
if (isScrollX) {
const trackLineWidth = yield this.getTrackSize();
distance += (rect.width - trackLineWidth) / 2;
}
let trackStyle = `-webkit-transform: translate${direction}(${distance}px);
transform: translate${direction}(${distance}px);
`;
if (!isScrollX) {
trackStyle += `height: ${rect.height}px;`;
}
this.setData({
trackStyle,
});
}
catch (err) {
this.triggerEvent('error', err);
}
});
}
onTabTap(event) {
const { index } = event.currentTarget.dataset;
this.changeIndex(index);
}
onTouchStart(event) {
if (!this.properties.swipeable)
return;
this.touchStart(event);
}
onTouchMove(event) {
if (!this.properties.swipeable)
return;
this.touchMove(event);
}
onTouchEnd() {
if (!this.properties.swipeable)
return;
const { direction, deltaX, offsetX } = this;
const minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
const index = this.getAvailableTabIndex(deltaX);
if (index !== -1) {
this.changeIndex(index);
}
}
}
onTouchScroll(event) {
this._trigger('scroll', event.detail);
}
changeIndex(index) {
const currentTab = this.data.tabs[index];
const { value, label } = currentTab;
if (!(currentTab === null || currentTab === void 0 ? void 0 : currentTab.disabled) && index !== this.data.currentIndex) {
this._trigger('change', { value, label });
}
this._trigger('click', { value, label });
}
getAvailableTabIndex(deltaX) {
const step = deltaX > 0 ? -1 : 1;
const { currentIndex, tabs } = this.data;
const len = tabs.length;
for (let i = step; currentIndex + step >= 0 && currentIndex + step < len; i += step) {
const newIndex = currentIndex + i;
if (newIndex >= 0 && newIndex < len && tabs[newIndex] && !tabs[newIndex].disabled) {
return newIndex;
}
}
return -1;
}
};
Tabs = __decorate([
wxComponent()
], Tabs);
export default Tabs;

7
miniprogram_npm/tdesign-miniprogram/tabs/tabs.json Normal file
View File

@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-sticky": "../sticky/sticky",
"t-badge": "../badge/badge"
}
}

67
miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxml Normal file
View File

@@ -0,0 +1,67 @@
<import src="../common/template/badge.wxml" />
<wxs src="./tabs.wxs" module="filters" />
<wxs src="../common/utils.wxs" module="_" />
<view style="{{ customStyle }}" class="{{_.cls(classPrefix, [placement])}} {{prefix}}-class">
<t-sticky
t-class="{{_.cls(classPrefix + '__sticky', [placement])}}"
disabled="{{ !sticky }}"
z-index="{{ stickyProps.zIndex || '1' }}"
offset-top="{{ stickyProps.offsetTop }}"
container="{{ stickyProps.container }}"
bind:scroll="onTouchScroll"
>
<view class="{{_.cls(classPrefix + '__wrapper', [theme])}}">
<scroll-view
class="{{_.cls(classPrefix + '__scroll', [placement])}}"
enable-flex
scroll-left="{{offset}}"
scroll-x="{{isScrollX}}"
scroll-y="{{isScrollY}}"
scroll-with-animation
>
<view class="{{_.cls(classPrefix + '__nav', [placement])}}" aria-role="tablist">
<view
wx:for="{{tabs}}"
wx:key="index"
data-index="{{index}}"
class="{{_.cls(classPrefix + '__item', [theme, ['evenly', spaceEvenly], placement, ['disabled', item.disabled], ['active', currentIndex === index]])}} {{currentIndex === index ? prefix + '-class-active' : ''}} {{prefix}}-class-item"
bind:tap="onTabTap"
aria-role="tab"
aria-controls="{{tabID + '_panel_' + index}}"
aria-selected="{{currentIndex === index}}"
aria-disabled="{{item.disabled}}"
>
<view class="{{_.cls(classPrefix + '__item-inner', [theme, ['active', currentIndex === index]])}}">
<block wx:if="{{item.badgeProps}}">
<template is="badge" data="{{ ...item.badgeProps, content: item.label }}" />
</block>
<block wx:else>{{item.label}}</block>
</view>
<view wx:if="{{theme == 'card' && currentIndex - 1 == index}}" class="{{classPrefix}}__item-prefix" />
<view wx:if="{{theme == 'card' && currentIndex + 1 == index}}" class="{{classPrefix}}__item-suffix" />
</view>
<view
wx:if="{{theme == 'line' && showBottomLine}}"
class="{{_.cls(classPrefix + '__track', [placement])}} {{prefix}}-class-track"
style="{{trackStyle}}"
/>
</view>
</scroll-view>
</view>
</t-sticky>
<view
class="{{_.cls(classPrefix + '__content', [['animated', animation]])}}"
bind:touchstart="onTouchStart"
bind:touchmove="onTouchMove"
bind:touchend="onTouchEnd"
bind:touchcancel="onTouchEnd"
>
<view
class="{{classPrefix}}__content-inner"
style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex, direction}) }}"
>
<slot />
</view>
</view>
</view>

20
miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxs Normal file
View File

@@ -0,0 +1,20 @@
/* eslint-disable */
function animate(options) {
var result = [];
if (options.duration) {
result.push('transition-duration: ' + options.duration + 's');
result.push(
options.direction === 'Y'
? ';transform: translate3d( 0,' + -100 * options.currentIndex + '%, 0)'
: ';transform: translate3d( ' + -100 * options.currentIndex + '%,0, 0)',
);
}
return result.join(';');
}
module.exports = {
animate: animate,
};

260
miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxss Normal file
View File

@@ -0,0 +1,260 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-tabs {
position: relative;
font-size: var(--tab-font-size, 28rpx);
background: var(--td-tab-nav-bg-color, var(--td-bg-color-block, #fff));
}
.t-tabs__wrapper {
display: flex;
overflow: hidden;
background: var(--td-tab-nav-bg-color, var(--td-bg-color-block, #fff));
}
.t-tabs__wrapper--card {
background: var(--td-bg-color-block);
--td-tab-border-color: transparent;
}
.t-tabs__item {
position: relative;
display: flex;
flex: none;
align-items: center;
justify-content: center;
font-weight: 400;
color: var(--td-tab-item-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
padding: 0 32rpx;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
}
.t-tabs__item--active {
font-weight: 600;
color: var(--td-tab-item-active-color, var(--td-primary-color, #0052d9));
}
.t-tabs__item--disabled {
color: var(--td-tab-item-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}
.t-tabs__item--evenly {
flex: 1;
}
.t-tabs__item--top,
.t-tabs__item--bottom {
height: var(--td-tab-item-height, 96rpx);
}
.t-tabs__item--left,
.t-tabs__item--right {
height: var(--td-tab-item-vertical-height, 108rpx);
line-height: var(--td-tab-item-vertical-height, 108rpx);
width: var(--td-tab-item-vertical-width, 208rpx);
background-color: #f3f3f3;
}
.t-tabs__item--left.t-is-active,
.t-tabs__item--right.t-is-active {
background-color: #fff;
}
.t-tabs__item-inner--tag {
width: 100%;
text-align: center;
padding: 0 32rpx;
line-height: var(--td-tab-item-tag-height, 64rpx);
border-radius: calc(var(--td-tab-item-tag-height, 64rpx) / 2);
background-color: var(--td-tab-item-tag-bg, var(--td-gray-color-1, #f3f3f3));
}
.t-tabs__item-inner--active.t-tabs__item-inner--tag {
background-color: var(--td-tab-item-tag-active-bg, var(--td-primary-color-1, #ecf2fe));
}
.t-tabs__item--tag:not(.t-tabs__item--evenly) {
padding: 0 8rpx;
}
.t-tabs__item--tag:not(.t-tabs__item--evenly):first-child {
margin-left: 16rpx;
}
.t-tabs__item--tag:not(.t-tabs__item--evenly):last-child {
padding-right: 24rpx;
}
.t-tabs__item--tag {
padding: 0 16rpx;
}
.t-tabs__item--card.t-tabs__item--active {
background-color: var(--td-color-block-check, #fff);
border-radius: 18rpx 18rpx 0 0;
}
.t-tabs__item--card.t-tabs__item--active:first-child {
border-top-left-radius: 0;
}
.t-tabs__item--card.t-tabs__item--active:last-child {
border-top-right-radius: 0;
}
.t-tabs__item--card.t-tabs__item--pre {
border-bottom-right-radius: 18rpx;
}
.t-tabs__item-prefix,
.t-tabs__item-suffix {
position: absolute;
bottom: 0;
width: 36rpx;
height: 36rpx;
/*background: #fff;*/
}
.t-tabs__item-prefix::after,
.t-tabs__item-suffix::after {
content: '';
display: block;
width: 100%;
height: 100%;
/*background-color: var(--td-gray-color-1, #f3f3f3);*/
}
.t-tabs__item-prefix {
right: 0;
}
.t-tabs__item-prefix::after {
border-bottom-right-radius: 18rpx;
}
.t-tabs__item-suffix {
left: 0;
}
.t-tabs__item-suffix::after {
border-bottom-left-radius: 18rpx;
}
.t-tabs__content {
overflow: hidden;
}
.t-tabs__nav {
position: relative;
user-select: none;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.t-tabs__nav--left,
.t-tabs__nav--right {
flex-direction: column;
}
.t-tabs__track {
position: absolute;
font-weight: 600;
z-index: 1;
transition-duration: 0.3s;
background-color: var(--td-tab-track-color, var(--td-primary-color, #0052d9));
}
.t-tabs__track--left {
left: 0;
top: 0;
width: var(--td-tab-track-thickness, 6rpx);
}
.t-tabs__track--right {
right: 0;
top: 0;
width: var(--td-tab-track-thickness, 6rpx);
}
.t-tabs__track--top,
.t-tabs__track--bottom {
left: 0;
bottom: 0;
width: var(--td-tab-track-width, 32rpx);
height: var(--td-tab-track-thickness, 6rpx);
border-radius: var(--td-tab-track-radius, 8rpx);
}
.t-tabs__scroll--top,
.t-tabs__scroll--bottom {
height: var(--td-tab-item-height, 96rpx);
position: relative;
}
.t-tabs__scroll--top {
position: relative;
}
.t-tabs__scroll--top::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-tab-border-color, var(--td-gray-color-3, #e7e7e7));
}
.t-tabs__scroll--top::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-tabs__scroll--left,
.t-tabs__scroll--right {
width: var(--td-tab-item-vertical-width, 208rpx);
max-height: 100vh;
}
.t-tabs__content-inner {
display: block;
}
.t-tabs--top,
.t-tabs--bottom {
flex-wrap: wrap;
}
.t-tabs--top .t-tabs__content,
.t-tabs--bottom .t-tabs__content {
width: 100%;
}
.t-tabs--top .t-tabs__content--animated .t-tabs__content-inner,
.t-tabs--bottom .t-tabs__content--animated .t-tabs__content-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
will-change: left;
transition-property: transform;
}
.t-tabs--bottom {
flex-direction: column-reverse;
}
.t-tabs--left .t-tabs__sticky--left,
.t-tabs--right .t-tabs__sticky--left {
width: var(--td-tab-item-vertical-width, 208rpx);
}
.t-tabs--left .t-tabs__content-inner,
.t-tabs--right .t-tabs__content-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
transition-property: transform;
}
.t-tabs--left .t-tabs__content,
.t-tabs--right .t-tabs__content {
width: calc(100% - var(--td-tab-item-vertical-width, 208rpx));
height: 100%;
position: absolute;
top: 0;
left: var(--td-tab-item-vertical-width, 208rpx);
overflow: hidden;
}
.t-tabs--right {
flex-direction: row-reverse;
}

85
miniprogram_npm/tdesign-miniprogram/tabs/type.d.ts vendored Normal file
View File

@@ -0,0 +1,85 @@
import { StickyProps } from '../sticky/index';
export interface TdTabsProps {
animation?: {
type: ObjectConstructor;
value?: TabAnimation;
};
customStyle?: {
type: StringConstructor;
value?: string;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-item', 't-class-active', 't-class-track'];
};
placement?: {
type: StringConstructor;
value?: 'left' | 'top';
};
showBottomLine?: {
type: BooleanConstructor;
value?: boolean;
};
spaceEvenly?: {
type: BooleanConstructor;
value?: boolean;
};
sticky?: {
type: BooleanConstructor;
value?: boolean;
};
stickyProps?: {
type: ObjectConstructor;
value?: StickyProps;
};
swipeable?: {
type: BooleanConstructor;
value?: boolean;
};
theme?: {
type: StringConstructor;
value?: 'line' | 'tag' | 'card';
};
value?: {
type: null;
value?: TabValue;
};
defaultValue?: {
type: null;
value?: TabValue;
};
}
export interface TdTabPanelProps {
badgeProps?: {
type: ObjectConstructor;
value?: object;
};
customStyle?: {
type: StringConstructor;
value?: string;
};
destroyOnHide?: {
type: BooleanConstructor;
value?: boolean;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
label?: {
type: StringConstructor;
value?: string;
};
panel?: {
type: StringConstructor;
value?: string;
};
value?: {
type: null;
value?: TabValue;
};
}
export declare type TabAnimation = {
duration: number;
} & Record<string, any>;
export declare type TabValue = string | number;

1
miniprogram_npm/tdesign-miniprogram/tabs/type.js Normal file
View File

@@ -0,0 +1 @@
export {};