概述

---

立即下載Kendo UI for Angular

Kendo UI for Angular Button是一個Angular組件，它執(zhí)行任何附加到它的操作，并在用戶點(diǎn)擊它時觸發(fā)相應(yīng)的事件。

為了與用戶溝通其目的，Button通過顯示文本、圖標(biāo)和文本或僅顯示圖標(biāo)來顯示一條信息，Button提供配置屬性和預(yù)定義的樣式選項(xiàng)集，用于增強(qiáng)其外觀。

下面的示例演示了按鈕的操作：

查看源代碼：

app.component.ts：

import { Component } from '@angular/core';
import { SVGIcon, folderIcon } from '@progress/kendo-svg-icons';

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>Solid Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" title="Browse"></button>
</p>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>Flat Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()" fillMode="flat">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" fillMode="flat">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" fillMode="flat" title="Browse"></button>
</p>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>Outline Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()" fillMode="outline">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" fillMode="outline">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" fillMode="outline" title="Browse"></button>
</p>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>Clear Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()" fillMode="clear">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" fillMode="clear">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" fillMode="clear" title="Browse"></button>
</p>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>Link Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()" fillMode="link">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" fillMode="link">Browse</button>
<button kendoButton (click)="onButtonClick()" [svgIcon]="folderSVG" fillMode="link" title="Browse"></button>
</p>
</div>
</div>
`
})

export class AppComponent {
public folderSVG: SVGIcon = folderIcon;
public onButtonClick(): void {
console.log('click');
}
}

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

關(guān)鍵特性

禁用按鈕——您可以使用Button的配置選項(xiàng)來禁用組件，這樣用戶就不能與其交互了。

圖標(biāo)按鈕——該按鈕能夠顯示各種類型的圖標(biāo)，包括內(nèi)置的Kendo UI圖標(biāo)以及FontAwesome和圖像圖標(biāo)。

Toggleable按鈕——通過使用Toggleable特性，還可以顯示Button處于非活動狀態(tài)。

外觀——該按鈕提供了可隨時使用的預(yù)定義樣式選項(xiàng)集。

全球化——所有的Kendo UI for Angular按鈕都提供全球化選項(xiàng)。

要了解更多關(guān)于按鈕的外觀、結(jié)構(gòu)和可訪問性的信息，請?jiān)L問Progress Design System documentation——這是一個提供豐富組件使用指南、可用樣式變量描述和全球化支持細(xì)節(jié)的信息門戶。