element-plus/es/components/tour/src/step.d.ts

A Component Library for Vue 3

import type { CSSProperties, Component, ExtractPublicPropTypes } from 'vue';
import type { TourBtnProps, TourMask } from './types';
import type { TourContentProps } from './content';
export interface TourStepProps {
    /**
     * @description get the element the guide card points to. empty makes it show in center of screen
     */
    target?: string | HTMLElement | (() => HTMLElement | null) | null;
    /**
     * @description the title of the tour content
     */
    title?: string;
    /**
     * @description description
     */
    description?: string;
    /**
     * @description whether to show a close button
     */
    showClose?: boolean;
    /**
     * @description custom close icon, default is Close
     */
    closeIcon?: string | Component;
    /**
     * @description whether to show the arrow
     */
    showArrow?: boolean;
    /**
     * @description position of the guide card relative to the target element
     */
    placement?: TourContentProps['placement'];
    /**
     * @description whether to enable masking, change mask style and fill color by pass custom props
     */
    mask?: TourMask;
    /**
     * @description custom style for content
     */
    contentStyle?: CSSProperties;
    /**
     * @description properties of the previous button
     */
    prevButtonProps?: TourBtnProps;
    /**
     * @description properties of the Next button
     */
    nextButtonProps?: TourBtnProps;
    /**
     * @description support pass custom scrollIntoView options
     */
    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
    /**
     * @description type, affects the background color and text color
     */
    type?: 'default' | 'primary';
}
/**
 * @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
 */
export declare const tourStepProps: {
    target: {
        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null) | ((new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null))[], unknown, unknown>>;
        readonly required: false;
        readonly validator: ((val: unknown) => boolean) | undefined;
        __epPropKey: true;
    };
    title: StringConstructor;
    description: StringConstructor;
    showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
    closeIcon: {
        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | Component) & {}) | (() => string | Component) | ((new (...args: any[]) => (string | Component) & {}) | (() => string | Component))[], unknown, unknown>>;
        readonly required: false;
        readonly validator: ((val: unknown) => boolean) | undefined;
        __epPropKey: true;
    };
    showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
    placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/utils").Placement) | ((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/utils").Placement))[], "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
    mask: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | {
        style?: CSSProperties;
        color?: string;
    }) | (() => TourMask) | ((new (...args: any[]) => boolean | {
        style?: CSSProperties;
        color?: string;
    }) | (() => TourMask))[], unknown, unknown, undefined, boolean>;
    contentStyle: {
        readonly type: import("vue").PropType<CSSProperties>;
        readonly required: false;
        readonly validator: ((val: unknown) => boolean) | undefined;
        __epPropKey: true;
    };
    prevButtonProps: {
        readonly type: import("vue").PropType<TourBtnProps>;
        readonly required: false;
        readonly validator: ((val: unknown) => boolean) | undefined;
        __epPropKey: true;
    };
    nextButtonProps: {
        readonly type: import("vue").PropType<TourBtnProps>;
        readonly required: false;
        readonly validator: ((val: unknown) => boolean) | undefined;
        __epPropKey: true;
    };
    scrollIntoViewOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown, undefined, boolean>;
    type: {
        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | ((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary"))[], unknown, unknown>>;
        readonly required: false;
        readonly validator: ((val: unknown) => boolean) | undefined;
        __epPropKey: true;
    };
};
/**
 * @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
 */
export type TourStepPropsPublic = ExtractPublicPropTypes<typeof tourStepProps>;
export declare const tourStepEmits: {
    close: () => boolean;
};
export type TourStepEmits = typeof tourStepEmits;