material_progress 1.0.0 copy "material_progress: ^1.0.0" to clipboard
material_progress: ^1.0.0 copied to clipboard

Dart 1 only

A material progress bar for Angular 2 Dart.

material-progress #

A Material-style progress bar for Angular 2 Dart.

Usage #

After importing it, add the MaterialProgress component to your component's directives and use it in the template.

<material-progress></material-progress>

Styling #

You can style this component with the provided material colors classes. These classes are named respecting BEM methodology with "Two Dashes" style.

Change container color #

  • material-progress__container--color_black
  • material-progress__container--color_white

Change progress bar color #

  • material-progress--color-red
  • material-progress--color-green
  • material-progress--color-blue
  • material-progress--color-yellow
  • material-progress--color-black
  • material-progress--color-white

Just apply one class from each list directly into the component tag:

<material-progress class="material-progress__container--color_white material-progress--color-black"></material-progress>

Example #

MaterialProgress examples

Overrides #

You can override the component style in the host's CSS using :host and /deep/ special selectors.

/* Change the container color */
:host >>> .material-progress {
    background-color: blue !important;
}

/* Change the progress bar color */
:host >>> .material-progress {
    background-color: #1cb7cc !important;
}
0
likes
20
pub points
0%
popularity

Publisher

unverified uploader

A material progress bar for Angular 2 Dart.

Repository (GitHub)
View/report issues

License

MIT (LICENSE)

Dependencies

angular2

More

Packages that depend on material_progress