Lightning コンポーネント開発者ガイド
jLightning コンポーネントを使用したフローヘッダーのカスタマイズ
フローヘッダーを Lightning コンポーネントに置き換えるには、lightning:availableForFlowScreens インターフェースから screenHelpText パラメータを使用します。
デフォルトでは、フローヘッダーには実行されているフローのタイトルと、ユーザが画面レベルのヘルプにアクセスできるボタンが含まれます。
例
このコンポーネント (c:flowHeader) は、フロータイトルとヘルプボタンを表示する代わりに、会社のロゴとヘルプボタンを表示します。ユーザがモーダル内をクリックするのではなく、マウスポインタを置くと、ヘルプテキストがツールチップ形式で表示されます。このヘッダーを別の Lightning コンポーネントで使用する場合の例は、「フロー画面全体を Lightning コンポーネントに置換」を参照してください。
c:flowHeader コンポーネント
1<aura:component access="global" implements="lightning:availableForFlowScreens">
2 <!-- Gets help text from parent component -->
3 <aura:attribute name="helpText" type="String" />
4
5 <div class="slds-p-top_medium slds-clearfix">
6 <div class="slds-float_left">
7 <!-- Display company logo -->
8 <h2><img src="{!$Resource.Logo}" alt="A.W. Computing logo"/></h2>
9 </div>
10 <div class="slds-float_right" style="position:relative;">
11 <aura:if isTrue="{!v.helpText ne null}">
12 <!-- If the screen has help text, display an info icon in the header -->
13 <!-- On hover, display the screen's help text -->
14 <lightning:helptext content="{!v.helpText}" />
15 </aura:if>
16 </div>
17 </div>
18</aura:component>