lightning:pill

lightning:pill コンポーネントは、取引先名やケース番号などの項目を表し、テキスト表示ラベルは角が丸い境界線によって囲まれています。デフォルトでは、ピルは削除ボタンと共に表示されます。ピルは、たとえばメールアドレスのリストやキーワードのリストなど、オンデマンドで追加および削除できる参照のみのテキストを表示する場合に役立ちます。

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

class 属性を使用して追加のスタイル設定を適用します。

次の例では、基本的なピルを作成します。

1<aura:component>
2    <lightning:pill label="Pill Label" href="/path/to/some/where" onremove="{! c.handleRemove }"/>
3</aura:component>

ピルには、 2 つのクリック可能な要素、テキスト表示ラベルと削除ボタンがあります。いずれの要素も onclick ハンドラをトリガします。href 値を指定すると、テキスト表示ラベルをクリックすることで onclick ハンドラがトリガされ、指定されたパスに移動します。ピルトリガの削除ボタンをクリックすると、onremove ハンドラ、onclick ハンドラの順にトリガされます。これらのイベントハンドラは省略可能です。

onclick ハンドラを実行しないようにするには、onremove ハンドラ内で event.preventDefault() をコールします。

1<aura:component>
2    <lightning:pill label="hello pill" onremove="{! c.handleRemoveOnly }" onclick="{! c.handleClick }"/>
3</aura:component>

1({
2    handleRemoveOnly: function (cmp, event) {
3        event.preventDefault();
4        alert('Remove button was clicked!');
5    },
6    handleClick: function (cmp, event) {
7        // this won't run when you click the remove button 
8        alert('The pill was clicked!');
9    }
10})

ピルには、アイコンやアバターなど、オブジェクトの種別を表す画像を含めることができます。ピルに画像を挿入するには、media 属性を使用します。

1<aura:component>
2    <lightning:pill label="Pill Label" href="/path/to/some/where">
3        <aura:set attribute="media">
4            <lightning:icon iconName="standard:account"  alternativeText="Account"/>
5        </aura:set>
6    </lightning:pill>
7</aura:component>

ピルには、コンテナが事前定義した項目のコレクションに一致しない場合 (メールアドレスが無効な場合やケース番号が存在しない場合など) にエラー状態を表示できます。エラーを含むピルを示すには hasError 属性を使用します。hasError を true に設定すると、ピルに警告アイコンが挿入され、境界線が赤に変わります。このコンテキストで独自の画像を指定しても、ピルには影響が及びません。

alternativeText 属性を使用して、ユーザのイニシャルや名前など、アバターを説明します。この説明によって、img HTML タグの alt 属性の値が指定されます。