OnboardingTemplateExperimental

Two-pane onboarding: hero panel + step flow content.

プレビュー

状態とバリエーション

この部品が持つ差し替え口は hero と右側の中身の2つだけです。左右の比と折り返しは固定なので、違いは何を入れるかで出ます。

段を追う流れ

右に OnboardingFlow を置いた既定の組み合わせです。戻る・進むの操作は OnboardingFlow が持ちます。

  1. 1
  2. 2

2 段のうち 1 段目

お名前を教えてください

画面に出る表示名です。

1枚のフォーム

右側は OnboardingFlow でなくてもかまいません。聞くことが少ないときは、段に分けず1枚に収めます。

hero を説明に使う

hero はロゴだけの場所ではありません。これから何をするのかを先に見せておくと、離脱が減ります。

  1. 1
  2. 2

2 段のうち 1 段目

お名前を教えてください

画面に出る表示名です。

Props

表は横にスクロールできます
プロパティ型初期値説明
heroReactNode-Hero side panel content (welcome / branding / illustration).
childrenReactNode-Right pane content (typically OnboardingFlow or a form).

Usage

import { OnboardingTemplate } from "@gunjo/ui"

<OnboardingTemplate hero={<HeroPanel />}>
    {/* form / OnboardingFlow */}
</OnboardingTemplate>

使用コンポーネント

OnboardingTemplateOnboardingFlowInputLabel

関連コンポーネント

AuthTemplateResponsiveAuthCardPatternStepperForm