Lightning コンポーネント開発者ガイド
jトークンでの式の使用
トークンでは、限られた式のセットがサポートされています。式を使用すると、1 つのトークン値を別のトークンで再利用したり、トークンを組み合わせることによってより複雑なスタイルのプロパティを形成したりできます。
相互参照トークン
1 つのトークンの値を別のトークンの定義内で参照するには、トークンをラップして標準的な式の構文で参照できるようにします。
次の例では、Salesforce によって提供されたトークンをカスタムトークン内で参照しています。標準トークンは直接表示されていませんが、次のようなものであると想像します。
1<!-- force:base tokens (SLDS standard tokens) -->
2<aura:tokens>
3 ...
4 <aura:token name="colorBackground" value="rgb(244, 246, 249)" />
5 <aura:token name="fontFamily" value="'Salesforce Sans', Arial, sans-serif" />
6 ...
7</aura:tokens>上記のことを念頭に置いて、カスタムトークン内で次のように標準トークンを参照できます。
1<!-- defaultTokens.tokens (your tokens) -->
2<aura:tokens extends="force:base">
3 <aura:token name="mainColor" value="{! colorBackground }" />
4 <aura:token name="btnColor" value="{! mainColor }" />
5 <aura:token name="myFont" value="{! fontFamily }" />
6</aura:tokens>相互参照できるのは、同じファイルまたは親で定義されているトークンのみです。
トークンリソースでの式の構文は、他のトークンへの参照のみに限定されています。
トークンの組み合わせ
個々のトークン値を組み合わせた、より複雑な CSS スタイルプロパティの形成をサポートするために、token() 関数は文字列の連結をサポートしています。たとえば、次のトークンが定義されているとします。
1<!-- defaultTokens.tokens (your tokens) -->
2<aura:tokens>
3 <aura:token name="defaultHorizonalSpacing" value="12px" />
4 <aura:token name="defaultVerticalSpacing" value="6px" />
5</aura:tokens>1/* myComponent.css */
2.THIS div.notification {
3 margin: token(defaultVerticalSpacing + ' ' + defaultHorizonalSpacing);
4 /* more styles here */
5}適切なスタイル定義を作成するために、何度でもトークンと文字列を組み合わせることができます。たとえば、margin: token(defaultVerticalSpacing + ' ' + defaultHorizonalSpacing + ' 3px'); を使用すれば、前の定義で下部の間隔をハードコードできます。
token() 関数内でサポートされている演算子は文字列連結のための「+」のみです。