QiuYe UI
导航

Tour

产品引导组件:基于目标 selector 高亮页面元素并展示步骤 Popover,内置遮罩聚焦、Motion layoutId 迁移动画、进度显示、上一步/下一步/跳过与自动滚动定位。

tourguideonboardingpopoverspotlightmasklayoutIdmotionnavigation

快速预览

查看 Tour 组件的基本效果

Project health
Design
Build
Review

基本用法

使用 Tour 组件的基础示例

导入组件

1import { Tour } from "@/components/qiuye-ui/tour";
2import { Button } from "@/components/ui/button";
3import { useState } from "react";

使用组件

1const [open, setOpen] = useState(false);
2
3return (
4 <>
5 <Button onClick={() => setOpen(true)}>Start tour</Button>
6 <Tour
7 open={open}
8 onOpenChange={setOpen}
9 steps={[
10 {
11 target: "#sidebar",
12 title: "Navigation",
13 content: "Browse your projects here.",
14 placement: "right",
15 },
16 {
17 target: "#search",
18 title: "Search",
19 content: "Find anything in your workspace.",
20 placement: "bottom",
21 },
22 ]}
23 />
24 </>
25);

组件演示

查看组件的各种使用方式和效果

Product workspace

A compact dashboard mock for Tour interactions.

Active projects
8 live
Design system
Billing flow
Mobile QA
Docs
Insights
Velocity+18%
Open issues24
Review time2.1d

Release timeline

A long workspace view with checkpoints across the release cycle.

Planning
Approved

Scope, owners, and milestones are aligned for the next release.

2Development
3Quality review
4Go-to-market
Launch readiness
Final gate

Confirm production health, support coverage, and launch communications before release.