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」(フォローを解除) がボタンに表示されます。

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

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

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

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

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