test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
85 lines (84 loc) • 2.09 kB
TypeScript
import React, { ReactNode } from 'react';
import { BasicComponent } from '../../utils/typings';
export type SwiperRef = {
to: (index: number) => void;
next: () => void;
prev: () => void;
};
export type SwiperVerticalPosition = 'left' | 'right';
export type SwiperIndicatorType = 'point' | 'block';
export interface SwiperProps extends BasicComponent {
/**
* 轮播卡片的宽度
* @default window.innerWidth
*/
width: number | string
/**
* 轮播卡片的高度
* @default 0
*/
height: number | string
/**
* 动画时长(单位是ms)
* @default 500
*/
duration: number | string
/**
* 初始化索引值
* @default 0
*/
defaultValue: number | string
/**
* 自动轮播时长,0表示不会自动轮播
* @default 0
*/
autoPlay: number | string
/**
* 轮播方向
* @default horizontal
*/
direction: 'horizontal' | 'vertical'
verticalPosition: SwiperVerticalPosition;
/**
* 分页指示器是否展示,可传入自定义的 HTML 结构
* @default false
*/
indicator: ReactNode
/**
* 分页指示器展示类型
* @default point
*/
indicatorType: SwiperIndicatorType
/**
* 是否循环轮播
* @default true
*/
loop: boolean
/**
* 是否可触摸滑动
* @default true
*/
touchable: boolean
/**
* 滑动过程中是否禁用默认事件
* @default true
*/
preventDefault: boolean
/**
* 滑动过程中是否禁止冒泡
* @default true
*/
stopPropagation: boolean
/**
* 是否居中展示,必须传对应的width 和 height
* @default false
*/
center: boolean
onTransition?: (offset: number, duration: number) => void;
/**
* 卡片切换后的回调
* @default -
*/
onChange?: (current: number) => void
}
export declare const Swiper: React.ForwardRefExoticComponent<Partial<SwiperProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<SwiperRef>>;