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

lightning:breadcrumb

ユーザが表示しているページの階層パス内の項目。

lightning:breadcrumb コンポーネントは、ページのパスを親ページに対する相対パスとして表示します。ブレッドクラムは、lightning:breadcrumbs コンポーネントにネストされています。各ブレッドクラムは実行可能で、大なり記号で区切られています。ブレッドクラムが表示される順序は、マークアップでリストされている順序によって決まります。

この��ンポーネントは、Lightning Design System のブレッドクラムからスタイル設定を継承します。

次に例を示します。

1<aura:component>
2    <lightning:breadcrumbs>
3        <lightning:breadcrumb label="Parent Account" href="path/to/place/1"/>
4        <lightning:breadcrumb label="Case" href="path/to/place/2"/>
5    </lightning:breadcrumbs>
6</aura:component>

ブレッドクラムの動作はリンクと類似しています。href 属性によってリンクが指定されていない場合、値はデフォルトの javascript:void(0); に設定されます。カスタムナビゲーションを指定するには、onclick ハンドラを使用します。onclick の使用は、たとえば force:navigateToSObject などのイベントを使用して移動する場合に役立ちます。href 属性でリンクを指定する場合は、event.preventDefault() をコールすることで、リンクをスキップして、代わりにカスタムナビゲーションを使用することができます。

1<aura:component>
2    <lightning:breadcrumbs>
3        <lightning:breadcrumb label="Parent Account" href="path/to/place/1" onclick="{! c.navigateToCustomPage1 }"/>
4        <lightning:breadcrumb label="Case" href="path/to/place/2" onclick="{! c.navigateToCustomPage2 }"/>
5    </lightning:breadcrumbs>
6</aura:component>
7
8/** Client-Side Controller **/
9({
10    navigateToCustomPage1: function (cmp, event) {
11        event.preventDefault();
12        //your custom navigation here 
13    },
14    navigateToCustomPage2: function (cmp, event) {
15        event.preventDefault();
16        //your custom navigation here
17    }
18})

aura:iteration によるブレッドクラムの生成

aura:iteration を使用して項目のリストを反復処理し、ブレッドクラムを生成します。たとえば、表示ラベルと名前の値を使用してブレッドクラムの配列を作成できます。これらの値は init ハンドラ内で設定します。

1<aura:component>
2    <aura:attribute name="myBreadcrumbs" type="Object"/>
3    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
4    <lightning:breadcrumbs>
5        <aura:iteration items="{! v.myBreadcrumbs }" var="crumbs">
6            <lightning:breadcrumb label="{! crumbs.label }" onclick="{! c.navigateTo }" name="{! crumbs.name }"/>
7        </aura:iteration>
8    </lightning:breadcrumbs>
9</aura:component>
10
11/* Client-Side Controller */
12({
13    init: function (cmp, event, helper) {
14        var myBreadcrumbs = [
15            {label: 'Account', name: 'objectName' },
16            {label: 'Record Name', name: 'record' }
17        ];
18        cmp.set('v.myBreadcrumbs', myBreadcrumbs);
19    },
20    navigateTo: function (cmp, event, helper) {
21        //get the name of the breadcrumb that's clicked
22        var name = event.getSource().get('v.name');
23        
24        //your custom navigation here
25    }
26})

認証

属性名	属性型	説明	必須
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`href`	String	ブレッドクラムの移動先のページの URL。
`label`	String	ブレッドクラムのテキスト表示ラベル。	はい
`name`	String	ブレッドクラムコンポーネントの名前。この値は省略可能であり、コールバック内でブレッドクラムを識別するために使用できます。
`onclick`	Action	ブレッドクラムがクリックされたときにトリガされるアクション。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。

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

lightning:breadcrumb

認証