彩票走势图

logo telerik中文文档

外观

立即下载Kendo UI for Angular

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 });
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP