概述

---

立即下载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按钮都提供全球化选项。

要了解更多关于按钮的外观、结构和可访问性的信息，请访问——这是一个提供丰富组件使用指南、可用样式变量描述和全球化支持细节的信息门户。