文檔半島外圍網上直營>>telerik中文文檔>>禁用ButtonGroup
                禁用ButtonGroup
你可以在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 });                
            
 QQ交談
QQ交談 在線咨詢
在線咨詢 
                 
                
 渝公網安備
            50010702500608號
渝公網安備
            50010702500608號
             
            
 客服熱線
客服熱線