material_progress 1.0.0 material_progress: ^1.0.0 copied to clipboard
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 #
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;
}