dw-neit-rc-component-tour
v1.15.0
Published
React tour Component
Downloads
6
Maintainers
Readme
dw-neit-rc-component-tour
React 18 supported Tour Component.
Development
npm install
npm start
open http://localhost:8000
Feature
- React life cycle support tour component
Install
Usage
import Tour from 'dw-neit-rc-component-tour';
const Demo = () => {
const createBtnRef = useRef<HTMLButtonElement>(null);
const updateBtnRef = useRef<HTMLButtonElement>(null);
const deleteBtnRef = useRef<HTMLButtonElement>(null);
return (
<div style={{ margin: 20 }}>
<div>
<button
className="ant-target"
ref={createBtnRef}
style={{ marginLeft: 100 }}
>
Create
</button>
<div style={{ height: 200 }} />
<button className="ant-target" ref={updateBtnRef}>
Update
</button>
<button className="ant-target" ref={deleteBtnRef}>
Delete
</button>
</div>
<div style={{ height: 200 }} />
<Tour
defaultCurrent={0}
steps={[
{
title: '创建',
description: '创建一条数据',
target: () => createBtnRef.current,
mask: true,
},
{
title: '更新',
description: (
<div>
<span>更新一条数据</span>
<button>帮助文档</button>
</div>
),
target: () => updateBtnRef.current,
},
{
title: '删除',
description: (
<div>
<span>危险操作:删除一条数据</span>
<button>帮助文档</button>
</div>
),
target: () => deleteBtnRef.current,
mask: true,
style: { color: 'red' },
},
]}
/>
</div>
);
};
export default Demo;
🔥 API
We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition here.
Tour
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| closeIcon | React.ReactNode
| - | 自定义关闭按钮 |
| steps | TourStepProps[]
| - | 引导步骤 |
| open | boolean
| true
| 受控打开引导(与 current
受控分开) |
| current | number
| 0 | 受控当前处于哪一步 |
| defaultCurrent | number
| 0 | 默认处于哪一步 |
| gap | { offset?: number \| [number, number]; radius?: number }
| - | 控制引导显示间距 |
| onChange | (current: number) => void
| - | 步骤改变时的回调,current
为改变前的步骤,next
为改变后的步骤 |
| onClose | (current: number) => void
| - | 关闭引导时的回调 |
| onFinish | () => void
| - | 完成引导时的回调 |
| mask | boolean \| { style?: React.CSSProperties; color?: string; }
| true
| 整体是否启用蒙层,也可以传入自定义样式修改蒙层样式 |
| animated | boolean \| { placeholder: boolean }
| false
| 是否启用目标遮罩动画 |
| arrow | boolean \| { pointAtCenter: boolean}
| true
| 整体是否显示箭头,包含是否指向元素中心的配置 |
| scrollIntoViewOptions | boolean \| ScrollIntoViewOptions
| true
| 是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数 |
| onPopupAlign | function(popupDomNode, align)
| - | 当弹出框对齐后回调 |
| zIndex | number
| 1001 | 弹层的层级 |
TourStep
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| closeIcon | React.ReactNode
| - | 自定义关闭按钮 |
| target | () => HTMLElement
| HTMLElement
| - | 获取引导卡片指向的元素 |
| arrow | boolean
| { pointAtCenter: boolean}
| true
| 是否显示箭头,包含是否指向元素中心的配置 |
| placement | left
| leftTop
| leftBottom
| right
| rightTop
| rightBottom
| top
| topLeft
| topRight
| bottom
| bottomLeft
| bottomRight
| bottom
| 引导卡片相对于目标元素的位置 |
| onClose | () => void
| - | 关闭引导时的回调函数 |
| mask | boolean \| { style?: React.CSSProperties; color?: string; }
| true
| 是否启用蒙层,也可以传入自定义样式修改蒙层样式,默认跟随 Tour 的 mask
属性 |
| renderPanel | (props: TourStepProps, current: number) => ReactNode;
| | 渲染 popoup 弹窗方法 |
| className | string
| - | - |
| style | React.CSSProperties
| - | - |
| scrollIntoViewOptions | boolean \| ScrollIntoViewOptions
| true
| 是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数,默认跟随 Tour 的 scrollIntoViewOptions
属性 |