@aborovsky/react-joyride 中文文档教程

发布于 3年前 浏览 21 项目主页 更新于 3年前

React Joyride

Joyride example image

Create awesome tours for your app!

向新用户展示您的应用或解释新功能的功能。

它使用 react-floater 进行定位和样式设置。
您也可以使用自己的组件!

此处查看演示(或 codesandbox 示例)

阅读文档

在我们的 Spectrum 社区 讨论它

Setup

npm i react-joyride

Getting Started

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}

如果您需要支持旧版浏览器,您需要包含 scrollingelement polyfill。

Development

设置本地开发环境很容易!

在你的机器上克隆(或 fork)这个 repo,导航到它在终端中的位置并运行:

npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes

现在克隆 https://github.com/gilbarbara/react-joyride-demo 并运行:

npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start

开始编码! ????

React Joyride

Joyride example image

Create awesome tours for your app!

Showcase your app to new users or explain functionality of new features.

It uses react-floater for positioning and styling.
And you can use your own components too!

View the demo here (or the codesandbox examples)

Read the docs

Chat about it in our Spectrum community

Setup

npm i react-joyride

Getting Started

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}

If you need to support legacy browsers you need to include the scrollingelement polyfill.

Development

Setting up a local development environment is easy!

Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:

npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes

Now clone https://github.com/gilbarbara/react-joyride-demo and run:

npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start

Start coding! ????

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文