---
title: 漫游式导航
order: 1
docGenIncludes:
  - src/components/YwTour/index.tsx
---

```jsx
import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { YwTour, YwButton } from '@ywfe/yw-design';
import { Divider, Space } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
const App = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);
  const [open, setOpen] = useState(false);
  const steps = [
    {
      title: 'Upload File',
      description: 'Put your files here.',
      arrow: true,
      cover: (
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        />
      ),
      target: () => ref1.current,
    },
    {
      title: 'Save',
      description: 'Save your changes.',
      target: () => ref2.current,
    },
    {
      title: 'Other Actions',
      description: 'Click to see other actions.',
      target: () => ref3.current,
    },
  ];
  return (
    <>
      <YwButton type="primary" onClick={() => setOpen(true)}>
        Begin Tour
      </YwButton>

      <Divider />

      <Space>
        <YwButton ref={ref1}>Upload</YwButton>
        <YwButton ref={ref2} type="primary">
          Save
        </YwButton>
        <YwButton ref={ref3} icon={<EllipsisOutlined />} />
      </Space>

      <YwTour open={open} onClose={() => setOpen(false)} steps={steps} />
    </>
  );
};

ReactDOM.render(<App />, mountNode);
```