<mat-button-toggle>是angular material中的一个指令。为了创建一个具有angular material设计和动画的切换按钮或开/关按钮,Angular <mat-button-toggle>指令被使用。这些按钮可以被配置为像单选按钮或复选框一样的行为,这样就可以在按钮上进行单选或多选了。
<button mat-raised-button>我是raised按钮</button> <button mat-raised-button color="primary">Primary</button> <button mat-raised-button color="accent">Accent</button> <button mat-raised-button color="warn">Warn</button> <button mat-raised-button disabled>Disabled</button> <a mat-button>Link...
在上面的程式中,第一段ButtonToggleGroup中我们使用value为每个 mat-button-toggle 中设定所属的值,并且设定 checked="true" 来设定预设选取的效果、以及 disabled 来设定禁止点选,接著透过template reference取得ButtonToggleGroup的value值,也就是里面真正被开启的按钮值。 第二段ButtonToggleGroup中我们加入了 mutiple...
<button mat-button (click)="sideNav.toggle()">切换侧边栏状态</button> <p>Main Content Area</p> </mat-sidenav-content> </mat-sidenav-container> 3.控制侧边栏的显示状态 可以在模板中添加按钮或其他控件来控制侧边栏的打开和关闭。在上述示例中,通过点击按钮调用toggle()方法来切换侧边栏的显示状态。
在你的HTML模板中,使用MatButtonToggleGroup和MatButtonToggle组件来创建多行按钮,并设置相应的颜色。例如: 在你的组件的CSS文件中,使用Angular Material提供的CSS类来自定义按钮的颜色。例如,要将按钮的背景颜色更改为红色,可以添加以下样式: 在你的组件的CSS文件中,使用Angular Material提供的CSS类来自定义按钮的...
MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatStepperModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, ...
import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; import { MatButtonModule } from '@angular/material/button'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { MatCardModule } from '@angular/material/card'; ...
<mat-slide-toggle[(ngModel)]="options.model"(change)="changeOptions()"[disabled]="options.disabled">visible</mat-slide-toggle> Angular Material 的表单组件更像是对原生 html 元素的复写。在熟悉了一种组件之后,几乎不需要额外的记忆成本,就可以很容易的猜到某些 API,简单易懂,使用很方便。不过时常翻...
MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatProgressSpinnerModule, ...
<button mat-button (click)="sideNav.toggle()">切换左边选单状态</button> <router-outlet></router-outlet> </mat-sidenav-content></mat-sidenav-container> 一个包含导览功能的选单就已经出现啦!不过这时候我们的画面上还不会将选单显示出来,这是因为Angular Material预设的<mat-sidenav>是隐藏的,不过我们...