外觀
Chip提供了預定義的外觀選項,如不同的大小,邊界半徑,填充模式和主題顏色。
下面的例子演示了所有可用的Chip外觀選項。
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允許你設置不同的高度和填充,為了達到這個目的可以使用size屬性,它接受ChipSize類型的值或none。
size選項支持以下值:
- small—設置padding為3px。
- medium (默認)—設置填充為4px。
- large—設置padding為5px。
- none—none選項刪除內置大小,允許自定義填充。
下面的例子演示了如何定義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允許您通過圓角屬性對組件應用不同的邊界半徑,它接受類型為chipround或none的值。
圓角選項支持以下值:
- small—設置邊框半徑為1px。
- medium (默認)—設置邊框半徑為2px。
- large—設置邊框半徑為4px。
- full—設置邊框半徑為9999px。
- nonenone—nonenone選項移除內置的圓度,允許自定義邊界半徑。
下面的示例演示如何定義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屬性設置不同的填充模式,它接受ChipFillMode或none類型的值。
fillMode選項支持以下值:
- solid (默認)—設置背景色和實線邊框。
- outline—設置透明背景和實線邊框。
- none—none選項移除內置的填充模式樣式,允許自定義背景和邊框樣式。
下面的例子演示了如何定義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屬性來設置不同的主題顏色,它接受ChipThemeColor類型的值或none。
themeColor選項支持以下值:
- base (默認)—基于基本主題顏色應用著色。
- info—基于info主題顏色應用著色。
- success—應用基于success主題顏色的著色。
- warning—基于警告主題顏色應用著色。
- error—基于錯誤主題顏色應用著色。
- none—none選項刪除內置的主題顏色,允許自定義顏色。
下面的示例演示如何定義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 });                
            
 QQ交談
QQ交談 在線咨詢
在線咨詢 
                 
                
 渝公網安備
            50010702500608號
渝公網安備
            50010702500608號
             
            
 客服熱線
客服熱線