Lightning コンポーネント開発者ガイド
jコミュニティのカスタムページレイアウトコンポーネントの作成
コミュニティビルダーに含まれているさまざまな既製のレイアウトを利用して、コミュニティのページの外観をすばやく変更できます。ただし、コミュニティ用にカスタマイズされたレイアウトが必要な場合は、カスタムレイアウトコンポーネントを作成してコミュニティビルダーで新規ページを作成するときに使用します。コミュニティテンプレートに付属するデフォルトページのレイアウトを更新することもできます。
開発者コンソールでカスタムレイアウトコンポーネントを作成すると、コミュニティビルダーの次の場所に表示されます。
- [ページを新規作成] ダイアログボックス。カスタムレイアウトを表示するには、[レイアウト] タブで [カスタム] ビューを選択します。
- [レイアウトを変更] ダイアログボックス。カスタムレイアウトを表示するには、[カスタム] タブを選択します。
1. 新規インターフェースをレイアウトコンポーネントに追加する
[ページを新規作成] および [レイアウトを変更] ダイアログボックスをコミュニティビルダーに表示するには、カスタムレイアウトコンポーネントに forceCommunity:layout インターフェースを実装する必要があります。
シンプルな 2 列のレイアウトのサンプルコードを次に示します。
1<aura:component implements="forceCommunity:layout" access="global">
2 <aura:attribute name="column1" type="Aura.Component[]" required="false"></aura:attribute>
3 <aura:attribute name="column2" type="Aura.Component[]" required="false"></aura:attribute>
4
5 <div class="container">
6 <div class='contentPanel'>
7 <div class='left'>
8 {!v.column1}
9 </div>
10 <div class='right'>
11 {!v.column2}
12 </div>
13 </div>
14 </div>
15</aura:component>2. CSS リソースをコンポーネントバンドルに追加する
次に、必要に応じて CSS リソースを追加してレイアウトのスタイルを設定します。
シンプルな 2 列のレイアウトのサンプル CSS を次に示します。
1.THIS .ui-widget {
2 margin: 36px 0;
3}
4.THIS .contentPanel:before,
5.THIS .contentPanel:after {
6 content: " ";
7 display: table;
8}
9.THIS .contentPanel:after {
10 clear: both;
11}
12.THIS .left {
13 float: left;
14 width: 50%;
15}
16.THIS .right {
17 float: right;
18 width: 50%;
19}CSS リソースの名前は componentName.css にする必要があります。たとえば、コンポーネント communityLayout.cmp の CSS リソースは communityLayout.css です。
3 省略可能: SVG リソースをコンポーネントバンドルに追加する
SVG リソースをコンポーネントバンドルに追加して、コミュニティビルダーに表示されるときのレイアウトコンポーネントのカスタムアイコンを定義できます。
コミュニティビルダーのレイアウトコンポーネントで推奨される画像サイズは、155 × 120 ピクセルです。ただし、画像のサイズが異なる場合、コミュニティビルダーが適合するように画像を拡大縮小します。
SVG リソースの名前は componentName.svg にする必要があります。