要素のステート
インタラクティブなフロー要素は、ユーザーのアクションに応じて見た目が変わります。たとえば、タップしたクイズの選択肢は選択済みになり、フォーカスされた入力フィールドはアクティブになります。条件によって変わるステートもあります。たとえば、ボタンを無効化することができます。各ステートを個別にスタイル設定することで、アプリのコードを書かずにユーザーへの視覚的なフィードバックを実現できます。
要素の種類別の利用可能な状態
| 要素の種類 | 組み込み状態 | 追加可能な状態 |
|---|---|---|
| 選択可能な要素 | Default、Selected | Disabled |
| 入力 | Default、Active、Invalid | Disabled |
| タップ操作を持つ任意の要素 — ボタン、画像、アイコン、スタックなど | Default | Disabled |
| プログレスインジケーターのステップ | Completed、Current、Upcoming | — |
| Addable ステートはデフォルトでは表示されません — States settings を開いて追加してください。これらは 条件駆動型 です: どのタイミングで有効化するかを自分で定義します。 |
ステートのスタイル設定方法
-
要素を選択します。右パネルの States セクションに、その要素が対応するステートが一覧表示されます。
-
States セクションで、対象のステートを有効にします。必要に応じて条件ベースの Disabled ステートを追加します。
-
フィル、ボーダー、タイポグラフィ、テキストコンテンツなど、任意のプロパティを変更します。変更はそのステートにのみ適用されます。 ネストされた要素は、親要素とともにステートフルになります。子要素のカラー、レイアウト、テキストコンテンツなど、あらゆる変更は親要素のアクティブなステートにスコープされます。
-
ビルダーは実行時に一致するスタイルを適用します。
ステートは、テキスト要素の見た目だけでなく、内容も変更できます。ビルダーはテキストコンテンツをフィルやボーダー幅と同じカテゴリのプロパティとして扱います。
選択可能な要素のステート
クイズの選択肢、プロダクト、タブ、トライアルトグル、そしてカスタム選択可能要素など、選択可能な要素にはデフォルトで2つのステートが用意されています。
- Default：要素の通常時の外観。
- Selected：ユーザーが要素をタップしたときに適用されます。ユーザーが選択を解除すると、ビルダーはDefaultに戻ります。 単一選択グループでは、ある要素を選択すると他の要素の選択が解除されます。複数選択グループでは、複数の要素を同時に選択できます。トグルは独立しており、一つを選択しても他の要素には影響しません。詳しくはグループタイプを参照してください。
複数の要素（クイズの選択肢など）に同じ状態のスタイルを適用したい場合は、まず1つの要素にスタイルを設定してから複製してください。状態のスタイルは兄弟要素間で引き継がれないため、現時点では複製がその回避策となります。
入力の状態
- デフォルト: 入力欄の通常時の外観。
- アクティブ: 入力欄にフォーカスが当たっている間に適用される。
- 無効（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）：まだ到達していないステップ。