@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
95 lines (94 loc) • 2.24 kB
TypeScript
import { default as React, ReactNode, FunctionComponent, MouseEvent } from 'react';
import { PopoverLocation } from '../popover/types';
import { BasicComponent } from '../../utils/typings';
export interface TourList {
target: Element | string;
content?: string;
location?: string;
popoverOffset?: number[];
arrowOffset?: number;
}
export type TourType = 'step' | 'tile';
export interface TourProps extends BasicComponent {
/**
* 是否展示引导弹出层
* @default false
*/
visible: boolean
/**
* 引导类型
* @default step
*/
type: TourType
/**
* 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover)
* @default bottom
*/
location: PopoverLocation | string
/**
* 是否显示镂空遮罩
* @default true
*/
mask: boolean
/**
* 镂空遮罩层宽度
* @default ''
*/
maskWidth: number | string
/**
* 镂空遮罩层高度
* @default ''
*/
maskHeight: number | string
/**
* 镂空遮罩相对于目标元素的偏移量
* @default [8, 10]
*/
offset: number[]
/**
* 引导步骤内容
* @default -
*/
list: TourList[]
/**
* 是否展示标题栏
* @default ''
*/
title: ReactNode
/**
* 下一步按钮文案
* @default ''
*/
next: ReactNode
/**
* 上一步按钮文案
* @default ''
*/
prev: ReactNode
/**
* 完成按钮文案
* @default ''
*/
complete: ReactNode
/**
* 是否展示上一步按钮
* @default true
*/
showPrev: boolean
/**
* 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover)
* @default true
*/
closeOnOverlayClick: boolean
/**
* 气泡层关闭时触发
* @default -
*/
onClose: (e: MouseEvent<HTMLDivElement>) => void
/**
* 切换步骤时触发
* @default -
*/
onChange: (value: number) => void
}
export declare const Tour: FunctionComponent<Partial<TourProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'>>;