lightning:pillContainer

lightning:pillContainer コンポーネントは、ピルのリストを表します。ピルには表示ラベルが含まれ、アバターやアイコンは含まれる場合と含まれない場合があります。デフォルトでは、ピルは削除ボタンと共に表示されますが、onitemremove イベントハンドラを指定する必要があります。ピルは、たとえばメールアドレスのリストやキーワードのリストなど、オンデマンドで追加および削除できる参照のみのテキストを表示する場合に役立ちます。

このコンポーネントは、lightning:pill を使用してピルを表示し、Lightning Design System のユーティリティアイコンをサポートします。ユーティリティアイコンを表示するには、https://lightningdesignsystem.com/icons/#utilityにアクセスしてください。

lightning:pillContainer は、Lightning Design System のピルからスタイル設定を継承します。

次の例では、テキストのみのピル、アバターを含むピル、アイコンを含むピルの 3 つのピルを作成します。

1<aura:component>
2    <aura:attribute name="items" type="List" default="[
3                {
4                    label: 'My Pill',
5                    name: 'mypill'
6                },
7                {
8                    type: 'avatar',
9                    label: 'Avatar Pill',
10                    name: 'avatarpill',
11                    src: '/my/path/avatar.jpg',
12                    fallbackIconName: 'standard:user',
13                    variant: 'circle',
14                    alternativeText: 'User avatar',
15                },
16                {
17                    type: 'icon',
18                    label: 'Icon Pill',
19                    name: 'iconpill',
20                    iconName: 'standard:account',
21                    alternativeText: 'Account',
22                },  
23            ]"/>
24    <lightning:pillContainer items="{!v.items}" />
25</aura:component>

テキストのみのピルでは、次の属性がサポートされます。これらの属性は、アバターやアイコンを含むピルを作成する場合でも使用できます。

• label: 必須。ピルに表示されるテキスト表示ラベル。
• name: ピルの名前。この値は省略可能であり、コールバック内でピルを識別するために使用できます。
• href: リンク先のページの URL。

アバターを含むピルを作成するには、次の属性を使用します。

• type: メディアタイプ。avatar を使用します。
• src: 必須。アバターの URL。
• fallbackIconName: 画像の読み込みに失敗した場合に代替として使用するアイコンの Lightning Design System 名。代替イニシャルの背景色は、これに依存します。名前は、形式「standard:account」で記述します。「standard」はカテゴリ、「account」は表示するアイコンです。標準およびカスタムカテゴリからのアイコンのみが許可されます。
• variant: アバターの形状を変更します。有効な値は、empty、circle、square です。この値のデフォルトは square です。
• alternativeText: アバターの説明に使用する代替テキストで、画像のフロート表示テキストとして表示されます。

アイコンを含むピルを作成するには、次の属性を使用します。

• type: メディアタイプ。icon を使用します。
• iconName: 必須。アイコンの Lightning Design System 名。名前は、形式「\utility:down\」で記述します。「utility」はカテゴリ、「down」は表示する特定のアイコンです。このコンポーネントで使用できるのはユーティリティアイコンのみです。
• alternativeText: アイコンを説明するために使用する代替テキスト。このテキストでは、アイコンの外観 (「ペーパークリップ」) ではなく、ボタンをクリックしたときに何が起こるか (「ファイルのアップロード」など) を説明する必要があります。

削除ボタンをクリックすると onitemremove ハンドラがトリガされます。

1<lightning:pillContainer items="{!v.items}" onitemremove="{!c.handleItemRemove}"/>

イベントハンドラでクリックされたピルの名前を取得し、ビューからピルを削除できます。

1({
2    handleRemove: function (cmp, event) {
3        var name = event.getParam("item").name;
4        alert(name + ' pill was removed!');
5        // Remove the pill from view
6        var items = cmp.get('v.items');
7        var item = event.getParam("index");
8        items.splice(item, 1);
9        cmp.set('v.items', items);       
10    }    
11})