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

project init

Browse Source
This commit is contained in:
limqhz
2022-11-11 21:51:57 +08:00
parent e9e20765f2
commit 82dbb842ba
68 changed files with 2771 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/tabs/README.en-US.md Normal file
View File

@@ -0,0 +1,34 @@
:: 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
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
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
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
-- | -- | -- | -- | --
destroy-on-hide | Boolean | true | \- | N
disabled | Boolean | false | \- | N
label | String | - | \- | N
panel | String / Slot | - | \- | N
value | String / Number | - | Typescript：`TabValue` | N

141
components/tabs/README.md Normal file
View File

@@ -0,0 +1,141 @@
---
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"
}
```
## 主题定制
CSS 变量名|说明
--|--
--td-tab-nav-bg-color | 选项卡背景颜色
--td-tab-item-color | 选项卡字体颜色
--td-tab-item-active-color | 选项卡激活时字体颜色
--td-tab-item-disabled-color | 选项卡禁止状态时字体颜色
--td-tab-track-color | 选项卡滑块颜色
--td-tab-track-thickness | 选项卡滑块厚度（水平时为高度，垂直时为宽度）
--td-tab-border-color | 选项卡底部边框颜色
## 代码演示
### 基础选项卡
{{ base }}
### 超过屏幕滚动
{{ scroll }}
### 无下划线
{{ unline }}
### 动画时间可调整
{{ adjust-time }}
### 选项卡状态
{{ status }}
### 竖向选项卡
{{ vertical }}
### 选中态文字尺寸规格
{{ size }}
<!-- 横向选项卡支持超过屏幕滑动 -->
<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
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
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
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)` | 点击 tab 选项卡时触发
scroll | `({ scrollTop: number, isFixed: boolean })` | 页面滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶
### TabPanel Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
destroy-on-hide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
disabled | Boolean | false | 是否禁用当前选项卡 | N
label | String | - | 选项卡名称 | N
panel | String / Slot | - | 用于自定义选项卡面板内容 | N
value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N

3
components/tabs/props.d.ts vendored Normal file
View File

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

35
components/tabs/props.js Normal file
View File

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

3
components/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;

21
components/tabs/tab-panel-props.js Normal file
View File

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

17
components/tabs/tab-panel.d.ts vendored Normal file
View File

@@ -0,0 +1,17 @@
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;
};
observers: {
label(): void;
};
getComputedName(): string;
update(): void;
render(active: Boolean, parent: any): void;
}

54
components/tabs/tab-panel.js Normal file
View File

@@ -0,0 +1,54 @@
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',
},
};
this.properties = props;
this.data = {
prefix,
classPrefix: name,
active: false,
hide: true,
};
this.observers = {
label() {
this.update();
},
};
}
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
components/tabs/tab-panel.json Normal file
View File

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

9
components/tabs/tab-panel.wxml Normal file
View File

@@ -0,0 +1,9 @@
<wxs src="../common/utils.wxs" module="utils" />
<view
wx:if="{{!(destroyOnHide && hide)}}"
class="{{classPrefix}} {{active ? prefix + '-is-active': ''}}"
style="{{hide ? 'display:none;' :''}}"
>
<view wx:if="{{panel}}">{{panel}}</view>
<slot wx:else />
</view>

37
components/tabs/tab-panel.wxss Normal file
View File

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

49
components/tabs/tabs.d.ts vendored Normal file
View File

@@ -0,0 +1,49 @@
/// <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;
animation(v: any): void;
placement(): void;
};
data: {
prefix: string;
classPrefix: string;
tabs: any[];
currentIndex: number;
trackStyle: string;
isScrollX: boolean;
isScrollY: boolean;
direction: string;
animate: {
duration: number;
};
offset: number;
};
created(): void;
attached(): 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, currentIndex: number): number;
setTrack(): 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;
}

241
components/tabs/tabs.js Normal file
View File

