文檔首頁>>telerik中文文檔>>禁用Button
禁用Button
默認情況下，按鈕處于啟用狀態(tài)，若要禁用它，請將disabled屬性設置為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 Disabled Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()" themeColor="primary" [disabled]="true">Apply</button>
<button kendoButton (click)="onButtonClick()" [disabled]="true">Cancel</button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Flat Disabled Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()" fillMode="flat" themeColor="primary" [disabled]="true">Apply</button>
<button kendoButton (click)="onButtonClick()" fillMode="flat" [disabled]="true">Cancel</button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Outline Disabled Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()" fillMode="outline" themeColor="primary" [disabled]="true">Apply</button>
<button kendoButton (click)="onButtonClick()" fillMode="outline" [disabled]="true">Cancel</button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Link Disabled Button</p>
<p class="k-block">
<button kendoButton (click)="onButtonClick()" fillMode="link" themeColor="primary" [disabled]="true">Apply</button>
<button kendoButton (click)="onButtonClick()" fillMode="link" [disabled]="true">Cancel</button>
</p>
</div>
</div>
`
})
export class AppComponent {
public onButtonClick(): void {
console.log('click');
}
}
點擊復制
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交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
提供CDN加速/云存儲服務
客服熱線