概述

---

立即下載Kendo UI for Angular

Kendo UI for Angular Button是一個Angular組件，它執行任何附加到它的操作，并在用戶點擊它時觸發相應的事件。

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

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

查看源代碼：

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

關鍵特性

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

——該按鈕能夠顯示各種類型的圖標，包括內置的Kendo UI圖標以及FontAwesome和圖像圖標。

——通過使用Toggleable特性，還可以顯示Button處于非活動狀態。

——該按鈕提供了可隨時使用的預定義樣式選項集。

——所有的Kendo UI for Angular按鈕都提供全球化選項。

要了解更多關于按鈕的外觀、結構和可訪問性的信息，請訪問——這是一個提供豐富組件使用指南、可用樣式變量描述和全球化支持細節的信息門戶。