以下是一个使用Angular Material实现启用/禁用按钮切换和工具提示的代码示例:
npm install @angular/material @angular/cdk
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [MatButtonModule, MatTooltipModule],
exports: [MatButtonModule, MatTooltipModule]
})
export class MaterialModule { }
mat-button-toggle
组件来实现启用/禁用按钮的切换。
启用
禁用
在组件的TS文件中,定义一个变量isButtonEnabled
来跟踪按钮的启用/禁用状态。
import { Component } from '@angular/core';
@Component({
selector: 'app-button-example',
templateUrl: './button-example.component.html',
styleUrls: ['./button-example.component.css']
})
export class ButtonExampleComponent {
isButtonEnabled = 'enabled';
}
matTooltip
指令来实现工具提示。
确保在组件的模块中导入MatTooltipModule
。
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [MatTooltipModule],
exports: [MatTooltipModule]
})
export class MaterialModule { }
这样,当用户将鼠标悬停在按钮上时,将显示一个工具提示。