外觀

---

立即下載Kendo UI for Angular

Chip提供了預(yù)定義的外觀選項(xiàng)，如不同的大小，邊界半徑，填充模式和主題顏色。

下面的例子演示了所有可用的Chip外觀選項(xiàng)。

app.component.ts

import { Component } from '@angular/core';
import {
ButtonSize,
ButtonRounded,
ChipFillMode,
ChipThemeColor
} from '@progress/kendo-angular-buttons';
import { IOption } from './models';

export type Option = {
type: string,
data: string[],
default: ButtonSize | ButtonRounded | ChipFillMode | ChipThemeColor
};

@Component({
selector: 'my-app',
template: `
<app-configurator
[options]="options"
(optionChange)="changeHandler($event)">
</app-configurator>

<div class="example-config">
<kendo-chip
[size]="size"
[rounded]="rounded"
[fillMode]="fillMode"
[themeColor]="themeColor"
[removable]="true">
User Settings
</kendo-chip>
</div>
`,
styles: [`
.example-config {
display: flex;
justify-content: space-around;
}
`]
})
export class AppComponent {
public size: ButtonSize = 'medium';
public rounded: ButtonRounded = 'medium';
public fillMode: ChipFillMode = 'solid';
public themeColor: ChipThemeColor = 'base';

public options: Option[] = [{
type: 'size',
data: ['small', 'medium', 'large'],
default: this.size
}, {
type: 'rounded',
data: ['small', 'medium', 'large', 'full'],
default: this.rounded
}, {
type: 'fillMode',
data: ['solid', 'outline'],
default: this.fillMode
}, {
type: 'themeColor',
data: ['base', 'info', 'success', 'warning', 'error'],
default: this.themeColor
}];

public changeHandler({optionType, optionValue}: IOption): void {
this[optionType] = optionValue;
}
}

app.module.ts

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { LabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';
import { ConfiguratorComponent } from './configurator.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent, ConfiguratorComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
ButtonsModule,
LabelModule,
DropDownsModule
]
})
export class AppModule { }

configurator.component.ts

import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { Option } from './app.component';
import { IOption } from './models';

@Component({
selector: 'app-configurator',
template: `
<div class="configurator">
<kendo-label *ngFor="let option of options" [text]="option.type | uppercase">
<kendo-dropdownlist
[style.width.px]="125"
[data]="option.data"
[value]="option.default"
(selectionChange)="onItemClick($event, option.type)">
</kendo-dropdownlist>
</kendo-label>
</div>
`,
encapsulation: ViewEncapsulation.None,
styles: [`
.configurator {
display: flex;
justify-content: space-around;
background-color: rgba(0, 0, 0, .03);
border: 1px solid rgba(0, 0, 0, .08);
margin: 0 0 20px;
padding: 20px;
}

.configurator kendo-label {
text-align: center;
display: inline-grid;
}

.configurator .k-label {
color: #a1a1a1;
}
`]
})
export class ConfiguratorComponent {
@Input() options: Option[];
@Output() optionChange: EventEmitter<IOption> = new EventEmitter();

public onItemClick(value: string, type: string): void {
this.optionChange.emit({optionType: type, optionValue: value});
}
}

modles.ts

expert interface IOption {
optionType: string;
optionValue: string;
}

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允許你設(shè)置不同的高度和填充,為了達(dá)到這個目的可以使用size屬性,它接受ChipSize類型的值或none。

size選項(xiàng)支持以下值:

• small—設(shè)置padding為3px。
• medium (默認(rèn))—設(shè)置填充為4px。
• large—設(shè)置padding為5px。
• none—none選項(xiàng)刪除內(nèi)置大小，允許自定義填充。

下面的例子演示了如何定義Chip的大小。

app.component.ts

import { Component } from '@angular/core';

import { SVGIcon, mapMarkerTargetIcon } from '@progress/kendo-svg-icons';

