@ray-js/components/lib/Swiper/props.d.ts

Ray basic components

import * as React from 'react';
import { BaseProps } from '../types';
interface Target<T = Record<string, any>> {
    offsetTop: number;
    offsetLeft: number;
    id: string;
    dataset: T;
}
export type SwiperProps<I> = BaseProps & {
    /**
     * @description.en Whether to display panel points
     * @description.zh 是否显示面板指示点
     * @default false
     */
    dots?: boolean;
    /**
     * @description.en Indicator point color
     * @description.zh 指示点颜色
     * @default rgba(0, 0, 0, .3)
     */
    dotColor?: string;
    /**
     * @description.en The color of the currently selected indicator point
     * @description.zh 当前选中的指示点颜色
     * @default #000000
     */
    dotActiveColor?: string;
    /**
     * @description.en Automatic switch or not
     * @description.zh 是否自动切换
     * @default false
     */
    autoplay?: boolean;
    /**
     * @description.en Index of the current slider
     * @description.zh 当前所在滑块的 index
     * @default 0
     */
    current?: number;
    /**
     * @description.en Automatically switch the time interval
     * @description.zh 自动切换时间间隔
     * @default 5000
     */
    interval?: number;
    /**
     * @description.en Sliding animation duration
     * @description.zh 滑动动画时长
     * @default 500
     */
    duration?: number;
    /**
     * @description.en Whether to use cohesive sliding
     * @description.zh 是否采用衔接滑动
     * @default false
     */
    circular?: boolean;
    /**
     * @description.en Whether the sliding direction is longitudinal
     * @description.zh 滑动方向是否为纵向
     * @default false
     */
    vertical?: boolean;
    /** 前边距，可用于露出前一项的一小部分 */
    /** 后边距，可用于露出后一项的一小部分 */
    /**
     * current 改变时会触发 change 事件
     **/
    onChange?: (event: {
        type: 'change';
        current: number;
        source: '' | 'autoplay' | 'touch';
        /**
         * @description.en Original event object
         * @description.zh 原始事件对象
         * @example
         * {
         *     "type": "change",
         *     "timeStamp": 5633,
         *     "currentTarget": {
         *         "offsetTop": 12,
         *         "offsetLeft": 12,
         *         "id": "",
         *         "dataset": {
         *             "a": "b"
         *         }
         *     },
         *     "target": {
         *         "offsetTop": 12,
         *         "offsetLeft": 12,
         *         "id": "",
         *         "dataset": {
         *             "a": "b"
         *         }
         *     },
         *     "detail": {
         *         "current": 2,
         *         "currentItemId": "",
         *         "source": "touch"
         *     }
         * }
         */
        origin?: {
            type: 'change';
            timeStamp: number;
            currentTarget: Target;
            target: Target;
            detail: {
                current: number;
                currentItemId: string;
                source: '' | 'autoplay' | 'touch';
            };
        };
        detail: {
            current: number;
            source: '' | 'autoplay' | 'touch';
        };
    }) => void;
    /** swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} 2.4.3 */
    /** 动画结束时会触发 onAfterChange 事件 */
    onAfterChange?: (event: {
        type: 'afterChange';
        current: number;
        source: '' | 'autoplay' | 'touch';
        /**
         * @description.en Original event object
         * @description.zh 原始事件对象
         * @example
         * {
         *     "type": "animationfinish",
         *     "timeStamp": 6144,
         *     "currentTarget": {
         *         "offsetTop": 12,
         *         "offsetLeft": 12,
         *         "id": "",
         *         "dataset": {
         *             "a": "b"
         *         }
         *     },
         *     "target": {
         *         "offsetTop": 12,
         *         "offsetLeft": 12,
         *         "id": "",
         *         "dataset": {
         *             "a": "b"
         *         }
         *     },
         *     "detail": {
         *         "current": 2,
         *         "currentItemId": "",
         *         "source": "touch"
         *     }
         * }
         */
        origin?: {
            type: 'animationfinish';
            timeStamp: number;
            currentTarget: Target;
            target: Target;
            detail: {
                current: number;
                currentItemId: string;
                source: '' | 'autoplay' | 'touch';
            };
        };
        detail: {
            value: any;
        };
    }) => void;
    /** 列表数据 */
    dataSource: I[];
    /** 渲染列表项目 */
    renderItem: (item: I, index: number) => React.ReactNode;
};
export declare const defaultSwiperProps: Partial<SwiperProps<any>>;
export declare const SwiperPropsAlias: {
    dotActiveColor: string;
    dotColor: string;
    dots: string;
};
export {};