Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jコミュニティのカスタムコンテンツレイアウトコンポーネントの作成
コミュニティビルダーには、比率 2:1 の 2 列レイアウトなど、ページのコンテンツ領域を定義するレイアウトがいくつか用意され、すぐに使用できます。ただし、コミュニティ用にカスタマイズされたレイアウトが必要な場合は、カスタムコンテンツレイアウトコンポーネントを作成し、それをコミュニティビルダーで新規ページを作成するときに使用します。コミュニティテンプレートに付属するデフォルトページのコンテンツレイアウトを更新することもできます。
開発者コンソールでカスタムコンテンツレイアウトコンポーネントを作成すると、そのコンポーネントはコミュニティビルダーの [新規ページ] および [レイアウトを変更] ダイアログボックスに表示されます。
1.新規インターフェースをコンテンツレイアウトコンポーネントに追加する
コミュニティビルダーの [新規ページ] および [レイアウトを変更] ダイアログボックスに表示��るには、コンテンツレイアウトコンポーネントに forceCommunity:layout インターフェースを実装する必要があります。
シンプルな 2 列のコンテンツレイアウトのサンプルコードを次に示します。
1<aura:component implements="forceCommunity:layout" description=”Custom Content 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 .contentPanel:before,
2.THIS .contentPanel:after {
3 content: " ";
4 display: table;
5}
6.THIS .contentPanel:after {
7 clear: both;
8}
9.THIS .left {
10 float: left;
11 width: 50%;
12}
13.THIS .right {
14 float: right;
15 width: 50%;
16}CSS リソースの名前は componentName.css にする必要があります。
3.省略可能: SVG リソースをコンポーネントバンドルに追加する
SVG リソースをコンポーネントバンドルに追加して、コミュニティビルダーに表示されるときのコンテンツレイアウトコンポーネントのカスタムアイコンを定義できます。
コミュニティビルダーのコンテンツレイアウトコンポーネントで推奨される画像サイズは、170 x 170 ピクセルです。ただし、画像のサイズが異なる場合、コミュニティビルダーが適合するように画像を拡大縮小します。
SVG リソースの名前は componentName.svg にする必要があります。