按鈕事件

立即下載Kendo UI for Angular

Kendo UI for Angular Button 會發出一系列事件，讓你能夠控制它在用戶交互時的行為。

查看源代碼：

app.component.ts：

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

@Component({
selector: "my-app",
template: `
<p>
<button
kendoButton
(click)="onClick()"
(focus)="onFocus()"
(blur)="onBlur()"
>
My Button
</button>

<button
kendoButton
[toggleable]="true"
(selectedChange)="selectedChange()"
>
Toggleable Button
</button>
</p>
<event-log title="Event log" [events]="events"></event-log>
`,
})
export class AppComponent {
public events: string[] = [];

public onClick(): void {
this.log("click");
}

public onFocus(): void {
this.log("focus");
}

public onBlur(): void {
this.log("blur");
}

public selectedChange(): void {
this.log("selectedChange");
}

private log(event: string): void {
this.events.unshift(`${event}`);
}
}

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";
import { EventLogComponent } from "./event-log.component";

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent, EventLogComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
export class AppModule {}

event-log.component.ts：

import { Component, Input } from "@angular/core";

@Component({
selector: "event-log",
template: `
<div class="example-config">
<h5>{{ title }}</h5>
<ul class="event-log">
<li *ngFor="let event of events; let i = index">
{{ logEvents(event, i) }}
</li>
</ul>
</div>
`,
styles: [
`
.event-log {
max-height: 208px;
}
`,
],
})
export class EventLogComponent {
@Input() title: string;
@Input() events: string[];

public logEvents(event: string, i: number): string {
return `${this.events.length - i}. ${event}`;
}
}

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