lightning:buttonStateful

lightning:buttonStateful コンポーネントは、ソーシャルメディアのいいね! ボタンのように、状態を切り替えるボタンを表します。ステートフルボタンには、状態に基づいて異なる表示ラベルやアイコンを表示できます。

追加のスタイルを適用するには、variant および class 属性を使用します。

Lightning Design System ユーティリティアイコンカテゴリでは、lightning:button でテキスト表示ラベルと一緒に使用できる約 200 個のユーティリティアイコンを提供しています。Lightning Design System では複数のアイコンカテゴリが提供されていますが、このコンポーネントで使用できるのはユーティリティカテゴリのみです。

ユーティリティアイコンを表示するには、https://lightningdesignsystem.com/icons/#utilityにアクセスしてください。

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

ボタンがクリックされたときの状態の変更を処理するには、onclick イベントハンドラを使用します。次の例では、ボタンの状態を切り替えることができます。デフォルトでは「Follow」(フォローする) 表示ラベルが表示され、ボタンが選択されると「Following」(フォロー中) に変わります。ボタンを選択すると状態が true に切り替わり、選択解除すると状態が false に切り替わります。状態が true のときに��タンにマウスポインタまたはフォーカスが置かれると、「Unfollow」(フォローを解除) がボタンに表示されます。

1<aura:component>
2    <aura:attribute name="buttonstate" type="Boolean" default="false"/>
3    <lightning:buttonStateful
4        labelWhenOff="Follow"
5        labelWhenOn="Following"
6        labelWhenHover="Unfollow"
7        iconNameWhenOff="utility:add"
8        iconNameWhenOn="utility:check"
9        iconNameWhenHover="utility:close"
10        state="{! v.buttonstate }"
11        onclick="{! c.handleClick }"
12    />
13</aura:component>

クライアント側のコントローラは、buttonstate 属性によって状態を切り替えます。

1({
2    handleClick : function (cmp, event, helper) {
3        var buttonstate = cmp.get('v.buttonstate');
4        cmp.set('v.buttonstate', !buttonstate);
5    }
6})

アクセシビリティに対応するには、ボタンに aria-live="assertive" 属性を含めます。aria-live="assertive" 属性を設定すると、ボタン内の <span> の値が変更されるたびに、その値が読み上げられます。

スクリーンリーダーにボタンが無効化されていることを伝えるには、disabled 属性を true に設定します。

このコンポーネントは、次のメソッドをサポートします。

focus(): フォーカスを要素に設定します。