文档半岛外围网上直营>>telerik中文文档>>可切换Button
可切换Button
您能够通过按钮指示它是激活的还是未激活的。若要使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 });

QQ交谈
在线咨询

渝公网安备
50010702500608号

客服热线