Skip to content

OnBoarding 漫游式引导 ​

通过选择器定位页面元素,结合遮罩和浮层展示分步操作引导。

交互演示 React

亲手试一试,更容易理解。

在当前页面运行 OnBoarding 漫游式引导 的交互示例。

交互指南 ​

  1. 进入演示后按引导逐步浏览目标按钮。
  2. 结束后点击重新演示再次运行。
  3. Link Button 可通过 ref.reStart() 重启。

在项目中运行 ​

点击本页的“运行演示”,或在独立窗口中体验示例。也可在 src 下的页面中直接挂载现有演示:

tsx
import Example from "./components/onBoarding/Demo";

export default function ExamplePage() {
  return <Example />;
}

API 与实现要点 ​

名称类型或形式说明
stepsarray有序的步骤配置
selector() => HTMLElementnull
renderContent() => ReactNode渲染步骤说明
placementstring浮层方位
ref.reStart() => void重新开始引导

使用边界 ​

selector 必须在步骤显示时能找到目标。示例有外部图片,需要网络。遮罩覆盖页面属于此示例的预期效果。

源码位置 ​

  • 演示入口:src/components/onBoarding/Demo.tsx
  • 相关实现:src/components/onBoarding

在实践中理解 React,在分享中共同成长。