禁用ButtonGroup

立即下载Kendo UI for Angular

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

默认情况下该组件处于启用状态，要禁用整个按钮组请将ButtonGroup的disabled属性设置为true。

要禁用特定按钮，将其自身的disabled属性设置为true并保留ButtonGroup的disabled属性未定义。如果您定义了ButtonGroup的disabled属性，它将优先于底层按钮的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 });