コンポーネントの状態を作成

条件付きの可視性と、注意深くコンポーネントを配置することで、さまざまな条件に基づいてコンポーネントの見え方を変えることができます。

スキルレベル: 中級

開始前に

• 画面とコンポーネントおよびフィルターと条件について知っておく必要あり

• この機能を使用するには有料のAdaloプランは必要ありません

手順

複数の状態を持つコンポーネントを作成する必要がある場合もあるかと思います。例えば、入力が行われるまでグレーアウトされているボタンなどです。Adaloが画面をレンダリングする方法により、これを非常に簡単に行うことができます。Adaloは画面を上から下にレンダリングするため、非表示のコンポーネントは下のコンポーネントで置き換えられます。入力が行われた場合に状態が変化するシンプルなボタンを作成しましょう。

1.) 画面にシンプルなボタンを追加するには、左上の大きなプラスマークをクリックします

2.) その下に、同じようなボタンを追加しますが、ボタンの色をより明るい色に設定します

3.) 最初のボタンの下部の境界線と2番目のボタンの上部の境界線がわずかに触れ合うようにします。境界線が触れ合っていることを確認するには、Cmdと**+（Mac）またはCtrlと+**（PC）を使用してズームインします。

4.) 今度は、ボタンの上にテキスト入力フィールドを追加します。左上の大きなプラスマークをクリックし、Forms and Fieldsドロップダウンセクションをクリックします。

5.) 各ボタンの表示を変更して、入力欄が入力されているかどうかに応じて表示されるボタンを異なるものにします。濃い緑のボタンをクリックし、MoreボタンをクリックしてChange Visibilityを選択します。

6.) VisibilityドロップダウンからSometimes Visibleを選択します。

7.) "Will be visible if..."ドロップダウンでOther Components > Inputを選択します。

8.) Is equal toドロップダウンをIs not equal toに変更し、可視性の3番目の入力をEmptyに設定してDoneをクリックします。

9.) 今度は、2番目の明るいボタンをクリックし、このボタンについてもステップ5から8を繰り返します。ただし、この時は可視性をIs equal toに設定し、3番目の入力をEmptyに設定します。

このボタンは、入力欄が入力されているかどうかに基づいて色が変わります！これを機能させるためのポイントは、境界線が互いに接触しているため、可視性の条件に基づいて互いの位置を取ることができることです。

例

この解説で使用したアプリを確認してみたい場合は、こちら、例のアプリを使用したりクローンしてください。アプリをクローンする方法がわからない場合は、こちらで学ぶことができます。

もっと詳しく知る

• ステートを作成する要素は、必ず縦横に揃えて、可視条件が変化したときに同じ場所に収まるようにしてください。

• Adaloでは、どのコンポーネントからでもコンポーネントの状態を作成できます。

• Magic Textを使用してデータベースからデータを利用する可視性条件でコンポーネントの状態を作成することもできます。
• トグルのような特定のコンポーネントには、独自の状態が組み込まれています。

ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでもコミュニティフォーラムで質問できます！投稿する際は、この記事へのリンクを貼り付けることも忘れないでください！

チュートリアルやヘルプドキュメントのリクエストがありますか？こちらにお知らせください！