禁用ButtonGroup

立即下載Kendo UI for Angular

你可以在Angular 中啟用或禁用ButtonGroup。

默認(rèn)情況下該組件處于啟用狀態(tài)，要禁用整個按鈕組請將ButtonGroup的disabled屬性設(shè)置為true。

要禁用特定按鈕，將其自身的disabled屬性設(shè)置為true并保留ButtonGroup的disabled屬性未定義。如果您定義了ButtonGroup的disabled屬性，它將優(yōu)先于底層按鈕的disabled屬性并且被忽略。

下面的示例演示如何禁用ButtonGroup。

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>Disabled ButtonGroup</p>
<kendo-buttongroup [disabled]="disabled">
<button kendoButton [toggleable]="true" [disabled]="disabled">
Bold
</button>
<button kendoButton [toggleable]="true" [disabled]="disabled">
Italic
</button>
<button kendoButton [toggleable]="true" [disabled]="disabled">
Underline
</button>
</kendo-buttongroup>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>ButtonGroup with Disabled Button</p>
<kendo-buttongroup>
<button kendoButton [toggleable]="true">Bold</button>
<button kendoButton [toggleable]="true" [disabled]="disabled">
Italic
</button>
<button kendoButton [toggleable]="true">Underline</button>
</kendo-buttongroup>
</div>
</div>
<button kendoButton (click)="toggleDisabled()" themeColor="primary">
Toggle Disabled States
</button>
`,
})
export class AppComponent {
public disabled = true;

public toggleDisabled(): void {
this.disabled = !this.disabled;
}
}

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