可切换Button

立即下载Kendo UI for Angular

您能够通过按钮指示它是激活的还是未激活的。若要使Button可切换，请更新toggleable属性的默认false配置并将其设置为true。

查看源代码：

app.component.ts：

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

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 example-col">
<p>Default Toggleable Button</p>
<p class="k-block">
<button kendoButton (selectedChange)="onSelectedChange($event)" themeColor="primary" [toggleable]="true">Petrol</button>
<button kendoButton (selectedChange)="onSelectedChange($event)" [toggleable]="true">Diesel</button>
</p>
</div>

<div class="col-xs-12 col-sm-6 example-col">
<p>Flat Toggleable Button</p>
<p class="k-block">
<button kendoButton fillMode="flat" themeColor="primary" [toggleable]="true">Petrol</button>
<button kendoButton fillMode="flat" [toggleable]="true">Diesel</button>
</p>
</div>

<div class="col-xs-12 col-sm-6 example-col">
<p>Outline Toggleable Button</p>
<p class="k-block">
<button kendoButton fillMode="outline" themeColor="primary" [toggleable]="true">Petrol</button>
<button kendoButton fillMode="outline" [toggleable]="true">Diesel</button>
</p>
</div>
</div>
`
})

export class AppComponent {
public onSelectedChange(e: boolean): void {
console.log(e);
}
}

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