lightning:buttonIconStateful

lightning:buttonIconStateful コンポーネントは、2 つの状態を切り替えるアイコンのみのボタン要素を表します。たとえば、このコンポーネントを使用して、ブログ投稿に関する顧客のフィードバック (賛成または反対) を取得できます。ボタンをクリックすると、onclick に設定されたクライアント側コントローラメソッドがトリガされ、selected 属性を使用してアイコンの状態が変更されます。

Lightning Design System ユーティリティアイコンカテゴリでは、lightning:buttonIconStateful で使用できる約 200 個のユーティリティアイコンを提供しています。Lightning Design System では複数のアイコンカテゴリが提供されていますが、このコンポーネントで使用できるのはユーティリティカテゴリのみです。

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

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

variant、size、class の各属性を組み合わせて、ボタンやアイコンのスタイルをカスタマイズできます。ボタンコンテナのスタイル設定をカスタマイズするには、class 属性を使用します。

次の例では、2 つの状態を切り替える [like (賛成)] ボタンを作成します。デフォルトでは、[like (賛成)] ボタンが選択されます。ボタンの状態は selected 属性に保存されます。

1<aura:component>
2    <aura:attribute name="liked" type="Boolean" default="true"/>
3    <lightning:buttonIconStateful iconName="utility:like" selected="{!v.liked}" alternativeText="Like" onclick="{! c.handleToggle }"/>
4<aura:component>

[dislike (反対)] ボタンを選択すると、[like (賛成)] ボタンの状態も切り替わり、選択解除されます。

1({
2    handleToggle : function (cmp, event) {
3        var liked = cmp.get("v.liked");
4        cmp.set("v.liked", !liked);
5    }
6})

メソッド

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

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

属性