https://github.com/future-team/eg-joyride
页面引导组件
https://github.com/future-team/eg-joyride
Last synced: about 2 months ago
JSON representation
页面引导组件
- Host: GitHub
- URL: https://github.com/future-team/eg-joyride
- Owner: future-team
- License: mit
- Created: 2017-03-29T03:07:43.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-31T08:48:49.000Z (over 9 years ago)
- Last Synced: 2025-02-06T23:35:36.731Z (over 1 year ago)
- Language: JavaScript
- Size: 185 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eg-joyride
页面引导组件，用于高亮某一块区域并添加说明步骤
demo地址 [https://future-team.github.io/eg-joyride/examples/index.html](https://future-team.github.io/eg-joyride/examples/index.html)
```jsx
openSecond(){
this.refs.joyride.open(1)
}
render(){
return (
hehehehehe
打开第二步
step1
step2
step3
step4
)
}
```
#### `` Props:
- steps 用于设置引导步骤，为数组，数组中每一项的结构： {title: 'step1 !',selector:'#step1', position:'bottom'}
其中title为提示框中的文案、selector是选择器（string），用于选择需要引导提示的区域，position有四个取值：top,bottom,left,right
用于表示tooltip相对于hole的位置
- holePadding 取值为number，用于设置高亮区域白色的padding，默认为5
- tooltipMargin 取值为number，用于设置高亮区域白色的padding，默认为10
### Contributing
- Fork the project
- Run the project in development view demo: `$ npm run demo`
- Make changes.
- Add appropriate tests
- `$ npm run test`
- If tests don't pass, make them pass.
- Update README with appropriate docs.
- Rnn build
- `$ npm run build`
- Commit and PR.