Lightning コミュニティ開発者ガイド
jステップ 3: ロゴコンポーネントを追加する
テーマレイアウトコンポーネントに戻って会社のロゴを追加します。
ロゴはいくつかの方法でページに追加できます。
- CSS で背景画像プロパティの一部としてデザイントークンを参照する
- 静的リソースを表示するカスタムコンポーネントを作成する ({!$Resource.MyJavascriptFile})
- アセットへのパスをサーバから取得するカスタムコンポーネントを作成する
- リッチコンテンツエディタなどの標準コンポーネントを使用する
[テーマ] パネルにアップロードしたのと同じ会社のロゴを使用する場合は、最も簡単で一貫した方法はデザイントークンを使用することです。先にコードを見てみましょう。
コンポーネントのスタイルバンドルから引用した次の CSS スニペットでは、(t() でラップされている) brandLogoImage トークンを使用して、logoContainer の背景画像として CSS に会社のロゴを挿入しています。
1.THIS .logoContainer {
2 background-image: t('url(' + brandLogoImage + ')');
3 background-position: center;
4 background-repeat: no-repeat;
5 background-size: contain;
6 width: 80%;
7 height: 50px;
8}次の例では、カスタムコンポーネントを使用して、cirruslogo という名前の静的リソースを参照しています。テーマレイアウトコンポーネントで、次のコードを、ロゴのプレースホルダコメントと共に最初の slds-col コンテナに追加します。
1<div class="logoContainer">
2 <img src="{!$Resource.cirruslogo}"/>
3</div>