{"id":19345578,"url":"https://github.com/future-team/eg-joyride","last_synced_at":"2026-05-16T02:36:27.941Z","repository":{"id":57220246,"uuid":"86532735","full_name":"future-team/eg-joyride","owner":"future-team","description":"页面引导组件","archived":false,"fork":false,"pushed_at":"2017-03-31T08:48:49.000Z","size":189,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-06T23:35:36.731Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/future-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-29T03:07:43.000Z","updated_at":"2017-03-29T11:16:40.000Z","dependencies_parsed_at":"2022-08-29T00:11:53.576Z","dependency_job_id":null,"html_url":"https://github.com/future-team/eg-joyride","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-joyride","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-joyride/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-joyride/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Feg-joyride/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/future-team","download_url":"https://codeload.github.com/future-team/eg-joyride/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240452202,"owners_count":19803584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T04:07:09.237Z","updated_at":"2026-05-16T02:36:22.890Z","avatar_url":"https://github.com/future-team.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eg-joyride\n\n页面引导组件，用于高亮某一块区域并添加说明步骤\n\n\ndemo地址 [https://future-team.github.io/eg-joyride/examples/index.html](https://future-team.github.io/eg-joyride/examples/index.html)\n\n\n```jsx\n         openSecond(){\n             this.refs.joyride.open(1)\n         }\n         render(){\n             return (\n                 \u003cdiv\u003e\n                     \u003cdiv style={{paddingBottom:'500px'}}\u003e\n                         \u003ch1\u003ehehehehehe\u003c/h1\u003e\n                         \u003cbutton onClick={::this.openSecond}\u003e打开第二步\u003c/button\u003e\n                         \u003cdiv\n                             id='step1'\n                             style={{background:'red',width:'100px',height:'100px'}}\u003e\n                             step1\n                         \u003c/div\u003e\n                         \u003cdiv\n                             id='step2'\n                             style={{marginTop:'100px',background:'#ff6633',height:'200px'}}\u003e\n                             step2\n                         \u003c/div\u003e\n                         \u003cdiv\n                             id='step3'\n                             style={{float:'right',width:'200px',height:'200px',background:'green'}}\u003e\n                             step3\n                         \u003c/div\u003e\n                         \u003cdiv\n                             id='step4'\n                             style={{float:'left',width:'200px',height:'200px',background:'orange'}}\u003e\n                             step4\n                         \u003c/div\u003e\n                     \u003c/div\u003e\n                     \u003cJoyride\n                         ref='joyride'\n                         steps={[\n                         {\n                         title: 'Title only Hahahahahhah !',\n                         selector:'#step1',\n                         position:'bottom'\n                         },\n                         {\n                         title: 'Title only Hahahahahhah !',\n                         selector:'#step2',\n                         position:'top'\n                         },\n                         {\n                         title: 'Title only Hahahahahhah !',\n                         selector:'#step3',\n                         position:'left'\n                         },\n                         {\n                         title: 'Title only Hahahahahhah !',\n                         selector:'#step4',\n                         position:'right'\n                         }\n                     ]}\u003e\n                     \u003c/Joyride\u003e\n                 \u003c/div\u003e\n             )\n         }\n```\n#### `\u003cJoyride\u003e` Props:\n- steps  用于设置引导步骤，为数组，数组中每一项的结构： {title: 'step1 !',selector:'#step1', position:'bottom'}\n其中title为提示框中的文案、selector是选择器（string），用于选择需要引导提示的区域，position有四个取值：top,bottom,left,right\n用于表示tooltip相对于hole的位置\n- holePadding  取值为number，用于设置高亮区域白色的padding，默认为5\n- tooltipMargin  取值为number，用于设置高亮区域白色的padding，默认为10\n\n\n\n### Contributing\n\n- Fork the project\n- Run the project in development view demo: `$ npm run demo`\n- Make changes.\n- Add appropriate tests\n- `$ npm run test`\n- If tests don't pass, make them pass.\n- Update README with appropriate docs.\n- Rnn build\n- `$ npm run build`\n- Commit and PR.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuture-team%2Feg-joyride","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuture-team%2Feg-joyride","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuture-team%2Feg-joyride/lists"}