エレメントの状態
インタラクティブなフロー要素は、ユーザーの操作に応じて外観が変化します。たとえば、タップされたクイズの選択肢は Selected 状態になり、フォーカスされた入力欄は Active 状態になります。条件によって変化する状態もあります。たとえば、ボタンを disable（無効化）することが可能です。アプリのコードを変更することなく、各状態に個別にスタイルを設定して、ユーザーに視覚的なフィードバックを提供しましょう。
要素の種類別に使用可能な状態
| 要素の種類 | 組み込み状態 | 追加可能な状態 |
|---|---|---|
| 選択可能な要素 | デフォルト、選択済み | 無効 |
| 入力欄 | デフォルト、アクティブ、無効 | 無効 |
| タップ操作が設定された任意の要素 — ボタン、画像、アイコン、コンテナなど | デフォルト | 無効 |
| プログレスインジケーターのステップ | 完了、現在、未達 | — |
Addable ステートはデフォルトでは表示されません — States settings を開いて追加してください。これらは 条件駆動型 です: どのタイミングで有効化するかを自分で定義します。
状態をスタイリングする方法
- 要素を選択します。右パネルの States セクションに、その要素がサポートする状態の一覧が表示されます。
- States セクションで、対象の状態をアクティブにします。必要に応じて条件付き無効状態を追加してください。
- 塗りつぶし、ボーダー、タイポグラフィなど、任意のプロパティを変更します。変更はその状態にのみ適用されます。
ネストされた要素は親と一緒にステートフルになります。子への変更は、親のアクティブな状態にスコープされます。
- ビルダーは実行時に一致するスタイルを適用します。
選択可能な要素のステート
クイズのオプション、プロダクト、タブ、トグルとチェックボックス、そしてカスタムの選択可能な要素を含む選択可能な要素には、あらかじめ2つのステートが用意されています。
- Default: 要素のデフォルトの表示状態。
- Selected: ユーザーが要素をタップしたときに適用されます。ユーザーが選択を解除すると、ビルダーは Default に戻ります。
シングルチョイスグループでは、1つの要素を選択すると他の要素の選択が解除されます。マルチチョイスグループでは、複数の要素を同時に選択できます。トグルは独立しており、1つを選択しても他の要素には影響しません。詳細はグループタイプを参照してください。
状態別のスタイルを再利用するには、まずプロダクトカードなど1つの要素にスタイルを追加します。その後、AIエディターに他の要素にも適用するよう依頼してください。状態別のスタイルは、兄弟要素間で自動的に引き継がれません。
入力の状態
- デフォルト: 入力欄の通常時の外観。
- アクティブ: 入力欄にフォーカスが当たっている間に適用される。
- 無効（Invalid）: 入力内容がバリデーションに失敗したときに適用される。たとえば、メールアドレス欄に
@が含まれていない場合など。詳しくは入力のバリデーションを参照。 - 無効化（Disabled）: 入力欄が操作できない状態。手動でこの状態を追加する。条件に基づく Disabled 状態を参照。
各状態のスタイル設定は、選択可能な要素と同じ方法で行う。対象の状態をアクティブにしてから、プロパティを変更する。
条件によるDisabledステート
Disabledステートは、ユーザーが要素を操作できないようにします。Default・Selected・Active・Invalidとは異なり、Disabledステートは自動的に有効になりません — ユーザーが定義したトリガー条件が必要です。
Disabledは以下で使用できます：
- 入力フィールド: テキスト、メール、パスワード、数値、電話番号、日付・時刻など、あらゆる入力フィールド。
- 選択可能な要素: クイズの選択肢、プロダクト、タブ、トグル、チェックボックス、およびカスタム選択可能要素。
- タップ操作のある要素: ナビゲーションアクションをトリガーするボタン、画像、アイコンなど。
Disabled ステートを追加する
Disabled ステートを追加して設定するには:
- 対象の要素を選択します。
- States セクションで、Settings をクリックします。
- Add Disabled state を選択します。Disabled ステートが States セクションに表示されます。
- 新しい Disabled ステートの横にある Edit conditional state をクリックします。
- 条件を追加します。入力が検証をパスしない限り submit ボタンを無効にしたい場合は、入力の
isValid変数をfalseと比較します。 - Disabled ステートに制限を視覚的に伝えるスタイルを設定します（例：不透明度を下げるなど）。
Adapty SDKは実行時に条件を評価し、必要に応じてDisabled状態を適用します。アプリのコードは不要です。
プログレスインジケーターのステップ状態
メイン記事：プログレスインジケーター
プログレスインジケーターは、オンボーディングフローのどこまで進んだかをユーザーに示します。各ステップには3つの状態があります：
- 完了（Completed）：ユーザーがすでに通過したステップ。
- 現在（Current）：ユーザーが現在いるステップ。
- 未到達（Upcoming）：まだ到達していないステップ。