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

白色主题

Browse Source
This commit is contained in:
limqhz
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
miniprogram_npm/tdesign-miniprogram/tabs/README.en-US.md
View File

@@ -6,15 +6,14 @@
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
custom-style | String | - | `0.25.0` | 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
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
@@ -31,8 +30,10 @@ scroll | `(scrollTop: number, isFixed: boolean)` | \-
name | type | default | description | required
-- | -- | -- | -- | --
badge-props | Object | null | \- | N
custom-style | String | - | `0.25.0` | N
destroy-on-hide | Boolean | true | \- | N
disabled | Boolean | false | \- | N
icon | String / Object | - | `1.0.0-rc.1` | N
label | String | - | \- | N
panel | String / Slot | - | \- | N
value | String / Number | - | Typescript：`TabValue` | N
value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N

16
miniprogram_npm/tdesign-miniprogram/tabs/README.md
View File

@@ -13,7 +13,7 @@ isComponent: true
```json
"usingComponents": {
"t-tabs": "tdesign-miniprogram/tabs/tabs",
"t-tab-panel": "tdesign-miniprogram/tabs/tab-panel"
"t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel"
}
```
@@ -27,6 +27,10 @@ isComponent: true
{{ scroll }}
### 带图标选项卡
{{ with-icon }}
### 带徽章选项卡
{{ with-badge }}
@@ -109,15 +113,14 @@ Page({
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
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
custom-style | String | - | `0.25.0`。自定义组件样式 | 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
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
@@ -133,10 +136,11 @@ scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
custom-style | String | - | 自定义组件样式 | N
badge-props | Object | null | 透传至 Badge 组件 | N
custom-style | String | - | `0.25.0`。自定义组件样式 | N
destroy-on-hide | Boolean | true | 【实现有误，暂不支持】选项卡内容隐藏时是否销毁 | N
disabled | Boolean | false | 是否禁用当前选项卡 | N
icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
label | String | - | 选项卡名称 | N
panel | String / Slot | - | 用于自定义选项卡面板内容 | N
value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N
value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N

6
miniprogram_npm/tdesign-miniprogram/tabs/props.js
View File

@@ -2,17 +2,13 @@ const props = {
animation: {
type: Object,
},
customStyle: {
style: {
type: String,
value: '',
},
externalClasses: {
type: Array,
},
placement: {
type: String,
value: 'top',
},
showBottomLine: {
type: Boolean,
value: true,

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

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

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

@@ -1,29 +0,0 @@
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
View File

@@ -1,19 +0,0 @@
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
View File

@@ -1,61 +0,0 @@
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
View File

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

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

@@ -1,10 +0,0 @@
<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
View File

@@ -1,38 +0,0 @@
.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);
height: inherit;
width: inherit;
}

38
miniprogram_npm/tdesign-miniprogram/tabs/tabs.d.ts vendored
View File

@@ -1,17 +1,18 @@
/// <reference types="miniprogram-api-typings" />
import { SuperComponent, RelationsOptions } from '../common/src/index';
import { TdTabsProps } from './type';
export interface TabsProps extends TdTabsProps {
}
export default class Tabs extends SuperComponent {
behaviors: string[];
externalClasses: string[];
relations: RelationsOptions;
properties: import("./type").TdTabsProps;
properties: TdTabsProps;
controlledProps: {
key: string;
event: string;
}[];
observers: {
value(name: any): void;
placement(): void;
};
data: {
prefix: string;
@@ -20,10 +21,10 @@ export default class Tabs extends SuperComponent {
currentIndex: number;
trackStyle: string;
isScrollX: boolean;
isScrollY: boolean;
direction: string;
offset: number;
tabID: string;
placement: string;
};
lifetimes: {
created(): void;
@@ -31,20 +32,19 @@ export default class Tabs extends SuperComponent {
};
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): any;
};
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;
}

342
miniprogram_npm/tdesign-miniprogram/tabs/tabs.js
View File

@@ -21,20 +21,13 @@ 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': {
'../tab-panel/tab-panel': {
type: 'descendant',
linked(target) {
this.children.push(target);
@@ -62,9 +55,6 @@ let Tabs = class Tabs extends SuperComponent {
this.setCurrentIndexByName(name);
}
},
placement() {
this.adjustPlacement();
},
};
this.data = {
prefix,
@@ -73,10 +63,10 @@ let Tabs = class Tabs extends SuperComponent {
currentIndex: -1,
trackStyle: '',
isScrollX: true,
isScrollY: false,
direction: 'X',
offset: 0,
tabID: '',
placement: 'top',
};
this.lifetimes = {
created() {
@@ -86,7 +76,6 @@ let Tabs = class Tabs extends SuperComponent {
wx.nextTick(() => {
this.setTrack();
});
this.adjustPlacement();
getRect(this, `.${name}`).then((rect) => {
this.containerWidth = rect.width;
});
@@ -96,21 +85,164 @@ let Tabs = class Tabs extends SuperComponent {
},
};
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',
updateTabs(cb) {
const { children } = this;
const tabs = children.map((child) => child.data);
tabs.forEach((item) => {
if (typeof item.icon === 'string') {
item.icon = { name: item.icon };
}
});
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;
},
};
}
@@ -119,162 +251,6 @@ let Tabs = class Tabs extends SuperComponent {
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);
}
}).catch(reason => {
console.log(reason)
});
});
}
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()

