外觀

---

立即下載Kendo UI for Angular

按鈕提供了預定義的外觀選項，如不同的大小，邊界半徑，填充模式和主題顏色。

下面的示例演示了按鈕的所有可用外觀選項。

查看源代碼：

app.component.ts：

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

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

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

<div class="example-config">
<button kendoButton
[size]="size"
[rounded]="rounded"
[fillMode]="fillMode"
[themeColor]="themeColor">
User Settings
</button>
</div>
`,
styles: [`
.example-config {
display: flex;
justify-content: space-around;
}
`]
})
export class AppComponent {
public size: ButtonSize = 'medium';
public rounded: ButtonRounded = 'medium';
public fillMode: ButtonFillMode = 'solid';
public themeColor: ButtonThemeColor = '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', 'flat', 'outline', 'clear', 'link'],
default: this.fillMode
}, {
type: 'themeColor',
data: ['base', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'],
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});
}
}

models.ts：

export 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 });

型號

這個按鈕允許您配置它的padding寬度，為了達到這個目的，可以使用size屬性，它接受ButtonSize類型的值或none。

size選項支持以下值：

• small——設置 padding為2px和8px
• medium(默認)-設置 padding為4px和8px
• large——設置 padding為6px和8px
• none——none選項刪除內(nèi)置大小，允許自定義 padding
  

下面的示例演示如何定義Button的大小。

查看源代碼：

app.component.ts：

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

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

.custom-size {
padding: 10px 20px;
}
`]
})
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 });

圓度

該按鈕允許您通過round屬性將不同的 border radius應用到組件上，它接受ButtonRounded或none類型的值。

四舍五入選項支持以下值：

• small——設置 border radius 為1px
• medium——(默認)-設置 border radius 為2px。
• large——設置 border radius 為4px
• full ——設置 border radius 為9999px
• none——none選項移除內(nèi)置的圓度，允許自定義 border radius 

下面的示例演示如何定義按鈕的邊框半徑。

查看源代碼：

app.component.ts：

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

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

.custom-rounded {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
`]
})
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 });

填充模式

該按鈕允許您使用fillMode屬性設置不同的填充模式，它接受ButtonFillMode或none類型的值。

fillMode選項支持以下值：

• olid(默認)——設置background color和solid borders
• flat ——將transparent background and borders設置為默認狀態(tài)，將solid borders設置為聚焦狀態(tài)
• outline——設置transparent background 和solid borders
• clear——設置transparent background and borders 在默認狀態(tài)和background color集中的狀態(tài)
• link——設置transparent background and borders
• none—— none選項移除內(nèi)置的填充模式樣式，允許自定義background和border樣式

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

查看源代碼：

app.component.ts：

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

@Component({
selector: 'my-app',
template: `
<div class="example-config">
<button kendoButton fillMode="solid">Solid</button>
<button kendoButton fillMode="flat">Flat</button>
<button kendoButton fillMode="outline">Outline</button>
<button kendoButton fillMode="clear">Clear</button>
<button kendoButton fillMode="link">Link</button>
</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 });

主題顏色

按鈕允許您使用themeColor屬性設置不同的主題顏色，它接受ButtonThemeColor或none類型的值。

themeColor選項支持以下值：

• base(默認)——基于base主題顏色的應用著色。
• primary ——基于 primary主題顏色的應用著色。
• secondary ——基于secondary主題顏色的應用著色。
• tertiary——基于tertiary主題顏色的應用著色。
• info ——基于info主題顏色的應用著色。
• success ——基于 success主題顏色的應用著色。
• warning ——基于 warning主題顏色的應用著色。
• error ——基于error主題顏色的應用著色。
• dark——基于 dark主題顏色的應用著色。
• light ——基于 light主題色的應用著色。
• 逆——基于 inverse主題顏色的應用著色。
• none ——none選項刪除內(nèi)置的主題顏色，允許自定義顏色。

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

查看源代碼：

app.component.ts：

import { Component } from '@angular/core';
import { ButtonThemeColor } from '@progress/kendo-angular-buttons';

@Component({
selector: 'my-app',
template: `
<div class="example">
<button kendoButton
*ngFor="let color of themeColors; index as i"
[themeColor]="color">
{{color | titlecase }}
</button>
</div>
`,
styles: [`
.example {
display: flex;
justify-content: space-evenly;
}
`]
})
export class AppComponent {
public themeColors: ButtonThemeColor[] = [
'base', 'primary', 'secondary', 'tertiary',
'info', 'success', 'warning', 'error',
'dark', 'light', 'inverse'
];
}
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 });