> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/tour.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Tour 引导

分步骤介绍页面上的功能。

## 基础用法


### 你的工作区

新建项目工作区设置开始引导

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/tour/basic.tsx"
import { Button, Card, Space, Tour } from '@ifhover/leaf-ui';

import { useRef, useState } from 'react';

export function TourBasic() {
  const [open, setOpen] = useState(false),
    [current, setCurrent] = useState(0);
  const create = useRef<HTMLButtonElement>(null),
    settings = useRef<HTMLButtonElement>(null);
  return (
    <Card title={'你的工作区'}>
      <Space wrap>
        <Button ref={create}>{'新建项目'}</Button>
        <Button ref={settings} variant="outline">
          {'工作区设置'}
        </Button>
        <Button
          variant="soft"
          onClick={() => {
            setCurrent(0);
            setOpen(true);
          }}
        >
          {'开始引导'}
        </Button>
      </Space>
      <Tour
        open={open}
        current={current}
        onChange={setCurrent}
        onClose={() => setOpen(false)}
        steps={[
          {
            key: 'create',
            title: '创建第一个项目',
            description: '把相关任务放在同一个项目中。',
            target: () => create.current,
          },
          {
            key: 'settings',
            title: '按团队习惯设置',
            description: '在工作区设置中调整团队偏好。',
            target: () => settings.current,
          },
        ]}
      />
    </Card>
  );
}
```

展开代码

## 欢迎说明


查看欢迎说明

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/tour/basic.tsx"
import { Button, Tour } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TourCentered() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        {'查看欢迎说明'}
      </Button>
      <Tour
        open={open}
        onClose={() => setOpen(false)}
        steps={[
          {
            title: '欢迎来到 Leaf',
            description: '未指定目标的说明会显示在页面中央。',
          },
        ]}
      />
    </>
  );
}
```

展开代码

## TourStep

| 属性            | 类型                                                                                                        | 默认值 | 说明                    |
| ------------- | --------------------------------------------------------------------------------------------------------- | --- | --------------------- |
| `key`         | `string`                                                                                                  | —   | 稳定且唯一的标识。             |
| `title`       | `ReactNode`                                                                                               | —   | 必需。标题内容。              |
| `description` | `ReactNode`                                                                                               | —   | 补充说明。                 |
| `target`      | `string \| (() => HTMLElement \| null)`                                                                   | —   | 目标的选择器或返回元素的函数；省略时居中。 |
| `placement`   | [`PopupOptions`](https://ifhover.github.io/leaf-ui/api/popup-options.md#popupoptions)`['popupPlacement']` | —   | 布局或展示位置。              |

## Tour API

| 属性                  | 类型                                                                                                           | 默认值        | 说明                         |
| ------------------- | ------------------------------------------------------------------------------------------------------------ | ---------- | -------------------------- |
| `open`              | `boolean`                                                                                                    | —          | 必需。控制面板是否展开。               |
| `steps`             | `readonly `[`TourStep`](#tourstep)`[]`                                                                       | —          | 必需。引导的步骤列表。                |
| `current`           | `number`                                                                                                     | —          | 受控的当前步骤索引。                 |
| `defaultCurrent`    | `number`                                                                                                     | `0`        | 初始步骤索引。                    |
| `onChange`          | `(current: number) => void`                                                                                  | —          | 值发生变化时调用。                  |
| `onClose`           | `() => void`                                                                                                 | —          | 请求关闭时调用。                   |
| `onFinish`          | `() => void`                                                                                                 | —          | 完成时调用一次。                   |
| `missingTarget`     | `'center' \| 'skip' \| 'close'`                                                                              | `'center'` | 目标缺失时居中、跳过或关闭。             |
| `mask`              | `boolean`                                                                                                    | `true`     | 展示引导遮罩。                    |
| `padding`           | `number`                                                                                                     | `8`        | 内容或高亮目标的内边距。               |
| `getPopupContainer` | [`PopupOptions`](https://ifhover.github.io/leaf-ui/api/popup-options.md#popupoptions)`['getPopupContainer']` | —          | 返回浮层的挂载容器，也可返回 ShadowRoot。 |

## 类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

```ts
import type { TourStep, TourProps } from '@ifhover/leaf-ui';
```

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。