Skip to content

Commit ee59a34

Browse files
uyarnuyarn
authored
feat(swiper): add cardScale API (#601)
1 parent 0cc14c4 commit ee59a34

File tree

14 files changed

+806
-10
lines changed

14 files changed

+806
-10
lines changed

‎db/TDesign.db‎

0 Bytes
Binary file not shown.

‎packages/products/tdesign-react/packages/components/swiper/defaultProps.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3+
* */
4+
5+
import { TdSwiperProps } from './type';
6+
7+
export const swiperDefaultProps: TdSwiperProps = {
8+
animation: 'slide',
9+
autoplay: true,
10+
cardScale: '210/332',
11+
current: 0,
12+
direction: 'horizontal',
13+
duration: 300,
14+
interval: 5000,
15+
loop: true,
16+
stopOnHover: true,
17+
theme: 'light',
18+
trigger: 'hover',
19+
type: 'default',
20+
};

‎packages/products/tdesign-react/packages/components/swiper/swiper.en-US.md‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,29 @@
66

77
name | type | default | description | required
88
-- | -- | -- | -- | --
9-
className | String | - | 类名 | N
10-
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
11-
animation | String | slide | options：slide/fade | N
9+
className | String | - | className of component | N
10+
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
11+
animation | String | slide | options: slide/fade | N
1212
autoplay | Boolean | true | \- | N
13+
cardScale | Number | 210/332 | \- | N
1314
current | Number | 0 | \- | N
14-
defaultCurrent | Number | 0 | uncontrolled property | N
15-
direction | String | horizontal | options：horizontal/vertical | N
15+
direction | String | horizontal | options: horizontal/vertical | N
1616
duration | Number | 300 | \- | N
1717
height | Number | - | \- | N
1818
interval | Number | 5000 | \- | N
1919
loop | Boolean | true | \- | N
2020
navigation | TNode | - | Typescript：`SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
2121
stopOnHover | Boolean | true | \- | N
22-
theme | String | light | options：light/dark | N
23-
trigger | String | hover | options：hover/click | N
24-
type | String | default | options：default/card | N
22+
theme | String | light | options: light/dark | N
23+
trigger | String | hover | options: hover/click | N
24+
type | String | default | options: default/card | N
2525
onChange | Function | | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/> | N
26+
27+
### SwiperNavigation
28+
29+
name | type | default | description | required
30+
-- | -- | -- | -- | --
31+
placement | String | inside | options: inside/outside | N
32+
showSlideBtn | String | always | options: always/hover/never | N
33+
size | String | medium | options: small/medium/large | N
34+
type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts) | N

‎packages/products/tdesign-react/packages/components/swiper/swiper.md‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44

55
### Swiper Props
66

7-
名称 | 类型 | 默认值 | 说明 | 必传
7+
名称 | 类型 | 默认值 | 描述 | 必传
88
-- | -- | -- | -- | --
99
className | String | - | 类名 | N
1010
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
1111
animation | String | slide | 轮播切换动画效果类型：滑动、淡入淡出等。可选项：slide/fade | N
1212
autoplay | Boolean | true | 是否自动播放 | N
13+
cardScale | Number | 210/332 | 卡片模式下非当前展示轮播图的缩放比例 | N
1314
current | Number | 0 | 当前轮播在哪一项（下标） | N
14-
defaultCurrent | Number | 0 | 当前轮播在哪一项（下标）。非受控属性 | N
1515
direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
1616
duration | Number | 300 | 滑动动画时长 | N
1717
height | Number | - | 当使用垂直方向滚动时的高度 | N
@@ -23,3 +23,12 @@ theme | String | light | 深色模式和浅色模式。可选项：light/dark |
2323
trigger | String | hover | 触发切换的方式：悬浮、点击等。可选项：hover/click | N
2424
type | String | default | 样式类型：默认样式、卡片样式。可选项：default/card | N
2525
onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/> | N
26+
27+
### SwiperNavigation
28+
29+
名称 | 类型 | 默认值 | 描述 | 必传
30+
-- | -- | -- | -- | --
31+
placement | String | inside | 导航器位置，位于主体的内侧或是外侧。可选项：inside/outside | N
32+
showSlideBtn | String | always | 何时显示导航器的翻页按钮：始终显示、悬浮显示、永不显示。可选项：always/hover/never | N
33+
size | String | medium | 导航器尺寸。可选项：small/medium/large | N
34+
type | String | - | 导航器类型，点状(dots)、点条状(dots-bar)、条状(bars)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts) | N

‎packages/products/tdesign-react/packages/components/swiper/type.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5+
* */
6+
7+
import { TNode } from '../common';
8+
9+
export interface TdSwiperProps {
10+
/**
11+
* 轮播切换动画效果类型：滑动、淡入淡出等
12+
* @default slide
13+
*/
14+
animation?: 'slide' | 'fade';
15+
/**
16+
* 是否自动播放
17+
* @default true
18+
*/
19+
autoplay?: boolean;
20+
/**
21+
* 卡片模式下非当前展示轮播图的缩放比例
22+
* @default 210/332
23+
*/
24+
cardScale?: number;
25+
/**
26+
* 当前轮播在哪一项（下标）
27+
* @default 0
28+
*/
29+
current?: number;
30+
/**
31+
* 当前轮播在哪一项（下标），非受控属性
32+
* @default 0
33+
*/
34+
defaultCurrent?: number;
35+
/**
36+
* 轮播滑动方向，包括横向滑动和纵向滑动两个方向
37+
* @default horizontal
38+
*/
39+
direction?: 'horizontal' | 'vertical';
40+
/**
41+
* 滑动动画时长
42+
* @default 300
43+
*/
44+
duration?: number;
45+
/**
46+
* 当使用垂直方向滚动时的高度
47+
*/
48+
height?: number;
49+
/**
50+
* 轮播间隔时间
51+
* @default 5000
52+
*/
53+
interval?: number;
54+
/**
55+
* 是否循环播放
56+
* @default true
57+
*/
58+
loop?: boolean;
59+
/**
60+
* 导航器全部配置
61+
*/
62+
navigation?: SwiperNavigation | TNode;
63+
/**
64+
* 是否悬浮时停止轮播
65+
* @default true
66+
*/
67+
stopOnHover?: boolean;
68+
/**
69+
* 深色模式和浅色模式
70+
* @default light
71+
*/
72+
theme?: 'light' | 'dark';
73+
/**
74+
* 触发切换的方式：悬浮、点击等
75+
* @default hover
76+
*/
77+
trigger?: 'hover' | 'click';
78+
/**
79+
* 样式类型：默认样式、卡片样式
80+
* @default default
81+
*/
82+
type?: 'default' | 'card';
83+
/**
84+
* 轮播切换时触发
85+
*/
86+
onChange?: (current: number, context: { source: SwiperChangeSource }) => void;
87+
}
88+
89+
export interface SwiperNavigation {
90+
/**
91+
* 导航器位置，位于主体的内侧或是外侧
92+
* @default inside
93+
*/
94+
placement?: 'inside' | 'outside';
95+
/**
96+
* 何时显示导航器的翻页按钮：始终显示、悬浮显示、永不显示
97+
* @default always
98+
*/
99+
showSlideBtn?: 'always' | 'hover' | 'never';
100+
/**
101+
* 导航器尺寸
102+
* @default medium
103+
*/
104+
size?: 'small' | 'medium' | 'large';
105+
/**
106+
* 导航器类型，点状(dots)、点条状(dots-bar)、条状(bars)、分式(fraction)等
107+
* @default ''
108+
*/
109+
type?: SwiperNavigationType;
110+
}
111+
112+
export type SwiperChangeSource = 'autoplay' | 'click' | 'hover';
113+
114+
export type SwiperNavigationType = 'dots' | 'dots-bar' | 'bars' | 'fraction';

‎packages/products/tdesign-vue-next/packages/components/swiper/props.ts‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5+
* */
6+
7+
import { TdSwiperProps } from './type';
8+
import { PropType } from 'vue';
9+
10+
export default {
11+
/** 轮播切换动画效果类型：滑动、淡入淡出等 */
12+
animation: {
13+
type: String as PropType<TdSwiperProps['animation']>,
14+
default: 'slide' as TdSwiperProps['animation'],
15+
validator(val: TdSwiperProps['animation']): boolean {
16+
if (!val) return true;
17+
return ['slide', 'fade'].includes(val);
18+
},
19+
},
20+
/** 是否自动播放 */
21+
autoplay: {
22+
type: Boolean,
23+
default: true,
24+
},
25+
/** 卡片模式下非当前展示轮播图的缩放比例 */
26+
cardScale: {
27+
type: Number,
28+
},
29+
/** 当前轮播在哪一项（下标） */
30+
current: {
31+
type: Number,
32+
default: undefined,
33+
},
34+
modelValue: {
35+
type: Number,
36+
default: undefined,
37+
},
38+
/** 当前轮播在哪一项（下标），非受控属性 */
39+
defaultCurrent: {
40+
type: Number,
41+
default: 0,
42+
},
43+
/** 轮播滑动方向，包括横向滑动和纵向滑动两个方向 */
44+
direction: {
45+
type: String as PropType<TdSwiperProps['direction']>,
46+
default: 'horizontal' as TdSwiperProps['direction'],
47+
validator(val: TdSwiperProps['direction']): boolean {
48+
if (!val) return true;
49+
return ['horizontal', 'vertical'].includes(val);
50+
},
51+
},
52+
/** 滑动动画时长 */
53+
duration: {
54+
type: Number,
55+
default: 300,
56+
},
57+
/** 当使用垂直方向滚动时的高度 */
58+
height: {
59+
type: Number,
60+
},
61+
/** 轮播间隔时间 */
62+
interval: {
63+
type: Number,
64+
default: 5000,
65+
},
66+
/** 是否循环播放 */
67+
loop: {
68+
type: Boolean,
69+
default: true,
70+
},
71+
/** 导航器全部配置 */
72+
navigation: {
73+
type: [Object, Function] as PropType<TdSwiperProps['navigation']>,
74+
},
75+
/** 是否悬浮时停止轮播 */
76+
stopOnHover: {
77+
type: Boolean,
78+
default: true,
79+
},
80+
/** 深色模式和浅色模式 */
81+
theme: {
82+
type: String as PropType<TdSwiperProps['theme']>,
83+
default: 'light' as TdSwiperProps['theme'],
84+
validator(val: TdSwiperProps['theme']): boolean {
85+
if (!val) return true;
86+
return ['light', 'dark'].includes(val);
87+
},
88+
},
89+
/** 触发切换的方式：悬浮、点击等 */
90+
trigger: {
91+
type: String as PropType<TdSwiperProps['trigger']>,
92+
default: 'hover' as TdSwiperProps['trigger'],
93+
validator(val: TdSwiperProps['trigger']): boolean {
94+
if (!val) return true;
95+
return ['hover', 'click'].includes(val);
96+
},
97+
},
98+
/** 样式类型：默认样式、卡片样式 */
99+
type: {
100+
type: String as PropType<TdSwiperProps['type']>,
101+
default: 'default' as TdSwiperProps['type'],
102+
validator(val: TdSwiperProps['type']): boolean {
103+
if (!val) return true;
104+
return ['default', 'card'].includes(val);
105+
},
106+
},
107+
/** 轮播切换时触发 */
108+
onChange: Function as PropType<TdSwiperProps['onChange']>,
109+
};

‎packages/products/tdesign-vue-next/packages/components/swiper/swiper.en-US.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
6+
### Swiper Props
7+
8+
name | type | default | description | required
9+
-- | -- | -- | -- | --
10+
animation | String | slide | options: slide/fade | N
11+
autoplay | Boolean | true | \- | N
12+
cardScale | Number | 210/332 | \- | N
13+
current | Number | 0 | `v-model` and `v-model:current` is supported | N
14+
direction | String | horizontal | options: horizontal/vertical | N
15+
duration | Number | 300 | \- | N
16+
height | Number | - | \- | N
17+
interval | Number | 5000 | \- | N
18+
loop | Boolean | true | \- | N
19+
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
20+
stopOnHover | Boolean | true | \- | N
21+
theme | String | light | options: light/dark | N
22+
trigger | String | hover | options: hover/click | N
23+
type | String | default | options: default/card | N
24+
onChange | Function | | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/> | N
25+
26+
### Swiper Events
27+
28+
name | params | description
29+
-- | -- | --
30+
change | `(current: number, context: { source: SwiperChangeSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/>
31+
32+
### SwiperNavigation
33+
34+
name | type | default | description | required
35+
-- | -- | -- | -- | --
36+
placement | String | inside | options: inside/outside | N
37+
showSlideBtn | String | always | options: always/hover/never | N
38+
size | String | medium | options: small/medium/large | N
39+
type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts) | N

‎packages/products/tdesign-vue-next/packages/components/swiper/swiper.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
6+
### Swiper Props
7+
8+
名称 | 类型 | 默认值 | 描述 | 必传
9+
-- | -- | -- | -- | --
10+
animation | String | slide | 轮播切换动画效果类型：滑动、淡入淡出等。可选项：slide/fade | N
11+
autoplay | Boolean | true | 是否自动播放 | N
12+
cardScale | Number | 210/332 | 卡片模式下非当前展示轮播图的缩放比例 | N
13+
current | Number | 0 | 当前轮播在哪一项（下标）。支持语法糖 `v-model` 或 `v-model:current` | N
14+
direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
15+
duration | Number | 300 | 滑动动画时长 | N
16+
height | Number | - | 当使用垂直方向滚动时的高度 | N
17+
interval | Number | 5000 | 轮播间隔时间 | N
18+
loop | Boolean | true | 是否循环播放 | N
19+
navigation | Object / Slot / Function | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
20+
stopOnHover | Boolean | true | 是否悬浮时停止轮播 | N
21+
theme | String | light | 深色模式和浅色模式。可选项：light/dark | N
22+
trigger | String | hover | 触发切换的方式：悬浮、点击等。可选项：hover/click | N
23+
type | String | default | 样式类型：默认样式、卡片样式。可选项：default/card | N
24+
onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/> | N
25+
26+
### Swiper Events
27+
28+
名称 | 参数 | 描述
29+
-- | -- | --
30+
change | `(current: number, context: { source: SwiperChangeSource })` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/>
31+
32+
### SwiperNavigation
33+
34+
名称 | 类型 | 默认值 | 描述 | 必传
35+
-- | -- | -- | -- | --
36+
placement | String | inside | 导航器位置，位于主体的内侧或是外侧。可选项：inside/outside | N
37+
showSlideBtn | String | always | 何时显示导航器的翻页按钮：始终显示、悬浮显示、永不显示。可选项：always/hover/never | N
38+
size | String | medium | 导航器尺寸。可选项：small/medium/large | N
39+
type | String | - | 导航器类型，点状(dots)、点条状(dots-bar)、条状(bars)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts) | N

0 commit comments

Comments
 (0)