Lightning コンポーネント開発者ガイド
jアプリケーションでの Salesforce Lightning Design System の使用
Salesforce Lightning Design System では、Lightning Experience と一貫性のあるデザインを作成できます。Lightning Design System スタイルを使用すれば、標準のスタイルをリバースエンジニアリングしなくても Salesforce と一貫性のある UI をカスタムアプリケーションに設定できます。
独自アプリケーションで 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 のバージョン番号 (例: SLDS203) です。こうすることで、複数のバージョンの Lightning Design System をインストールでき、コンポーネントのバージョンの利用状況を管理できます。
コンポーネントで Lightning Design System の静的バージョンを使用するには、<ltng:require/> を使用してその静的バージョンを含めます。以下に例を示します。
1<aura:component>
2 <ltng:require
3 styles="{!$Resource.SLDS203 + '/assets/styles/lightning-design-system-ltng.css'}"/>
4</aura:component>