Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jアプリケーションでの Salesforce Lightning Design System の使用
Salesforce Lightning Design System (SLDS) では、Lightning Experience との一貫性を保ったデザインを作成できます。Lightning Design System スタイルを使用すれば、標準のスタイルをリバースエンジニアリングしなくても Salesforce との一貫性を保った UI をスタンドアロンのカスタム Lightning アプリケーションに設定できます。
独自アプリケーションで force:slds を拡張すると、自動的に Lightning Design System のスタイルとデザイントークンが使用されます。これが、Lightning Design System 機能強化が常に最新の状態になり、一貫性を維持する最も簡単な方法です。
force:slds を拡張する方法は、次のとおりです。
1<aura:application extends="force:slds">
2 <!-- customize your application here -->
3</aura:application>静的リソースの使用
force:slds を拡張すると、CSS が変更されるたびに Lightning Design System スタイルのバージョンが自動的に更新されます。特定の Lightning Design System バージョンを使用する場合は、そのバージョンをダウンロードし、組織に静的リソースとして追加します。
静的リソースの最大サイズを超えない Lightning Design System のバージョンをダウンロードするには、Lightning Design System のダウンロードページに移動します。
Lightning Design System アーカイブの静的リソースの名前は SLDS### という形式にすることをお勧めします。### は Lightning Design System のバージョン番号 (例: SLDS252) です。こうすることで、複数のバージョンの Lightning Design System をインストールでき、コンポーネントのバージョンの利用状況を管理できます。
コンポーネントで Lightning Design System の静的バージョンを使用するには、<ltng:require/> を使用してその静的バージョンを含めます。次に例を示します。
1<aura:component>
2 <ltng:require
3 styles="{!$Resource.SLDS252 +
4 '/styles/salesforce-lightning-design-system.min.css'}" />
5</aura:component>