Ant Design创建一个新手引导界面

安装driver.js

npm install --save driver.js

示例代码

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

const {TabPane} = Tabs
export default class Demo extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  componentDidMount() {
    const driver = new Driver();
    const btnTitle = {
      doneBtnText: '完成', // Text on the final button
      closeBtnText: '关闭', // Text on the close button for this step
      nextBtnText: '下一步', // Next button text for this step
      prevBtnText: '上一步',
    }
    driver.defineSteps([
      {
        element: '#first-element-introduction',
        popover: {
          title: '项目一',
          description: '这是项目一的介绍',
          position: 'top'
        },
        ...btnTitle
      },
      {
        element: '#second-element-introduction',
        popover: {
          title: '项目二',
          description: '这是项目二的介绍',
          position: 'top'
        }, ...btnTitle
      },
      {
        element: '#third-element-introduction',
        popover: {
          title: '项目三',
          description: '这是项目三的介绍',
          position: 'buttom'
        }, ...btnTitle
      },
    ]);
    driver.start()
  }

  render() {
    return (

      <Tabs>
        <TabPane tab="item1" key="1">
          <div id="first-element-introduction">item1</div>
          <div id="second-element-introduction">item2</div>
          <div id="third-element-introduction">item3</div>
        </TabPane>
      </Tabs>

    )
  }
}