material_progress 1.0.0

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 42

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;
}

Changelog

0.0.1

  • Initial version, including:
    • indeterminate progress bar
    • basic color palette for styling

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  material_progress: "^1.0.0"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:material_progress/material_progress.dart';
        
Version Uploaded Documentation Archive
1.0.0 Sep 14, 2016 Go to the documentation of material_progress 1.0.0 Download material_progress 1.0.0 archive
0.0.1 Sep 13, 2016 Go to the documentation of material_progress 0.0.1 Download material_progress 0.0.1 archive

Analysis

This feature is new.
We welcome feedback.
More details: scoring.

We analyzed this package, and provided a score, details, and suggestions below.

  • completed on Feb 3, 2018
  • Dart: 2.0.0-dev.20.0
  • pana: 0.10.1

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
0 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
61 / 100
Overall score:
Weighted score of the above. [more]
42

Platforms

Detected platforms: web

Primary library: package:material_progress/material_progress.dart with components: html, js.

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use material_progress.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.16.0 <2.0.0
angular2 ^2.0.0-beta.17 2.2.0 3.1.0+1
Transitive dependencies
analyzer 0.29.5 0.31.0+1
args 0.13.7 1.3.0
async 1.13.3 2.0.3
barback 0.15.2+14
build 0.5.0 0.12.0+1
charcode 1.1.1
cli_util 0.1.2+1
code_transformers 0.5.1+4
collection 1.14.5
convert 2.0.1
crypto 2.0.2+1
csslib 0.14.1
dart_style 0.2.16 1.0.9+1
fixnum 0.10.6
glob 1.1.5
html 0.13.2+2
http_parser 3.1.1
intl 0.14.0 0.15.2
isolate 0.2.3 1.1.0
js 0.6.1
logging 0.11.3+1
meta 1.1.2
mime 0.9.6
observable 0.14.0+1 0.20.4+3
package_config 1.0.3
path 1.5.1
plugin 0.2.0+2
pool 1.3.4
protobuf 0.5.5 0.7.0
shelf 0.6.8 0.7.2
shelf_static 0.2.7
source_maps 0.10.4
source_span 1.4.0
stack_trace 1.9.1
stream_channel 1.6.3
string_scanner 1.0.2
typed_data 1.1.5
utf 0.9.0+4
watcher 0.9.7+7
yaml 2.1.13