外部 CSS の使用

次に <ltng:require> の使用例を示します。

resourceName は、静的リソースの [名前] です。管理パッケージでは、リソース名にパッケージ名前空間プレフィックス ($Resource.yourNamespace__resourceName など) を含める必要があります。個々のグラフィックやスクリプトなど、スタンドアロンの静的リソースの場合、必要なのはそれだけです。アーカイブ静的リソース内の項目を参照するには、項目へのパスの残りを文字列の連結を使用して含めます。

次に、スタイルの読み込みに関する考慮事項を示します。

CSS のセットの読み込み

CSS のセットを読み込むには、styles 属性でリソースのカンマ区切りのリストを指定します。

式で $Resource が解析される方法に予測できない動作があるため、複数の $Resource 参照を 1 つの属性に含めるには join 演算子を使用します。たとえば、コンポーネントに追加するスタイルシートが複数ある場合、styles 属性は次のようにする必要があります。

メモ

読み込み順序

スタイルはリストの順序で読み込まれます。

1 回のみの読み込み

同じコンポーネントまたは異なるコンポーネントの複数の <ltng:require> タグでスタイルが指定されていても、スタイルが読み込まれるのは 1 回のみです。

カプセル化

カプセル化と再利用性を確保するには、CSS リソースを使用するすべての .cmp または .app リソースに <ltng:require> タグを追加します。

<ltng:require> には、JavaScript ライブラリのリストを読み込む scripts 属性もあります。afterScriptsLoaded イベントを使用すると、scripts の読み込み後にコントローラアクションをコールできます。これは scripts を読み込むことによってのみトリガされ、styles の CSS が読み込まれたときにトリガされることはありません。

静的リソースについての詳細は、Salesforce オンラインヘルプの「静的リソース」を参照してください。