Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jトークンの定義と使用
トークンは、<aura:token> コンポーネントを使用して指定する名前-値のペアです。トークンをトークンバンドル内で定義してから、コンポーネントの CSS スタイルリソースでトークンを使用します。
トークンの定義
新しいトークンをバンドルの <aura:tokens> コンポーネントの子コンポーネントとして追加します。次に例を示します。
1<aura:tokens>
2 <aura:token name="myBodyTextFontFace"
3 value="'Salesforce Sans', Helvetica, Arial, sans-serif"/>
4 <aura:token name="myBodyTextFontWeight" value="normal"/>
5 <aura:token name="myBackgroundColor" value="#f4f6f9"/>
6 <aura:token name="myDefaultMargin" value="6px"/>
7</aura:tokens><aura:token> タグで使用できる属性は name と value のみです。
トークンの使用
defaultTokens バンドルで作成されたトークンは、名前空間内のコンポーネントで自動的に使用可能になります。設計トークンを使用するには、token() 関数およびコンポーネントバンドルの CSS リソースのトークン名を使用して参照します。次に例を示します。
1.THIS p {
2 font-family: token(myBodyTextFontFace);
3 font-weight: token(myBodyTextFontWeight);
4}トークンを参照するために、より簡潔な関数名を使用するには、token() 関数の代わりに t() 関数を使用してください。この 2 つは同じものです。トークン名が命名規則に従っている場合や十分に内容が伝わるものであれば、簡潔な関数名を使用しても CSS スタイルの明確さが損なわれません。