3
miniprogram_npm/tdesign-miniprogram/tabs/tabs.json
View File

@@ -2,6 +2,7 @@
"component": true,
"usingComponents": {
"t-sticky": "../sticky/sticky",
"t-badge": "../badge/badge"
"t-badge": "../badge/badge",
"t-icon": "../icon/icon"
}
}

4
miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxml
View File

@@ -1,8 +1,9 @@
<import src="../common/template/badge.wxml" />
<import src="../common/template/icon.wxml" />
<wxs src="./tabs.wxs" module="filters" />
<wxs src="../common/utils.wxs" module="_" />
<view style="{{ customStyle }}" class="{{_.cls(classPrefix, [placement])}} {{prefix}}-class">
<view style="{{ style }}" class="{{_.cls(classPrefix, [placement])}} {{prefix}}-class">
<t-sticky
t-class="{{_.cls(classPrefix + '__sticky', [placement])}}"
disabled="{{ !sticky }}"
@@ -33,6 +34,7 @@
aria-disabled="{{item.disabled}}"
>
<view class="{{_.cls(classPrefix + '__item-inner', [theme, ['active', currentIndex === index]])}}">
<template wx:if="{{item.icon}}" is="icon" data="{{ class: classPrefix + '__icon', ...item.icon }}" />
<block wx:if="{{item.badgeProps}}">
<template is="badge" data="{{ ...item.badgeProps, content: item.label }}" />
</block>

70
miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxss
View File

@@ -36,7 +36,7 @@
background: var(--td-tab-nav-bg-color, var(--td-bg-color-block, #fff));
}
.t-tabs__wrapper--card {
background: var(--td-bg-color-block);
background: var(--td-gray-color-1, #f3f3f3);
--td-tab-border-color: transparent;
}
.t-tabs__item {
@@ -66,16 +66,10 @@
.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 {
display: flex;
align-items: center;
justify-content: center;
}
.t-tabs__item-inner--tag {
width: 100%;
@@ -101,7 +95,7 @@
padding: 0 16rpx;
}
.t-tabs__item--card.t-tabs__item--active {
background-color: var(--td-color-block-check, #fff);
background-color: var(--td-bg-color-block, #fff);
border-radius: 18rpx 18rpx 0 0;
}
.t-tabs__item--card.t-tabs__item--active:first-child {
@@ -119,7 +113,7 @@
bottom: 0;
width: 36rpx;
height: 36rpx;
/*background: #fff;*/
background: #fff;
}
.t-tabs__item-prefix::after,
.t-tabs__item-suffix::after {
@@ -127,7 +121,7 @@
display: block;
width: 100%;
height: 100%;
/*background-color: var(--td-gray-color-1, #f3f3f3);*/
background-color: var(--td-gray-color-1, #f3f3f3);
}
.t-tabs__item-prefix {
right: 0;
@@ -141,6 +135,10 @@
.t-tabs__item-suffix::after {
border-bottom-left-radius: 18rpx;
}
.t-tabs__icon {
font-size: var(--td-tab-icon-size, 36rpx);
margin-right: 4rpx;
}
.t-tabs__content {
overflow: hidden;
}
@@ -152,10 +150,6 @@
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;
@@ -163,16 +157,6 @@
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;
@@ -205,11 +189,6 @@
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;
}
@@ -233,28 +212,3 @@
.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;
}

36
miniprogram_npm/tdesign-miniprogram/tabs/type.d.ts vendored
View File

@@ -4,7 +4,7 @@ export interface TdTabsProps {
type: ObjectConstructor;
value?: TabAnimation;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};
@@ -12,10 +12,6 @@ export interface TdTabsProps {
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;
@@ -49,36 +45,6 @@ export interface TdTabsProps {
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>;