@cainiaofe/cn-ui-m
Version:
74 lines (73 loc) • 1.72 kB
TypeScript
import type { ReactNode, ReactElement } from 'react';
import type { BasicComponentProps } from "../../../types";
import type { SliderIndicatorProps } from './slider-indicator-props';
export interface CnSliderProps extends BasicComponentProps {
/**
* 非受控下标
*/
defaultIndex?: number;
/**
* 受控下标
*/
index?: number;
/**
* 是否允许手势滑动
*/
allowTouchMove?: boolean;
/**
* 是否自动播放
*/
autoplay?: boolean;
/**
* 自动切换的间隔，单位为 ms
*/
autoplayInterval?: number;
/**
* 是否循环
*/
loop?: boolean;
/**
* 方向，默认是水平方向
*/
direction: 'horizontal' | 'vertical';
/**
* 切换时触发
*/
onIndexChange?: (index: number) => void;
/**
* 自定义指示器的
*/
indicatorProps?: SliderIndicatorProps;
/**
* 自定义指示器
*/
indicator?: (total: number, current: number, swipeTo: (index: number) => void) => ReactNode;
/**
* 滑块的宽度百分比
*/
slideSize: number;
/**
* 滑块轨道整体的偏移量百分比
*/
trackOffset: number;
/**
* 是否在边界两边卡住，避免出现空白，仅在非 loop 模式且 slideSize < 100 时生效
*/
stuckAtBoundary?: boolean;
/**
* 是否在拖动超出内容区域时启用橡皮筋效果，仅在非 loop 模式下生效
*/
rubberBand?: boolean;
/**
* 展示箭头
*/
showArrow?: boolean;
/**
* 子节点
*/
children?: ReactElement | ReactElement[];
/**
* 高度
*/
height?: string | number;
}