OnboardingFlow

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.

<CfOnboardingFlow>
<template #panel-wizard>...</template>
<template #panel-hotspot>...</template>
</CfOnboardingFlow>

<CfOnboardingFlow slots={{
'panel-wizard': <PanelA />,
'panel-hotspot': <PanelB />,
}} />

API

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.