この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:tile

レコードに関連付けられた関連情報のグループ。

lightning:tile コンポーネントは、レコードに関連付けられた関連情報をグループ化します。この情報はアクション可能にでき、lightning:icon や lightning:avatar コンポーネントなどの図とペアにできます。

class 属性を使用してスタイル設定をカスタマイズします。たとえば、slds-tile--board クラスを指定して board バリエーションを作成します。タイルのボディのスタイルを設定するには、Lightning Design System ヘルパークラスを使用します。

このコンポーネントは、Lightning Design System のタイルからスタイル設定を継承します。

次に例を示します。

1<aura:component>
2    <lightning:tile label="Lightning component team" href="/path/to/somewhere">
3        <p class="slds-truncate" title="7 Members">7 Members</p>
4    </lightning:tile>
5</aura:component>

アイコンまたはアバターを挿入するには、これを media 属性に渡します。定義リストを使用して、アイコンを表示するタイルを作成できます。次の例では、slds-dl--horizontal などのヘルパークラスを使用して、アイコンと一部のテキストを揃えます。

1<aura:component>
2    <lightning:tile label="Salesforce UX" href="/path/to/somewhere">
3        <aura:set attribute="media">
4            <lightning:icon iconName="standard:groups"/>
5        </aura:set>
6        <dl class="slds-dl--horizontal">
7            <dt class="slds-dl--horizontal__label">
8                <p class="slds-truncate" title="Company">Company:</p>
9            </dt>
10            <dd class="slds-dl--horizontal__detail slds-tile__meta">
11                <p class="slds-truncate" title="Salesforce">Salesforce</p>
12            </dd>
13            <dt class="slds-dl--horizontal__label">
14                <p class="slds-truncate" title="Email">Email:</p>
15            </dt>
16            <dd class="slds-dl--horizontal__detail slds-tile__meta">
17                <p class="slds-truncate" title="salesforce-ux@salesforce.com">salesforce-ux@salesforce.com</p>
18            </dd>
19        </dl>
20    </lightning:tile>
21</aura:component>

また、次の例のように、順序なしリストを使用して、アバターを表示するタイルのリストを作成することもできます。

1<aura:component>
2    <ul class="slds-has-dividers--bottom-space">
3        <li class="slds-item">
4            <lightning:tile  label="Astro" href="/path/to/somewhere">
5                <aura:set attribute="media">
6                    <lightning:avatar src="/path/to/img" alternativeText="Astro"/>
7                </aura:set>
8                <ul class="slds-list--horizontal slds-has-dividers--right">
9                    <li class="slds-item">Trailblazer, Salesforce</li>
10                    <li class="slds-item">Trailhead Explorer</li>
11                </ul>
12            </lightning:tile>
13        </li>
14        <!-- More list items here -->
15    </ul>
16</aura:component>

認証

属性名	属性型	説明	必須
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	外部要素に適用される CSS クラス。このスタイルは、コンポーネントに関連付けられている基本クラスに追加されます。
`href`	String	リンク先のページの URL。
`label`	String	タイルやフロート表示テキストに表示されるテキスト表示ラベル。	はい
`media`	Component[]	テキスト情報の横に表示されるアイコンまたは図。

Lightning コンポーネント開発者ガイド

lightning:tile

認証