Lightning コンポーネント開発者ガイド
jLightning Design System の考慮事項
スタンドアロンアプリケーションおよび Lightning Out など、Salesforce1 および Lightning Experience 外部のコンポーネントを使用している場合、force:slds を拡張して Lightning Design System のスタイル設定をコンポーネントに適用します。基本コンポーネントで Lightning Design System を使用するためのガイドラインをいくつか示します。
基本コンポーネントでのユーティリティクラスの使用
Lightning Design System ユーティリティクラスは、コンポーネントのビジュアルデザインの基本であり、位置揃え、グリッド、間隔、タイポグラフィなどの再利用を促進します。ほとんどの基本コンポーネントには class 属性が備えられているため、ユーティリティクラスまたはカスタムクラスをコンポーネントの外部要素に追加できます。たとえば、lightning:button にスペーシングのユーティリティクラスを適用できます。
1<lightning:button name="submit" label="Submit" class="slds-m-around_medium"/>1<button class="slds-button slds-button_neutral slds-m-around_medium"
2 type="button" name="submit">Submit</button>1<lightning:badge label="My badge" class="myCustomClass"/>提供されている CSS のスキャフォールディングを超えて、詳細レベルで柔軟にコンポーネントをカスタマイズできます。独自の本文マークアップを作成できる lightning:card を見ていきましょう。本文マークアップで slds-p-horizontal_small または slds-card__body_inner クラスを適用して、本文の前後にパディングを追加できます。
1<!-- lightning:card example using slds-p-horizontal_small class -->
2<lightning:card>
3 <aura:set attribute="title">My Account</aura:set>
4 <aura:set attribute="footer">Footer</aura:set>
5 <aura:set attribute="actions">
6 <lightning:button label="New"/>
7 </aura:set>
8 <p class="slds-p-horizontal_small">
9 Card Body
10 </p>
11 </lightning:card>1<!-- lightning:card example using slds-card__body_inner -->
2<lightning:card>
3 <aura:set attribute="title">My Account</aura:set>
4 <aura:set attribute="footer">Footer</aura:set>
5 <aura:set attribute="actions">
6 <lightning:button label="New"/>
7 </aura:set>
8 <div class="slds-card__body_inner">
9 Card Body
10 </div>
11</lightning:card>カスタムコンポーネントのスタイル設定の適用
ときとして、ユーティリティクラスでは不十分で、コンポーネントバンドルにカスタムのスタイル設定を追加する必要がある場合があります。前に、カスタムクラスを作成して class 属性に渡すことができることを説明しました。所有していないクラスはいつでも変更される可能性があるため、所有していないクラス名をターゲットとするのではなく、クラスを作成することをおすすめします。たとえば、.slds-input や .lightningInput はデフォルトで、基本コンポーネントで使用可能な CSS クラスであるため、ターゲットとしないでください。コンポーネント間で設計が一致するように、トークンを使用することも検討できます。トークンバンドルで値を指定し、コンポーネントの CSS リソースで再利用します。
レイアウトにグリッドを使用
lightning:layout は柔軟なグリッドシステムへの答えです。lightning:layoutItem コンポーネントを lightning:layout で囲むとシンプルなレ���アウトが完成し、slds-grid クラスで div コンテナが作成されます。追加の Lightning Design System グリッドクラスを適用するには、lightning:layout 属性の任意の組み合わせを指定します。たとえば、vertical-align="stretch" を指定して slds-grid_vertical-stretch クラスを追加します。horizontalAlign、verticalAlign、および pullToBoundary 属性を使用して、Lightning Design System グリッドクラスをコンポーネントに適用できます。ただし、これらの属性を介して使用できないグリッドクラスもあります。追加のグリッドクラスを指定するには、class 属性を使用します。次のグリッドクラスは class 属性を使用して追加できます。
- .slds-grid_frame
- .slds-grid_vertical
- .slds-grid_reverse
- .slds-grid_vertical-reverse
- .slds-grid_pull-padded-x-small
- .slds-grid_pull-padded-xx-small
- .slds-grid_pull-padded-xxx-small
1<lightning:layout horizontalAlign="space" class="slds-grid_reverse">
2 <lightning:layoutItem padding="around-small">
3 <!-- more markup here -->
4 </lightning:layoutItem>
5 <!-- more lightning:layoutItem components here -->
6</lightning:layout>基本コンポーネントへのバリエーションの適用
コンポーネントのバリエーションはそのコンポーネントの設計バリエーションを参照して、ユーザがコンポーネントの外観を容易に変更できるようにします。基本コンポーネントのバリエーションを各々の Lightning Design System バリエーションと一致させようとしますが、1 対 1 の対応ではありません。ほとんどの基本コンポーネントには variant 属性が用意されています。たとえば、lightning:button はさまざまなテキストや背景色をボタンに適用するために、base、neutral、brand、destructive、inverse などの多くのバリエーションをサポートしています。
1<lightning:button variant="brand" label="Brand" onclick="{! c.handleClick }" />success バリエーションはサポートされていません。ただし、slds-button_success クラスを追加して同じ結果を得ることができます。
1<lightning:button name="submit" label="Submit" class="slds-button_success"/>1<aura:component>
2 <ul class="slds-has-dividers_around-space">
3 <li class="slds-item">
4 <lightning:tile label="Anypoint Connectors" href="/path/to/somewhere" class="slds-tile_board">
5 <p class="slds-text-heading_medium">$500,000</p>
6 <p class="slds-truncate" title="Company One"><a href="#">Company One</a></p>
7 <p class="slds-truncate">Closing 9/30/2015</p>
8 </lightning:tile>
9 </li>
10 </ul>
11</aura:component>必要なバリエーションがない場合は、独自のカスタム CSS クラスを作成する前に、Lightning Design System クラスを基本コンポーネントに渡すことができるかどうかを確認します。恐れずに基本コンポーネントの Lightning Design System クラスやバリエーションを試してみてください。詳細は、「Lightning Design System」を参照してください。