• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

michaeldoye/mat-progress-buttons: Very simple Angular6+ Material Design progress ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称（OpenSource Name）：

michaeldoye/mat-progress-buttons

开源软件地址(OpenSource Url)：

https://github.com/michaeldoye/mat-progress-buttons

开源编程语言(OpenSource Language)：

TypeScript 67.7%

开源软件介绍(OpenSource Introduction)：

Anguar Material Design Progress Buttons

npm version Build Status dependency Status devDependency Status

Demo

View all the directives in action at https://mat-progress-buttons.firebaseapp.com

StackBlitz demo https://stackblitz.com/edit/mat-progress-buttons-demo

Dependencies

Installation

Install above dependencies via npm.

Now install mat-progress-buttons via:

npm install --save mat-progress-buttons
SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for mat-progress-buttons:

map: {
  'mat-progress-buttons': 'node_modules/mat-progress-buttons/bundles/mat-progress-buttons.umd.js',
}

Once installed you need to import the main module:

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

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice MatProgressButtonsModule .forRoot()):

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

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

Other modules in your application can simply import MatProgressButtonsModule:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [MatProgressButtonsModule, ...], 
})
export class OtherModule {
}

Usage

Spinner 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 {

  // Button Options
  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',
    // add an icon to the button
    buttonIcon: {
      fontSet: 'fa',
      fontIcon: 'fa-heart',
      inline: true
    }
  };

  // Click handler
  btnClick(): void {
    this.btnOpts.active = true;
    setTimeout(() => {
      this.btnOpts.active = false;
    }, 3350);
  }
};

Spinner button FAB

You can use the spinner button with a mat-fab with an icon. Both mat-icon and font awesome are supported.

To set up fontawesome to work with mat-icon you can see instructions here

Use the icon property on the options object

Note: Bar Button does not support the fab style, currently.

  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    spinnerSize: 19,
    raised: false,
    stroked: true,
    flat: false,
    fab: true, // set fab to true
    buttonColor: 'accent',
    spinnerColor: 'accent',
    fullWidth: false,
    disabled: false,
    mode: 'indeterminate',
    icon: {
      color: primary,
      fontSet: 'fa',
      fontIcon: 'fa-save',
      inline: true
    },
  };

Icon API

interface MatProgressButtonIcon {
  color?: ThemePalette; // icon color (primary or accent)
  fontIcon?: string;    // name of the icon (for fontawsome, use 'fa-[icon_name])'
  fontSet?: string;     // if using fontawesome, use 'fa' (omit for material icons)
  inline?: boolean;     // automatically size the icon
  svgIcon?: string;     // name of the icon in the SVG icon set.
}

More info in Angular Material Docs

Bar Button

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

@Component({
  selector: 'app-home',
  template: '<mat-bar-button (btnClick)="btnClick()" [options]="btnOpts"></mat-bar-button>'
})
export class SomeComponent {

  // Button Options
  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    buttonColor: 'accent',
    barColor: 'accent',
    raised: false,
    stroked: true,
    flat: false,
    mode: 'indeterminate',
    value: 0,
    disabled: false,
    customClass: 'some-class',
    // add an icon to the button
    buttonIcon: {
      fontSet: 'fa',
      fontIcon: 'fa-heart',
      inline: true
    }
  };

  // Click handler
  btnClick(): void {
    this.btnOpts = { ...this.btnOpts, active: true };
    setTimeout(() => {
      this.btnOpts = { ...this.btnOpts, active: false };
    }, 3350);
  }
};

Global Options

Optionally pass default MatProgressButtonOptions in forRoot in side your app.modlue.ts for each button as an array.

const button1: MatProgressButtonOptions = {
  id: 'button1', // Id should match the [buttonId] input
  ...
};

const button2: MatProgressButtonOptions = {
  id: 'button2', // Id should match the [buttonId] input
  ...
};

@NgModule({
  imports: [
    MatProgressButtonsModule.forRoot([button1, button2]),
  ],
  declarations: [HomeComponent],
})

NB: add the id above should match the id provided in the [buttonId] input.

<mat-bar-button
  (btnClick)="someFunc3()"
  [buttonId]="'button1'"
  [active]="buttonState"
></mat-bar-button>

[options] will override Global Options provided in forRoot

Overriding default CSS

To override CSS (color and background color of spinner buttons), you can write CSS for particular component and use ViewEncapsulation.None

Example:

CSS:

.class-name {
    background-color: red;
}

TS:

@Component({
  ...,
  encapsulation: ViewEncapsulation.None
})
class MyComponent {}

Run Demo App Locally

$ git clone https://github.com/michaeldoye/mat-progress-buttons.git
  • link the mat-progress-buttons package
$ ng build
$ npm link ./dist/mat-progress-buttons

or

$ ng build
$ npm link ./dist/mat-progress-buttons
$ ng build --watch
  • navigate to the demo app directory
$ cd demo
  • install the dependencies
$ npm i
  • run/start/serve the app
$ npm run start

or

$ ng serve --open
  • the app is now hosted by http://localhost:4200/

Development

  1. clone this repo
  2. Install the dependencies by running npm i
  3. build the library ng buld
  4. test the library ng test
  5. Link the library npm link ./dist/mat-progress-buttons
  6. Navigate to the demo app's directory:
  • cd demo
  • npm i
  • npm start

License

Copyright (c) 2018 Michael Doye. Licensed under the MIT License (MIT)

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
lincanbin/Android-Carbon-Forum: Android Client for Carbon Forum with Material De ...发布时间：2022-08-17
下一篇：
zirouan/searchliveo: Library SearchView material design发布时间：2022-08-17
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap