複数回プロジェクト内で利用するヘッダーやフッターなどのパーツは、「コンポーネント」として共通パーツ化することが可能です。
これらのコンポーネント化されたパーツは、どれか1つを編集すると、編集内容が配置されたすべてのコンポーネントへ反映されます。これにより、プロジェクト内で一貫性のあるデザインを簡単に作成して管理することができます。
また、コンポーネントにはプロパティを追加することできます。
プロパティを利用すれば、配置した各コンポーネントに個別の編集を加えることができます。たとえば、特定のコンポーネントのデザインを一部変更したり、リンク先を調整するなどが可能です。
コンポーネントの作成
コンポーネント化したいボックスを選択し、右クリックメニューから「コンポーネント化」を選ぶか、⌘＋J (Windowsでは Ctrl+J)を押します。
コンポーネントの管理名を入力し、プロパティとして登録したいデータにチェックを入れ「コンポーネントを作成」をクリックします。
作成されたコンポーネントは、エディター左側の追加パネル内コンポーネントタブに追加されます。
コンポーネントの配置と編集
エディター左側の追加パネル内コンポーネントタブから、配置したいコンポーネントをドラッグ&ドロップまたは、クリックでページに配置します。
配置したコンポーネントは、選択した状態でダブルクリックすると編集モードに入ります。この状態で、ボックスを追加したりスタイルを編集することができます。
なお、プロパティ登録されている箇所は、ダブルクリックで編集モードに入らずとも編集することが可能です。
コンポーネントのプロパティ
コンポーネントのプロパティは、配置したコンポーネントに個別の編集を加える際に役立ちます。
コンポーネント内の要素に登録したプロパティを紐付け、データを反映させて利用します。
プロパティの種類
コンポーネント内で扱えるプロパティは、以下の5種類です。
テキスト
画像
URL
数値
ブール値（オン・オフ）
カラー
Booleanプロパティを追加すると、条件付きスタイルのカスタムが設定できるようになります。
プロパティの利用方法
コンポーネントを選択した状態でレイヤーパネルを開くと、プロパティ管理欄が表示されます。
プロパティの追加
プロパティはコンポーネントの編集モード時に「+」ボタンから追加できます。編集モードには、コンポーネントをダブルクリックして入ります。
追加したプロパティのデータはレイヤーパネル上で編集できます。
また、編集モード時にテキストや画像ボックスをコンポーネント内に追加すると「プロパティを作成」が表示されます。クリックするとプロパティとして自動的に追加されます。
プロパティの紐付け
追加したプロパティ右横の青い丸から、コネクタをボックスに紐付けます。
数値プロパティは、パディングや横幅など各スタイルにも紐付けできます。ただし、マージン、枠線には紐付けできません。
プロパティ名の編集とプロパティ削除
プロパティ名をクリックすると、プロパティ名の編集とプロパティの削除が選択できます。
コンポーネントの解除（デタッチ）
配置したコンポーネントを解除し普通のボックスとして扱いたい場合は、 ⌘＋Shift＋J (windowsだと Ctrl+Shift+J ) を押します。
プロパティ紐付け済みのコンポーネントを解除（デタッチ）すると、コンポーネント化直前の状態で通常ボックスとして残ります。
元となっているコンポーネントや他に配置しているコンポーネントは影響を受けず、そのまま残ります。
コンポーネントの削除
コンポーネント一覧の「×」をクリックしてコンポーネントが削除できます。
コンポーネントを削除すると、ページに配置されたコンポーネントは自動的に解除（デタッチ）され、コンポーネント化直前の状態で通常ボックスとして残ります。
component