mat-progress-buttons 项目教程

mat-progress-buttons 项目教程

mat-progress-buttons Very simple Angular6+ Material Design progress buttons 项目地址: https://gitcode.com/gh_mirrors/ma/mat-progress-buttons

1. 项目介绍

mat-progress-buttons 是一个非常简单的 Angular 6+ 项目，提供了 Material Design 风格的进度按钮。该项目允许开发者在 Angular 应用中轻松集成带有进度指示的按钮，适用于需要显示操作进度的场景，如文件上传、数据加载等。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Angular 和 Angular Material。然后，通过 npm 安装 mat-progress-buttons：

npm install --save mat-progress-buttons

导入模块

在你的 Angular 应用的根模块中导入 MatProgressButtonsModule：

import { MatProgressButtonsModule } from 'mat-progress-buttons';

@NgModule({
  declarations: [AppComponent],
  imports: [MatProgressButtonsModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用示例

在你的组件中使用 mat-spinner-button 或 mat-bar-button：

import { Component } from '@angular/core';
import { MatProgressButtonOptions } from 'mat-progress-buttons';

@Component({
  selector: 'app-home',
  template: `
    <mat-spinner-button (btnClick)="btnClick()" [options]="btnOpts"></mat-spinner-button>
  `
})
export class SomeComponent {
  // 按钮选项
  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    spinnerSize: 19,
    raised: false,
    stroked: true,
    flat: false,
    fab: false,
    buttonColor: 'accent',
    spinnerColor: 'accent',
    fullWidth: false,
    disabled: false,
    mode: 'indeterminate',
    customClass: 'some-class',
    buttonIcon: {
      fontSet: 'fa',
      fontIcon: 'fa-heart',
      inline: true
    }
  };

  // 点击处理函数
  btnClick(): void {
    this.btnOpts.active = true;
    setTimeout(() => {
      this.btnOpts.active = false;
    }, 3350);
  }
}

3. 应用案例和最佳实践

应用案例

1. 文件上传按钮：在文件上传过程中，使用 mat-spinner-button 显示上传进度。
2. 数据加载按钮：在数据加载过程中，使用 mat-bar-button 显示加载进度。

最佳实践

• 自定义样式：通过覆盖 CSS 来定制按钮的外观。
• 全局配置：在根模块中使用 forRoot 方法配置全局按钮选项，减少重复代码。

4. 典型生态项目

• Angular Material：mat-progress-buttons 是基于 Angular Material 构建的，因此与 Angular Material 的其他组件兼容性良好。
• Font Awesome：支持在按钮中集成 Font Awesome 图标，增强按钮的视觉效果。

通过以上步骤，你可以快速上手并使用 mat-progress-buttons 项目，为你的 Angular 应用添加美观且实用的进度按钮。

mat-progress-buttons Very simple Angular6+ Material Design progress buttons 项目地址: https://gitcode.com/gh_mirrors/ma/mat-progress-buttons