diff --git a/src/tab-panel/README.en-US.md b/src/tab-panel/README.en-US.md new file mode 100644 index 000000000..ff9131b43 --- /dev/null +++ b/src/tab-panel/README.en-US.md @@ -0,0 +1,18 @@ +:: BASE_DOC :: + +## API + + +### TabPanel Props + +name | type | default | description | required +-- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +badge-props | Object | - | \- | N +disabled | Boolean | false | \- | N +icon | String / Object | - | \- | N +label | String | - | \- | N +lazy | Boolean | false | Enable tab lazy loading | N +panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 diff --git a/src/tab-panel/README.md b/src/tab-panel/README.md new file mode 100644 index 000000000..f4a66c8b5 --- /dev/null +++ b/src/tab-panel/README.md @@ -0,0 +1,18 @@ +:: BASE_DOC :: + +## API + + +### TabPanel Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +badge-props | Object | - | 透传至 Badge 组件 | N +disabled | Boolean | false | 是否禁用当前选项卡 | N +icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N +label | String | - | 选项卡名称 | N +lazy | Boolean | false | 是否启用选项卡懒加载 | N +panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 diff --git a/src/tab-panel/props.ts b/src/tab-panel/props.ts index 45642a3d6..01dc5aa3a 100644 --- a/src/tab-panel/props.ts +++ b/src/tab-panel/props.ts @@ -24,6 +24,11 @@ const props: TdTabPanelProps = { type: String, value: '', }, + /** 是否启用选项卡懒加载 */ + lazy: { + type: Boolean, + value: false, + }, /** 用于自定义选项卡面板内容 */ panel: { type: String, diff --git a/src/tab-panel/tab-panel.ts b/src/tab-panel/tab-panel.ts index 0ba069003..57534cf2b 100644 --- a/src/tab-panel/tab-panel.ts +++ b/src/tab-panel/tab-panel.ts @@ -34,7 +34,7 @@ export default class TabPanel extends SuperComponent { } observers = { - 'label, badgeProps, disabled, icon, panel, value'() { + 'label, badgeProps, disabled, icon, panel, value, lazy'() { this.update(); }, }; diff --git a/src/tab-panel/tab-panel.wxml b/src/tab-panel/tab-panel.wxml index 5327c0e60..92de9842a 100644 --- a/src/tab-panel/tab-panel.wxml +++ b/src/tab-panel/tab-panel.wxml @@ -1,6 +1,7 @@ `。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N +bottom-line-mode | String | fixed | options: fixed/auto/full | N middle | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N show-bottom-line | Boolean | true | \- | N space-evenly | Boolean | true | \- | N @@ -27,6 +28,7 @@ name | params | description change | `(value: TabValue, label: string)` | \- click | `(value: TabValue, label: string)` | \- scroll | `(scrollTop: number, isFixed: boolean)` | \- + ### Tabs External Classes className | Description @@ -72,4 +74,4 @@ Name | Default Value | Description --td-tab-track-color | @brand-color | - --td-tab-track-radius | 8rpx | - --td-tab-track-thickness | 6rpx | - ---td-tab-track-width | 32rpx | - +--td-tab-track-width | 32rpx | - \ No newline at end of file diff --git a/src/tabs/README.md b/src/tabs/README.md index 9a60ce791..e3d24b63d 100644 --- a/src/tabs/README.md +++ b/src/tabs/README.md @@ -122,6 +122,7 @@ Page({ style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N +bottom-line-mode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N show-bottom-line | Boolean | true | 是否展示底部激活线条 | N space-evenly | Boolean | true | 选项卡头部空间是否均分 | N @@ -140,6 +141,7 @@ default-value | String / Number | undefined | 激活的选项卡值。非受控 change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时触发 click | `(value: TabValue, label: string)` | 点击选项卡时触发 scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发 + ### Tabs External Classes 类名 | 描述 @@ -185,4 +187,4 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV --td-tab-track-color | @brand-color | - --td-tab-track-radius | 8rpx | - --td-tab-track-thickness | 6rpx | - ---td-tab-track-width | 32rpx | - +--td-tab-track-width | 32rpx | - \ No newline at end of file diff --git a/src/tabs/props.ts b/src/tabs/props.ts index 183032b1e..b0039f0c4 100644 --- a/src/tabs/props.ts +++ b/src/tabs/props.ts @@ -10,6 +10,11 @@ const props: TdTabsProps = { animation: { type: Object, }, + /** 激活下划线的模式 */ + bottomLineMode: { + type: String, + value: 'fixed', + }, /** 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名 */ externalClasses: { type: Array, diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts index 64ca9a915..bed0342ee 100644 --- a/src/tabs/tabs.ts +++ b/src/tabs/tabs.ts @@ -171,16 +171,17 @@ export default class Tabs extends SuperComponent { }, getTrackSize() { + const { bottomLineMode } = this.properties; + const targetMap = { + fixed: `.${prefix}-tabs__track`, + auto: `.${prefix}-tabs__item--active .${prefix}-tabs__item-inner`, + full: `.${prefix}-tabs__item--active`, + }; return new Promise((resolve, reject) => { - if (this.trackWidth) { - resolve(this.trackWidth); - return; - } - getRect(this, `.${prefix}-tabs__track`) + getRect(this, targetMap[bottomLineMode] || targetMap.fixed) .then((res) => { if (res) { - this.trackWidth = res.width; - resolve(this.trackWidth); + resolve(res.width); } }) .catch(reject); @@ -221,13 +222,14 @@ export default class Tabs extends SuperComponent { getObserver(this, `.${name}`).then(() => this.setTrack()); } + const trackLineWidth = await this.getTrackSize(); if (this.data.theme === 'line') { - const trackLineWidth = await this.getTrackSize(); distance += (rect.width - trackLineWidth) / 2; } this.setData({ trackStyle: `-webkit-transform: translateX(${distance}px); transform: translateX(${distance}px); + width:${trackLineWidth}px; `, }); } catch (err) { diff --git a/src/tabs/type.ts b/src/tabs/type.ts index af17c0fb9..32a89b45d 100644 --- a/src/tabs/type.ts +++ b/src/tabs/type.ts @@ -14,6 +14,14 @@ export interface TdTabsProps { type: ObjectConstructor; value?: TabAnimation; }; + /** + * 激活下划线的模式 + * @default fixed + */ + bottomLineMode?: { + type: StringConstructor; + value?: 'fixed' | 'auto' | 'full'; + }; /** * 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名 */