@@ -0,0 +1,241 @@
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 dom from '../behaviors/dom';
import touch from '../behaviors/touch';
import { SuperComponent, wxComponent } from '../common/src/index';
import props from './props';
import config from '../common/config';
const { prefix } = config;
const name = `${prefix}-tabs`;
var Position;
(function (Position) {
Position["top"] = "top";
Position["right"] = "right";
Position["bottom"] = "bottom";
Position["left"] = "left";
})(Position || (Position = {}));
const trackLineWidth = 30;
let Tabs = class Tabs extends SuperComponent {
constructor() {
super(...arguments);
this.behaviors = [dom, 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);
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.properties = props;
this.controlledProps = [
{
key: 'value',
event: 'change',
},
];
this.observers = {
value(name) {
if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name);
}
},
animation(v) {
this.setData({ animate: v });
},
placement() {
this.adjustPlacement();
},
};
this.data = {
prefix,
classPrefix: name,
tabs: [],
currentIndex: -1,
trackStyle: '',
isScrollX: true,
isScrollY: false,
direction: 'X',
animate: { duration: 0 },
offset: 0,
};
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',
});
},
};
}
created() {
this.children = this.children || [];
}
attached() {
wx.nextTick(() => {
this.setTrack();
});
this.adjustPlacement();
this.gettingBoundingClientRect(`.${name}`, true).then((res) => {
this.containerWidth = res[0].width;
});
}
updateTabs(cb) {
const { children } = this;
this.setData({
tabs: children.map((child) => child.data),
}, 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, currentIndex) {
return currentIndex * targetWidth - (1 / 2) * containerWidth + targetWidth / 2;
}
setTrack() {
if (!this.properties.showBottomLine)
return;
const { children } = this;
if (!children)
return;
const { currentIndex, isScrollX, direction } = this.data;
if (currentIndex <= -1)
return;
this.gettingBoundingClientRect(`.${prefix}-tabs__item`, true)
.then((res) => {
const rect = res[currentIndex];
if (!rect)
return;
let count = 0;
let distance = 0;
for (const item of res) {
if (count < currentIndex) {
distance += isScrollX ? item.width : item.height;
count += 1;
}
}
if (this.containerWidth) {
const offset = this.calcScrollOffset(this.containerWidth, rect.left, rect.width, this.data.offset, currentIndex);
this.setData({
offset,
});
}
if (isScrollX) {
distance += (rect.width - trackLineWidth) / 2;
}
let trackStyle = `-webkit-transform: translate${direction}(${distance}px);
transform: translate${direction}(${distance}px);
`;
trackStyle += isScrollX ? `width: ${trackLineWidth}px;` : `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;

6
components/tabs/tabs.json Normal file
View File

@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-sticky": "/components/sticky/sticky"
}
}

53
components/tabs/tabs.wxml Normal file
View File

@@ -0,0 +1,53 @@
<wxs src="./tabs.wxs" module="filters" />
<view class="{{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class">
<t-sticky
t-class="{{classPrefix}}__sticky {{classPrefix}}__sticky--{{placement}}"
disabled="{{ !sticky }}"
z-index="{{ stickyProps.zIndex || '1' }}"
offset-top="{{ stickyProps.offsetTop }}"
container="{{ stickyProps.container }}"
bind:scroll="onTouchScroll"
>
<view class="{{classPrefix}}__wrapper">
<scroll-view
class="{{classPrefix}}__scroll {{classPrefix}}__scroll--{{placement}}"
enable-flex
scroll-left="{{offset}}"
scroll-x="{{isScrollX}}"
scroll-y="{{isScrollY}}"
scroll-with-animation
>
<view class="{{classPrefix}}__nav {{classPrefix}}__nav--{{placement}}">
<view
wx:for="{{tabs}}"
wx:key="index"
data-index="{{index}}"
class="{{classPrefix}}__item {{classPrefix}}__item--{{placement}} {{prefix}}-class-item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
bind:tap="onTabTap"
>
{{item.label}}
</view>
<view
class="{{classPrefix}}__track {{classPrefix}}__track--{{placement}} {{prefix}}-class-track"
style="{{trackStyle}}"
/>
</view>
</scroll-view>
</view>
</t-sticky>
<view
class="{{classPrefix}}__content"
bind:touchstart="onTouchStart"
bind:touchmove="onTouchMove"
bind:touchend="onTouchEnd"
bind:touchcancel="onTouchEnd"
>
<view
class="{{classPrefix}}__content-inner "
style="{{ filters.animate({duration: animate.duration,currentIndex:currentIndex, direction}) }}"
>
<slot />
</view>
</view>
</view>

24
components/tabs/tabs.wxs Normal file
View File

@@ -0,0 +1,24 @@
/* eslint-disable */
/* utils */
/**
* animate */
// 为tab切换添加动画
function animate(options) {
var result =
'-webkit-transition-duration: ' +
options.duration +
's' +
';transition-duration: ' +
options.duration +
's';
result +=
options.direction === 'Y'
? ';transform: translate3d( 0,' + -100 * options.currentIndex + '%, 0)'
: ';transform: translate3d( ' + -100 * options.currentIndex + '%,0, 0)';
return result;
}
module.exports = {
animate: animate,
};

175
components/tabs/tabs.wxss Normal file
View File

@@ -0,0 +1,175 @@
.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);
}
page {
--td-tab-nav-bg-color: #fff;
--td-tab-item-color: rgba(0, 0, 0, 0.6);
--td-tab-item-active-color: #0052d9;
--td-tab-item-disabled-color: #c8c9cc;
--td-tab-track-color: #0052d9;
--td-tab-track-thickness: 4rpx;
--td-tab-border-color: rgba(150, 95, 95, 0.12);
}
.t-tabs {
position: relative;
font-size: 28rpx;
background-color: #fff;
}
.t-tabs__wrapper {
display: flex;
overflow: hidden;
}
.t-tabs .t-is-active {
font-weight: 700;
color: var(--td-tab-item-active-color, #0052d9);
}
.t-tabs .t-is-disabled {
color: var(--td-tab-item-disabled-color, #c8c9cc);
}
.t-tabs__item {
flex: 1;
font-weight: 400;
color: var(--td-tab-item-color, rgba(0, 0, 0, 0.6));
}
.t-tabs__item--top,
.t-tabs__item--bottom {
height: 92rpx;
line-height: 92rpx;
text-align: center;
min-width: 162rpx;
}
.t-tabs__item--left,
.t-tabs__item--right {
text-align: center;
height: 108rpx;
line-height: 108rpx;
width: 208rpx;
background-color: #f3f3f3;
}
.t-tabs__item--left.t-is-active,
.t-tabs__item--right.t-is-active {
background-color: #fff;
}
.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, #0052d9);
}
.t-tabs__track--left {
left: 0;
top: 0;
width: var(--td-tab-track-thickness, 4rpx);
}
.t-tabs__track--right {
right: 0;
top: 0;
width: var(--td-tab-track-thickness, 4rpx);
}
.t-tabs__scroll--top,
.t-tabs__scroll--bottom {
height: 92rpx;
position: relative;
background-color: var(--td-tab-nav-bg-color, #fff);
}
.t-tabs__scroll--top::after,
.t-tabs__scroll--bottom::after {
content: '';
}
.t-tabs__scroll--top {
border-bottom: solid 1rpx var(--td-tab-border-color, rgba(150, 95, 95, 0.12));
}
.t-tabs__scroll--left,
.t-tabs__scroll--right {
width: 208rpx;
max-height: 100vh;
}
.t-tabs__content-inner {
display: block;
}
.t-tabs.t-tabs--top,
.t-tabs.t-tabs--bottom {
flex-wrap: wrap;
}
.t-tabs.t-tabs--top .t-tabs__content-inner,
.t-tabs.t-tabs--bottom .t-tabs__content-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
transition-property: transform;
}
.t-tabs.t-tabs--top .t-tabs__track,
.t-tabs.t-tabs--bottom .t-tabs__track {
left: 0;
bottom: 0;
height: var(--td-tab-track-thickness, 4rpx);
}
.t-tabs.t-tabs--top .t-tabs__content,
.t-tabs.t-tabs--bottom .t-tabs__content {
width: 100%;
}
.t-tabs.t-tabs--bottom {
flex-direction: column-reverse;
}
.t-tabs.t-tabs--left .t-tabs__content-inner,
.t-tabs.t-tabs--right .t-tabs__content-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
transition-property: transform;
}
.t-tabs.t-tabs--left .t-tabs__content,
.t-tabs.t-tabs--right .t-tabs__content {
width: calc(100% - 208rpx);
height: 100%;
position: absolute;
top: 0;
left: 208rpx;
overflow: hidden;
}
.t-tabs.t-tabs--right {
flex-direction: row-reverse;
}

65
components/tabs/type.d.ts vendored Normal file
View File

@@ -0,0 +1,65 @@
import { StickyProps } from '../sticky/index';
export interface TdTabsProps {
animation?: {
type: ObjectConstructor;
value?: TabAnimation;
};
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;
};
sticky?: {
type: BooleanConstructor;
value?: boolean;
};
stickyProps?: {
type: ObjectConstructor;
value?: StickyProps;
};
swipeable?: {
type: BooleanConstructor;
value?: boolean;
};
value?: {
type: null;
value?: TabValue;
};
defaultValue?: {
type: null;
value?: TabValue;
};
}
export interface TdTabPanelProps {
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
components/tabs/type.js Normal file
View File

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