概述

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都提供全球化选项。