UNPKG

zent

Version:

一套前端设计语言和基于React的实现

50 lines (38 loc) • 4.04 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
--- title: Swiper path: component/swiper group: Data Display --- ## Swiper **Original Swiper component.**A component that displays multiple pieces of content horizontally on a page in the form of a slide show. ### Suggestion - It is used to display a group of horizontal content in a fixed area, such as pictures, videos and text. - Rotation for left and right horizontal direction switch; - Auto play is enabled by default, and the rotation is maintained. ### Note - When the rotation content is a single, the indicator and switch arrow are not allowed to be displayed. ### API **Nodes in `children` must pass `style` down to native DOM nodes.** | Property | Description | Type | Default | Optional | | ------------------ | ---------------------------------------- | --------------------------------------------------- | -------------- | ------------------------------------ | --- | | transitionDuration | switch animation duration(ms) | number | `300` | | | autoplay | switch automatically | bool | `false` | `true` | | autoplayInterval | automatic switch interval(ms) | number | `3000` | | | dots | wether to show the page button below | bool \| `'round'` \| `'line'` | `true` | `true`, `false`, `'round'`, `'line'` | | dotsColor | page button color | string | `'black'` | any css color value in string | | dotsTheme | page button theme | string | `'dark'` | `light` | | dotsSize | page button size | string | `'normal'` | `'small'`, `'large'` | | arrows | wether to show flip button on both sides | bool \| `'hover'` | `false` | `true`, `false`, `'hover'` | | | arrowsType | flip button color | string | `'dark'` | `'dark'`, `'light'` | | arrowsSize | flip button size | `'normal'` \| `'large'` | `'normal'` | `'normal'` \| `'large'` | | arrowsDisabled | wether to disabled flip button | `{ left?: bool, right?: bool }` | {} | | onChange | switch callback | (current: number, prev: number): void | `noop` | | | renderPrevArrow | Custom goto previous button | `(onPrev: () => void, disabled: bool) => ReactNode` | Default button | | | renderNextArrow | Custom goto next button | `(onNext: () => void, disabled: bool) => ReactNode` | Default button | | | className | custom classname | string | `''` | | ### Instance Methods | Method Name | Instruction | Parameter | Parameter Description | | ----------- | ------------------------- | --------- | --------------------- | | swipeTo | manual switch the content | index | figure index, 0 based | | prev | switch to the previous | | | | next | switch to the next | | |