@Component({
selector: 'my-app',
template: `
<div class="example">
<kendo-chip size="small" [svgIcon]="mapMarkerSVG">Small</kendo-chip>
<kendo-chip size="medium" [svgIcon]="mapMarkerSVG">Medium</kendo-chip>
<kendo-chip size="large" [svgIcon]="mapMarkerSVG">Large</kendo-chip>
<kendo-chip size="none" [svgIcon]="mapMarkerSVG" class="custom-size">Custom</kendo-chip>
</div>
`,
styles: [`
.example {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
}

.custom-size {
padding: 5px 30px;
}
`]
})
export class AppComponent {
public mapMarkerSVG: SVGIcon = mapMarkerTargetIcon;
}

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 { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
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允許您通過圓角屬性對組件應(yīng)用不同的邊界半徑，它接受類型為chipround或none的值。

圓角選項(xiàng)支持以下值：

• small—設(shè)置邊框半徑為1px。
• medium (默認(rèn))—設(shè)置邊框半徑為2px。
• large—設(shè)置邊框半徑為4px。
• full—設(shè)置邊框半徑為9999px。
• nonenone—nonenone選項(xiàng)移除內(nèi)置的圓度，允許自定義邊界半徑。

下面的示例演示如何定義Chip的邊界半徑:

app.component.ts

import { Component } from '@angular/core';

import { SVGIcon, globeOutlineIcon } from '@progress/kendo-svg-icons';

@Component({
selector: 'my-app',
template: `
<div class="example">
<kendo-chip rounded="none" [svgIcon]="globeOutlineSVG">No Roundness</kendo-chip>
<kendo-chip rounded="small" [svgIcon]="globeOutlineSVG">Small</kendo-chip>
<kendo-chip rounded="medium" [svgIcon]="globeOutlineSVG">Medium</kendo-chip>
<kendo-chip rounded="large" [svgIcon]="globeOutlineSVG">Large</kendo-chip>
<kendo-chip rounded="full" [svgIcon]="globeOutlineSVG">Full</kendo-chip>
<kendo-chip rounded="none" [svgIcon]="globeOutlineSVG" class="custom-rounded">Custom</kendo-chip>
</div>
`,
styles: [`
.example {
display: flex;
justify-content: space-evenly;
}

.custom-rounded {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
`]
})
export class AppComponent {
public globeOutlineSVG: SVGIcon = globeOutlineIcon;
}

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 { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
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允許你使用fillMode屬性設(shè)置不同的填充模式，它接受ChipFillMode或none類型的值。

fillMode選項(xiàng)支持以下值:

• solid (默認(rèn))—設(shè)置背景色和實(shí)線邊框。
• outline—設(shè)置透明背景和實(shí)線邊框。
• none—none選項(xiàng)移除內(nèi)置的填充模式樣式，允許自定義背景和邊框樣式。

下面的例子演示了如何定義Chip的填充模式。

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div class="example-config">
<kendo-chip fillMode="solid">Solid</kendo-chip>
<kendo-chip fillMode="outline">Outline</kendo-chip>
</div>
`,
styles: [`
.example-config {
display: flex;
justify-content: space-around;
}
`]
})
export class AppComponent {}

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 { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
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允許你通過使用themeColor屬性來設(shè)置不同的主題顏色，它接受ChipThemeColor類型的值或none。

themeColor選項(xiàng)支持以下值:

• base (默認(rèn))—基于基本主題顏色應(yīng)用著色。
• info—基于info主題顏色應(yīng)用著色。
• success—應(yīng)用基于success主題顏色的著色。
• warning—基于警告主題顏色應(yīng)用著色。
• error—基于錯誤主題顏色應(yīng)用著色。
• none—none選項(xiàng)刪除內(nèi)置的主題顏色，允許自定義顏色。

下面的示例演示如何定義Chip的主題顏色。

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div class="example">
<kendo-chip themeColor="base">Base</kendo-chip>
<kendo-chip themeColor="info">Info</kendo-chip>
<kendo-chip themeColor="success">Success</kendo-chip>
<kendo-chip themeColor="warning">Warning</kendo-chip>
<kendo-chip themeColor="error">Error</kendo-chip>
</div>
`,
styles: [`
.example {
display: flex;
justify-content: space-evenly;
}
`]
})
export class AppComponent {}

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 { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
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 });