<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...
比起扁平化的按钮,凸起的按钮会有明显的反差,也会有比较深的阴影效果,以凸显按钮的存在,凸起的按钮需要加上mat-raised-button <buttonmat-raised-button>我是raised按钮</button><buttonmat-raised-buttoncolor="primary">Primary</button><buttonmat-raised-buttoncolor="accent">Accent</button><buttonmat-raised-...
mat-icon-button: 图标按钮,不包含文字。 mat-fab: 圆形图标按钮。 mat-mini-fab, 更小的圆形图标按钮。 mat-button-toggle: 开关按钮,表示是否按下或开启的状态。 在使用按钮控件时,需要导入MatButtonModule、MatIconModule和MatButtonToggleModule三个模块: import{BrowserModule}from'@angular/platform-browser’;i...
在上面的程式中,第一段ButtonToggleGroup中我们使用value为每个 mat-button-toggle 中设定所属的值,并且设定 checked="true" 来设定预设选取的效果、以及 disabled 来设定禁止点选,接著透过template reference取得ButtonToggleGroup的value值,也就是里面真正被开启的按钮值。 第二段ButtonToggleGroup中我们加入了 mutiple...
Angular Material(简称Mat)是一个由Angular团队开发的UI组件库,提供了丰富的UI组件和工具,其中包括工具提示(Tooltip)组件。 要向Angular Mat工具提示添加...
<mat-slide-toggle[(ngModel)]="options.model"(change)="changeOptions()"[disabled]="options.disabled">visible</mat-slide-toggle> Angular Material 的表单组件更像是对原生 html 元素的复写。在熟悉了一种组件之后,几乎不需要额外的记忆成本,就可以很容易的猜到某些 API,简单易懂,使用很方便。不过时常翻...
</md-button-toggle-group> </div> <md-error class="mat-body-2" *ngIf="form.get('age').hasError('ageInvalid')">年龄或单位不正确</md-error> </ng-container> </div> 上面这个模板中值得注意的一点是,我们把年龄的数值和单位放在了一个FormGroup里面,这是由于这两个值组合在一起才有意义,而且...
<button mat-icon-button (click)="sideNav.toggle()"> <mat-icon>{{ sideNav.opened ? 'close' : 'menu' }}</mat-icon> </button> <span>IT铁人赛-Angular Material Demo</span> <!-- 在这之后的都会被推到右边去 --> <span class="toolbar-seprator"></span> ...
<th mat-header-cell *matHeaderCellDef>名称</th> <td mat-cell *matCellDef="let device"> {{device.name}} </td> </ng-container> <ng-container matColumnDef="deployTime"> <th mat-header-cell *matHeaderCellDef>部署时间</th> <td mat-cell *matCellDef="let device"> {{device.deployTime...