概述

Kendo UI For Angular Chip允許用戶輸入信息、做出選擇、過濾內容或者觸發動作。

Chip以緊湊的形式表示一個復雜的信息片段，例如一個實體可以是一個人、一個地方或一個事物，可以單擊或刪除組件，并支持各種樣式選項。Chip通常用于電子郵件模板，其中每個Chip是一個人。

下面的示例演示了實際的Chip。

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

import { AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';
import { ChipRemoveEvent } from '@progress/kendo-angular-buttons';

@Component({
selector: 'my-app',
template: `
<div class="k-block">
<kendo-chip
*ngFor="let contact of selectedContacts"
[label]="contact.label"
[removable]="true"
[iconClass]="contact.iconClass"
(remove)="onRemove($event)"
>
</kendo-chip>
<div class="example">
<kendo-autocomplete
#contactslist
[data]="contacts"
class="contacts"
valueField="label"
[kendoDropDownFilter]="{ operator: 'contains' }"
[filterable]="true"
placeholder="To: Email Adress*"
(valueChange)="valueChange($event)"
>
</kendo-autocomplete>
<textarea class="k-textarea k-input">Hi there! Don’t miss out our dinner party!</textarea>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
styles: [
`
.k-chip {
margin-right: 10px;
}
.k-block {
min-height: 300px;
padding: 20px;
}
.k-textarea {
width: 100%;
min-height: 145px;
}
.contacts {
border-width: 0 0 1px 0;
width: 100%;
margin: 30px 0;
}
.contacts.k-focus {
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.03);
}
.pedro {
background-image: url('//demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg');
}
.thomas {
background-image: url('//demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg');
}
.christina {
background-image: url('//demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg');
}
.paula {
background-image: url('//demos.telerik.com/kendo-ui/content/web/Customers/RATTC.jpg');
}
.maria {
background-image: url('//demos.telerik.com/kendo-ui/content/web/Customers/ALFKI.jpg');
}
.yang {
background-image: url('//demos.telerik.com/kendo-ui/content/web/Customers/CHOPS.jpg');
}
.anna {
background-image: url('//demos.telerik.com/kendo-ui/content/web/Customers/EASTC.jpg');
}
`
]
})
export class AppComponent {
@ViewChild('contactslist') public list: AutoCompleteComponent;

public contacts: Array<{ label: string, iconClass: string }> = [
{ label: 'Pedro Afonso', iconClass: 'k-chip-avatar pedro' },
{ label: 'Maria Shore', iconClass: 'k-chip-avatar maria' },
{ label: 'Thomas Hardy', iconClass: 'k-chip-avatar thomas' },
{ label: 'Christina Berg', iconClass: 'k-chip-avatar christina' },
{ label: 'Paula Wilson', iconClass: 'k-chip-avatar paula' }
];

public selectedContacts: Array<{ label: string, iconClass: string }> = [this.contacts[1]];

public valueChange(contact: string): void {
if (contact === '') {
return;
}

const contactData = this.contacts.find((c) => c.label === contact);

if (contactData !== undefined && !this.selectedContacts.includes(contactData)) {
this.selectedContacts.push(contactData);
}

this.list.reset();
}

public onRemove(e: ChipRemoveEvent): void {
console.log('Remove event arguments: ', e);
const index = this.selectedContacts.map((c) => c.label).indexOf(e.sender.label);
this.selectedContacts.splice(index, 1);
}
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule, DropDownsModule],
providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }],
})
export class AppModule {}

main.ts

import './polyfills';

import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

關鍵特性

• 內容—您可以通過傳遞字符串或使用自定義配置選項來指定芯片的內容。
• 用于不同用例的Chip集—根據需求，您可以實現不同的Chip集，以緊湊的形式顯示復雜的信息，例如用于集合的過濾器、具有多個選擇選項的多個Chip、可以由用戶動態添加或刪除的文本條目等等。
• 自定義—你可以添加一個選擇或刪除自定義圖標的Chip，以及顯示在它的頭像。
• 外觀—Chip提供即用型，預定義的造型選項集。
• 全球化—所有Kendo UI for Angular Buttons都提供全球化選項。