コンポーネントの使用
コンポーネントの管理
コンポーネントは、左側のコンポーネントパレットからビューにドラッグすることで、ウィジェットに追加できます。
コンポーネントはクリックすることで選択できます。複数のコンポーネントは、SHIFT
キーを押しながら選択できます。
現在の選択は、DELETE
キーを押すことで削除できます。
ビデオ — ビュー内でのコンポーネントの追加、選択、および削除。
INFO
選択を解除するには、ビューコンポーネントの周りの空いているスペースをクリックします。
位置とサイズ変更
- コンポーネントはXとYの座標を使用して配置されます。
- 各コンポーネントには、中央揃えにしたり、端からアンカーしたりできる原点があります。XとYの座標はこの原点に相対的です。
- 位置と寸法は、ピクセル (
px
) またはパーセンテージ (%
) で指定できます。 - コンポーネントはマウスを使って配置したりサイズ変更したりできるほか、プロパティパネルで直接それぞれのプロパティを編集することでも可能です。
INFO
ビューは他のコンポーネントと同様に配置されますが、ビューの原点はブラウザのビューポートに対して相対的である(または埋め込みビューの場合、ビューが挿入されるコンテナ要素に対して相対的である)点が異なります。
コンポーネントの位置決めとサイズ変更、および原点を使用してコンポーネントをコーナーにアンカーする方法。
整列と順序付け
エディタには、現在の選択に適用できる便利なアクションがあります。
整列アクションを使用すると、単一のコンポーネントをビューの中央または端に整列(移動)できます。複数のコンポーネントが選択されている場合、整列アクションはコンポーネントを互いに相対的に中央揃えまたは整列させます。例:これにより、複数のコンポーネントを互いに垂直に整列させることができます。
順序付けアクションを使用すると、コンポーネントのレイヤー順序を変更できます。コンポーネントを一度に1レイヤーずつ上下に移動したり、レイヤーリストの絶対的な最上部または最下部に送ったりできます。
ビュー内でのコンポーネントの整列と順序付け。
コンポーネントの複製
標準のコピー、切り取り、貼り付けコマンドは、エディタで選択されたコンポーネントに対して機能します。エディタ上部のそれぞれの操作ボタンを使用するか、標準のショートカットを使用できます。
- 切り取り (
⌘
+X
) - コピー (
⌘
+C
) - 貼り付け (
⌘
+V
)
コンポーネントの非表示
コンポーネントは、非表示 / 表示プロパティを切り替えることで非表示にできます。非表示のコンポーネントは、レイヤーパネルで見つけることで選択し、再度表示させることができます。
レイヤーパネル
レイヤーパネルには、ウィジェットで使用されているすべてのビューとそのコンポーネントのリストが表示されます。
レイヤーパネルは、エディタの右下にあるパネルヘッダーをダブルクリックすることで切り替えられます。パネルは、ヘッダーをクリックしてドラッグすることで垂直方向にサイズ変更できます。
- 非表示のコンポーネントは赤色で表示されます。
- コンポーネントはその名前をクリックすることで選択できます。複数のコンポーネントは、
SHIFT
キーを押しながら選択できます。
レイヤーパネルを使用して、非表示のコンポーネントを表示させるなど、異なるコンポーネントを選択する方法。
コンポーネントの名前変更
コンポーネントは、ウィジェットに追加する際にデフォルト名が付けられます。プロパティパネルの上部にあるコンポーネント名をクリックして編集することで、より意味のある名前に変更できます。
コンポーネントのグループ化
特定のビュー内のコンポーネントは、画面上部のグループボタン(フォルダアイコン)を使用するか、ctrl/⌘
+ G
を使用してグループ化できます。グループ内のアイテムは、グループ解除ボタンをクリックするか、ctrl/⌘
+ SHIFT
+ G
を使用してグループから削除できます。
要素のグループは、サイドバーのビューのコンポーネントリストでフォルダとして表示され、フォルダ内のコンポーネントを表示するか、リストで非表示にするかを選択できます。また、グループが選択されている場合、サイドバーの「選択を非表示/表示」をクリックすることで、エディタ内の選択されたコンポーネントを非表示または表示する機会があります。
グループは、サイドバー上部の名前をクリックすることで、コンポーネントやビューとまったく同じ方法で名前を変更できます。
グループ化されたコンポーネントは、位置、アンカー、サイズなどの特定の設計を保持します。グループ化された後も、これらのコンポーネントは、サイドバーでフォルダを開き、コンポーネント自体をクリックすることで、親グループ内で個別に選択できます。
Grouping Functionality
INFO
注: グループ化は、内部コンポーネント間の位置の値やその他のデータをリンクするものではありません。一般的に、編集時のグループの動作は、非グループ化された複数のコンポーネントの選択と同一です。これは単に整理のための方法です。