angular_material/components

Angular Material 组件库是一个非常流行的 UI 组件库，它可以帮助开发者快速构建出美观且功能丰富的单页面应用。以下是一些常用的 Angular Material 组件：

常用组件列表

• 按钮 (Button)
• 输入框 (Input)
• 卡片 (Card)
• 表格 (Table)
• 导航栏 (Navbar)
• 下拉菜单 (Select)
• 日期选择器 (Datepicker)
• 对话框 (Dialog)

组件使用示例

按钮组件

<button mat-button>点击我</button>

输入框组件

<input matInput>

卡片组件

<mat-card>
  <mat-card-header>
    <mat-card-title>标题</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    卡片内容
  </mat-card-content>
</mat-card>

表格组件

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>姓名</th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

导航栏组件

<nav mat-nav-bar>
  <button mat-button>首页</button>
  <button mat-button>关于</button>
</nav>

下拉菜单组件

<select mat-select>
  <option *ngFor="let option of options" [value]="option.value">
    {{ option.viewValue }}
  </option>
</select>

日期选择器组件

<mat-form-field appearance="fill">
  <mat-label>选择日期</mat-label>
  <input matInput [matDatepicker]="picker" [value]="date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

对话框组件

<button mat-raised-button (click)="openDialog()">打开对话框</button>
<mat-dialog-content>
  这是一个对话框。
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button (click)="closeDialog()">关闭</button>
</mat-dialog-actions>

更多组件和详细文档，请访问我们的官方文档。

Angular Material