Preview Updated 2026-05-10

OnboardingFlow

Onboarding flow shell with First-Run Wizard / Hotspot Tour / Full Flow tabs.

Basic usage

Three predefined tabs (ids: wizard, hotspot, flow); the consumer fills each tab via a named slot #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). The default list can also be overridden with the tabs prop.

Source: onboarding.html.

背景

src/App.vue

<script setup lang="ts">
import { CfOnboardingFlow, CfStepper } from '@chufix-design/vue';
const steps = [
  { id: '1', title: '选择主题' },
  { id: '2', title: '导入数据' },
  { id: '3', title: '邀请成员' },
];
</script>
<template>
  <div style="height: 280px;">
    <CfOnboardingFlow>
      <template #panel-wizard>
        <CfStepper :items="steps" :current="0" />
      </template>
      <template #panel-hotspot><p style="color: var(--fg-2);">热点引导：在真实组件上加圆点 + 浮窗（基于 CfTour 增强）。</p></template>
      <template #panel-flow><p style="color: var(--fg-2);">完整引导流：组合 wizard + hotspot + 完成态。</p></template>
    </CfOnboardingFlow>
  </div>
</template>

<script setup>
import { CfOnboardingFlow, CfStepper } from '@chufix-design/vue';
const steps = [
  { id: '1', title: '选择主题' },
  { id: '2', title: '导入数据' },
  { id: '3', title: '邀请成员' },
];
</script>
<template>
  <div style="height: 280px;">
    <CfOnboardingFlow>
      <template #panel-wizard>
        <CfStepper :items="steps" :current="0" />
      </template>
      <template #panel-hotspot><p style="color: var(--fg-2);">热点引导：在真实组件上加圆点 + 浮窗（基于 CfTour 增强）。</p></template>
      <template #panel-flow><p style="color: var(--fg-2);">完整引导流：组合 wizard + hotspot + 完成态。</p></template>
    </CfOnboardingFlow>
  </div>
</template>

import { CfOnboardingFlow, CfStepper } from '@chufix-design/react';

export default function Demo() {
  const steps = [
    { id: '1', title: '选择主题' },
    { id: '2', title: '导入数据' },
    { id: '3', title: '邀请成员' },
  ];
  return (
    <>
      <div style={{ height: 280 }}>
          <CfOnboardingFlow>
              <CfStepper items={steps} current={0} />
    </>
  );
}

import { CfOnboardingFlow, CfStepper } from '@chufix-design/react';

export default function Demo() {
  const steps = [
    { id: '1', title: '选择主题' },
    { id: '2', title: '导入数据' },
    { id: '3', title: '邀请成员' },
  ];
  return (
    <>
      <div style={{ height: 280 }}>
          <CfOnboardingFlow>
              <CfStepper items={steps} current={0} />
    </>
  );
}

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	First tab id	Active tab
`tabs`	`TemplatePaneTab[]`	preset	Custom tab list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

The preset tab-id lists are exported as constants PROTOCOL_TABS / NETWORK_TABS / SQL_TABS etc., and can be reused directly in custom tabs.

Template components are essentially semantic shells over CfTabs. If you don’t need a predefined tab set, use CfTabs directly.