反应-tour
私事容易办到 指南 + 辅导 你的反应应用.
如何使用
使用以下命令下载或复制此 repo
git clone https://github.com/deuex-solutions/react-tutorial.git
包括对您的工程的反应ur.min.js 文件
import ReactTour from 'reacttour.min.js' // prod
import ReactTour from 'reacttour.js' // dev
样式组件 它不是捆绑在包里,而是需要的 styled-components@^6.1.8 财务报告和审定财务报表 react@^16.3 由于使用 创建参考,因此:
npm i -S styled-components@^6.1.8
# or
yarn add styled-components@^6.1.8
使用量
添加数据 ReactTour 应用程序中的组件,通过 steps 中突出的元素 反应图。 。 。 .
import React from 'react'
import ReactTour from '@deuex-solutions/react-tour'
class App extends Component {
// ...
render (
<>
{ /* other stuff */}
<ReactTour
steps={steps}
playTour={this.state.playTour}
onRequestClose={this.closeTour} />
</>
)
}
const steps = [
{
selector: '.first-step',
content: 'This is my first Step',
},
// ...
]
反弹图道具
重音颜色
变动
--reactour-accent(在 IE 上默认重音颜色) css 自定义道克以应用颜色 帮助数字、点等
类型 : string
默认 : #007aff
图标
自定义 徽标 使用的内容
current财务报告和审定财务报表total步骤值
类型 : func
// example
<ReactTour badgeContent={(curr, tot) => `${curr} of ${tot}`} />
儿童
内容将在 帮助
类型 : node | elem
类Name
自定义要添加的类名 帮助
类型 : string
禁用数据导航
禁用与 点 导航于 帮助
类型 : bool
禁用交互
禁用以任何方式单击或间接的能力 突出显示 元素
类型 : bool
禁用键盘导航
在真实时禁用所有键盘导航( 下一步和预览步骤), 在数组时禁用选中的键
类型 : bool | array(['esc', 'right', 'left'])
// example
<ReactTour disableKeyboardNavigation={['esc']} />
突出显示的麦克克星Name
自定义类名, 用于在目标元素的叠加元素中添加
disableInteraction
类型 : string
在维尤风险范围内
在像素中允许在计算元素是否在视图外滚动到视图时添加
类型 : number
播放图
你知道吗..
类型 : bool
要求 : true
后一条按钮
将最后一步中的下个按钮修改为自定义按钮以关闭巡回演唱会
类型 : node
// example
<ReactTour lastStepNextButton={<MyButton>Done! Let's start playing</MyButton>} />
遮盖分类Name
自定义要添加的类名 口罩
类型 : string
遮盖空间
突出元素与像素之间的额外空间 口罩
类型 : number
默认 : 10
下一个按钮
作为下一个按钮导航的渲染器
类型 : node
打开后
之后做点什么 旅游 打开
类型 : func
// example
<ReactTour onAfterOpen={target => (document.body.style.overflowY = 'hidden')} />
在关闭前
做点什么之前 旅游 关闭
类型 : func
// example
<ReactTour onBeforeClose={target => (document.body.style.overflowY = 'auto')} />
请求关闭
关闭 旅游
类型 : func
要求 : true
prev 按钮
作为预览按钮导航的渲染器
类型 : node
四舍五入
变形 帮助 财务报告和审定财务报表 口罩 与
border-radius(以px计)
类型 : number
默认 : 0
滚动时间
定位目标元素时的平滑滚动持续时间( ms)
类型 : number
默认 : 1
滚动组合
滚动后定位目标元素时偏移
类型 : number
默认: 计算到视图端的中心
显示按钮
显示/ 隐藏 帮助 导航按钮
类型 : bool
默认 : true
显示导航
显示/ 隐藏 帮助 导航点
类型 : bool
默认 : true
显示导航 数目
在每个导航点上徘徊时显示/隐藏编号
类型 : bool
默认 : true
显示数量
显示/ 隐藏 帮助 编号徽章
类型 : bool
默认 : true
启动
开始步骤 反应图 第一次打开
类型 : number
默认 : 0
步骤等时器
在当前状态完成后, 下一步播放延迟
类型 : number
默认 : 0
遮罩颜色
淡出未突出部分的颜色
类型 : string
默认 : #000
允许 Screen 滚动
允许滚动屏幕
类型 : bool
默认 : false
步骤
带有特殊信息和道具的元素串联到高架
类型 : shape
要求 : true
步骤形状
steps: PropTypes.arrayOf(
PropTypes.shape({
selector: PropTypes.string,
content: PropTypes.oneOfType([
PropTypes.node,
PropTypes.element,
PropTypes.func,
]).isRequired,
position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
arrowPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
dropSelector: PropTypes.string,
actionType: PropTypes.oneOf(['click', 'dblclick', 'typing', 'dragndrop','dragwithmove', 'custom', 'wait']),
userTypeText: PropTypes.string,
waitTimer: PropTypes.number,
beforeStep: PropTypes.func,
afterStep: PropTypes.func,
beforePrev: PropTypes.func,
beforeNext: PropTypes.func
}),
动作类型编号
click // StepUp will be done when user click on element with given selector
dblclick // StepUp will be done when user dbl click on element with given selector
typing // StepUp will be done when user type exact string as userTypeText on element with given selector
dragdrop // StepUp will be done when user drag element with given selector and drop it to element with dropSelector
dragwithmove // StepUp will be done when user perform mouseDown element with given selector, move it to dropSelector element and at last perform mouse up on the dropselector element
custom // Control of stepUp is in authors hand by providing function to content wich will have goto and step as nextstep number
wait // StepUp will be done after waitTimer is over ( waitTimer will be in ms)
步骤前
函数在执行步骤前将调用
类型 : func
步骤之后
函数在执行步骤前将调用
类型 : func
预览前
函数将调用上一个按钮的 Click , 并在预览步骤前执行任务
类型 : func
下一个
函数将调用下个按钮的 Click , 在下一步之前执行任务
类型 : func
步骤实例
const steps = [
{
selector: '[data-tour="my-first-step"]',
content: ({ goTo, inDOM }) => (
<div>
Lorem ipsum <button onClick={() => goTo(4)}>Go to Step 5</button>
<br />
{inDOM && '🎉 Look at your step!'}
</div>
),
position: 'top', // Position is optional, if not provided, tour will auto calculate the position.
style: {
backgroundColor: '#bada55',
},
// Disable interaction for this specific step.
// Could be enabled passing `true`
// when `disableInteraction` prop is present in Tour
stepInteraction: false,
},
// ...
]