ButtonGroup事件

立即下載Kendo UI for Angular

Kendo UI for Angular的ButtonGroup提供了一個導航事件，每次鍵盤導航發生時都會觸發該事件。

下面的示例演示了實際的事件。

app.component.ts

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

@Component({
selector: 'my-app',
template: `
<p>
<kendo-buttongroup (navigate)="onNavigate($event)">
<button kendoButton (click)="onClick('bold')" [toggleable]="true">Bold</button>
<button kendoButton (click)="onClick('italic')" [toggleable]="true">Italic</button>
<button kendoButton (click)="onClick('underline')" [toggleable]="true">Underline</button>
</kendo-buttongroup>
</p>
<event-log title="Event log" [events]="events"></event-log>
`
})
export class AppComponent {
public events: string[] = [];

public onNavigate(e: {[key:string]: boolean}): void {
this.log('navigate');
console.log(e);
}

public onClick(button: string): void {
this.log(`${button} button clicked`);
}

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