Skip to content

feat(Swiper): Mobile add Boolean type support for navigation #734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
RSS1102 wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

feat(Swiper): Mobile add Boolean type support for navigation #734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d40e1b6
feat(Swiper): add Boolean type support for navigation
RSS1102 Oct 16, 2025
0e0ef8e
fix: add moble react docs
RSS1102 Oct 16, 2025
29818fa
fix: remove `Function` type
RSS1102 Oct 16, 2025
6138b91
Merge branch 'main' into rss1102/feat/swiper/navigation
RSS1102 Oct 24, 2025
af8db32
feat(Swiper): 更新导航配置，将移动端 navigation api 独立出来
RSS1102 Oct 24, 2025
92a72d9
feat(Swiper): 更新导航配置，pc 端移除 navigation 的 Boolean 类型支持
RSS1102 Oct 24, 2025
fa91dca
Merge remote-tracking branch 'origin/main' into rss1102/feat/swiper/n…
RSS1102 Nov 11, 2025
e683790
fix(swiper): update navigation prop description and default value han…
RSS1102 Nov 11, 2025
f788b0e
fix(api): update navigation field properties and descriptions for Swi…
RSS1102 Nov 11, 2025
99f98c4
Merge branch 'main' into rss1102/feat/swiper/navigation
RSS1102 Dec 16, 2025
fe9ff22
fix: update API documentation and remove deprecated props
RSS1102 Dec 16, 2025
c0ffa3f
feat(SwiperNavigation): update field_default_value and descriptions i…
RSS1102 Jan 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
6 changes: 3 additions & 3 deletions packages/products/tdesign-miniprogram/packages/components/swiper/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ easing-function | String | default | `0.32.0`。options: default/linear/easeInCu
height | String / Number | 192 | \- | N
image-props | Object | - | `0.34.0` | N
interval | Number | 5000 | \- | N
list | Array | - | `0.32.0`。Typescript：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/swiper/type.ts) | N
list | Array | - | `0.32.0`。Typescript: `string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/swiper/type.ts) | N
loop | Boolean | true | \- | N
navigation | Boolean / Object | true | Typescript：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/swiper/type.ts) | N
navigation | Boolean / Object | true | navigation all config, `true` for using default config。Typescript: `SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/swiper/type.ts) | N
next-margin | String / Number | 0 | `0.32.0` | N
pagination-position | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right | N
previous-margin | String / Number | 0 | `0.32.0` | N
Expand Down Expand Up @@ -63,7 +63,7 @@ min-show-num | Number | 2 | \- | N
pagination-position | String | bottom | `0.34.0`。options: top-left/top/top-right/bottom-left/bottom/bottom-right | N
show-controls | Boolean | false | `0.32.0` | N
total | Number | 0 | `0.34.0` | N
type | String | dots | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/swiper-nav/type.ts) | N
type | String | dots | Typescript: `SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/swiper-nav/type.ts) | N

### SwiperNav External Classes

Expand Down
1 change: 1 addition & 0 deletions packages/products/tdesign-mobile-react/src/swiper/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const swiperDefaultProps: TdSwiperProps = {
duration: 300,
interval: 5000,
loop: true,
navigation: true,
nextMargin: 0,
previousMargin: 0,
type: 'default',
Expand Down
10 changes: 5 additions & 5 deletions packages/products/tdesign-mobile-react/src/swiper/swiper.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
animation | String | slide | options: slide | N
autoplay | Boolean | true | \- | N
current | Number | 0 | \- | N
Expand All @@ -17,12 +17,12 @@ duration | Number | 300 | \- | N
height | String / Number | - | \- | N
interval | Number | 5000 | \- | N
loop | Boolean | true | \- | N
navigation | TNode | - | Typescript：`SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
navigation | TNode | true | navigation all config, `true` for using default config。Typescript: `SwiperNavigation \| TNode \| Boolean`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
nextMargin | String / Number | 0 | \- | N
previousMargin | String / Number | 0 | \- | N
type | String | default | options: default/card | N
onChange | Function | | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
onClick | Function | | Typescript：`(index: number) => void`<br/> | N
onChange | Function | | Typescript: `(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
onClick | Function | | Typescript: `(index: number) => void`<br/> | N

### SwiperNavigation

Expand All @@ -32,4 +32,4 @@ minShowNum | Number | - | \- | N
paginationPosition | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
placement | String | inside | options: inside/outside | N
showControls | Boolean | false | \- | N
type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swiper/type.ts) | N
type | String | dots | Navigator types include dots, dots-bar, fraction, etc.。Typescript: `SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swiper/type.ts) | N
4 changes: 2 additions & 2 deletions packages/products/tdesign-mobile-react/src/swiper/swiper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ duration | Number | 300 | 滑动动画时长 | N
height | String / Number | - | 当使用垂直方向滚动时的高度 | N
interval | Number | 5000 | 轮播间隔时间 | N
loop | Boolean | true | 是否循环播放 | N
navigation | TNode | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
navigation | TNode | true | 导航器全部配置，true 的话使用默认配置。TS 类型：`SwiperNavigation \| TNode \| Boolean`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
nextMargin | String / Number | 0 | 后边距，可用于露出后一项的一小部分。默认单位 `px` | N
previousMargin | String / Number | 0 | 前边距，可用于露出前一项的一小部分。默认单位 `px` | N
type | String | default | 样式类型：默认样式、卡片样式。可选项：default/card | N
Expand All @@ -32,4 +32,4 @@ minShowNum | Number | - | 小于这个数字不会显示导航器 | N
paginationPosition | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
placement | String | inside | 导航器位置，位于主体的内侧或是外侧。可选项：inside/outside | N
showControls | Boolean | false | 是否显示两侧的控制按钮 | N
type | String | - | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swiper/type.ts) | N
type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swiper/type.ts) | N
7 changes: 4 additions & 3 deletions packages/products/tdesign-mobile-react/src/swiper/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,10 @@ export interface TdSwiperProps {
*/
loop?: boolean;
/**
* 导航器全部配置
* 导航器全部配置，true 的话使用默认配置
* @default true
*/
navigation?: SwiperNavigation | TNode;
navigation?: SwiperNavigation | TNode | Boolean;
/**
* 后边距，可用于露出后一项的一小部分。默认单位 `px`
* @default 0
Expand Down Expand Up @@ -102,7 +103,7 @@ export interface SwiperNavigation {
showControls?: boolean;
/**
* 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
* @default ''
* @default dots
*/
type?: SwiperNavigationType;
}
Expand Down
5 changes: 3 additions & 2 deletions packages/products/tdesign-mobile-vue/src/swiper/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,10 @@ export default {
type: Boolean,
default: true,
},
/** 导航器全部配置 */
/** 导航器全部配置，true 的话使用默认配置 */
navigation: {
type: [Object, Function] as PropType<TdSwiperProps['navigation']>,
type: [Boolean, Object, Function] as PropType<TdSwiperProps['navigation']>,
default: true as TdSwiperProps['navigation'],
},
/** 【开发中】后边距，可用于露出后一项的一小部分。默认单位 `px` */
nextMargin: {
Expand Down
8 changes: 4 additions & 4 deletions packages/products/tdesign-mobile-vue/src/swiper/swiper.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ duration | Number | 300 | \- | N
height | String / Number | - | \- | N
interval | Number | 5000 | \- | N
loop | Boolean | true | \- | N
navigation | Object / Slot / Function | - | Typescript：`SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
navigation | Boolean / Object / Slot / Function | true | navigation all config, `true` for using default config。Typescript: `SwiperNavigation \| TNode \| Boolean`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
nextMargin | String / Number | 0 | \- | N
previousMargin | String / Number | 0 | \- | N
onChange | Function | | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
onClick | Function | | Typescript：`(index: number) => void`<br/> | N
onChange | Function | | Typescript: `(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
onClick | Function | | Typescript: `(index: number) => void`<br/> | N

### Swiper Events

Expand All @@ -35,4 +35,4 @@ name | type | default | description | required
minShowNum | Number | - | \- | N
paginationPosition | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
showControls | Boolean | false | \- | N
type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts) | N
type | String | - | Typescript: `SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts) | N
2 changes: 1 addition & 1 deletion packages/products/tdesign-mobile-vue/src/swiper/swiper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ duration | Number | 300 | 滑动动画时长 | N
height | String / Number | - | 轮播的高度 | N
interval | Number | 5000 | 轮播间隔时间 | N
loop | Boolean | true | 是否循环播放 | N
navigation | Object / Slot / Function | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
navigation | Boolean / Object / Slot / Function | true | 导航器全部配置，true 的话使用默认配置。TS 类型：`SwiperNavigation \| TNode \| Boolean`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
nextMargin | String / Number | 0 | 【开发中】后边距，可用于露出后一项的一小部分。默认单位 `px` | N
previousMargin | String / Number | 0 | 【开发中】前边距，可用于露出前一项的一小部分。默认单位 `px` | N
onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
Expand Down
5 changes: 3 additions & 2 deletions packages/products/tdesign-mobile-vue/src/swiper/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,10 @@ export interface TdSwiperProps {
*/
loop?: boolean;
/**
* 导航器全部配置
* 导航器全部配置，true 的话使用默认配置
* @default true
*/
navigation?: SwiperNavigation | TNode;
navigation?: SwiperNavigation | TNode | Boolean;
/**
* 【开发中】后边距，可用于露出后一项的一小部分。默认单位 `px`
* @default 0
Expand Down
2 changes: 1 addition & 1 deletion packages/products/tdesign-react/packages/components/swiper/swiper.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ duration | Number | 300 | \- | N
height | Number | - | \- | N
interval | Number | 5000 | \- | N
loop | Boolean | true | \- | N
navigation | TNode | - | Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
navigation | TNode | - | navigation all config。Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
stopOnHover | Boolean | true | \- | N
trigger | String | hover | options: hover/click | N
type | String | default | options: default/card | N
Expand Down
2 changes: 1 addition & 1 deletion packages/products/tdesign-vue-next/packages/components/swiper/swiper.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ duration | Number | 300 | \- | N
height | Number | - | \- | N
interval | Number | 5000 | \- | N
loop | Boolean | true | \- | N
navigation | Object / Slot / Function | - | Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
navigation | Object / Slot / Function | - | navigation all config。Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
stopOnHover | Boolean | true | \- | N
trigger | String | hover | options: hover/click | N
type | String | default | options: default/card | N
Expand Down
2 changes: 1 addition & 1 deletion packages/products/tdesign-vue/src/swiper/swiper.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ duration | Number | 300 | \- | N
height | Number | - | \- | N
interval | Number | 5000 | \- | N
loop | Boolean | true | \- | N
navigation | Object / Slot / Function | - | Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
navigation | Object / Slot / Function | - | navigation all config。Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
stopOnHover | Boolean | true | \- | N
trigger | String | hover | options: hover/click | N
type | String | default | options: default/card | N
Expand Down
Loading