UIロジックの作成

複雑な体験をシミュレートするために、コンポーネントにアクションを適用させたり、バックエンドシステムからのモックデータに反応させたりするUIロジックを追加することで、ワイヤーフレームをインタラクティブなプロトタイプに変えることができます。

コンポーネントの接続

UIコンポーネント間の接続を作成し、コンポーネント同士が通信できるようにします。例えば、マウスクリック時にボタンの外観をどのように変化させるか、マウスクリック時に発せられるシグナルに応答してUIがどのアクションを実行するか、などです。

プロパティのエイリアスとステートの使用

プロパティ同士をバインドすることで、UIコンポーネント間のつながりを作ることができます。こうすることで、あるプロパティの値が親コンポーネントで変更されると、値の変更を示すシグナルを発することで、すべての子コンポーネントで自動的に変更することができます。

あるコンポーネントのプロパティを別のコンポーネントから参照するには、別のプロパティへの参照を保持するプロパティ・エイリアスを作成します。通常のプロパティ定義とは異なり、プロパティのために新しい一意の記憶領域を割り当てますが、プロパティ・エイリアスは、新しく宣言されたプロパティ（エイリアシング・プロパティと呼ばれます）を既存のプロパティ（エイリアス・プロパティ）への直接参照として接続します。データ駆動型のコンテンツは、関連するコンポーネントのパブリック・プロパティとしてエクスポートされるべきです。例えば、スピードメーターは、UIがバインドされるスピードのプロパティを持つべきです。

プロパティの値が基本状態からどのように変化するかを記述する、さまざまなUIステートを宣言できます。ステートは、UIロジックを整理する便利な方法です。トランジションをコンポーネントに関連付けることで、ステートの変更によってプロパティが変化したときに、そのプロパティがどのようにアニメーションするかを定義できます。

プロパティ・エイリアスとステートを使用してコンポーネント・インスタンスの違いを作成すると、コンポーネントを複製する代わりに再利用することができます。したがって、コンポーネントをまったく新しいコンポーネント・タイプとして処理する必要はありません。これにより、読み込みとコンパイルの時間が短縮され、最終的なアプリケーションのパッケージ・サイズも小さくなります。

UIコントロールのカスタマイズ

プリセットのUIコントロールには、デフォルトのプロパティとステートがあり、変更することができます。追加のプロパティが必要な場合は、コントロールのインスタンスをカスタム・コンポーネントに変えて、新しいプロパティを指定することができます。

式の記述

UIに特定の操作を実行させるには、JavaScriptで条件式を記述したり、数値を文字列に変換したりする必要があります。例えば、ブール演算子のAND、NOT、ORを使用してプロパティ値をバインドしたり、数値や数値範囲をマップすることができます。さらに、2つのコンポーネントのプロパティ値を双方向に同期させることもできます。

典型的な使用例

次の表は、いくつかの典型的な使用例を、詳細情報へのリンクとともにまとめたものです。