Skip to content

Commit 3dd66f6

Browse files
josephperrottjelbourn
authored andcommitted
chore(progress-bar): add README & package.json. (#292)
1 parent edebadb commit 3dd66f6

File tree

2 files changed

+83
-0
lines changed

2 files changed

+83
-0
lines changed

src/components/progress-bar/README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# md-progress-bar
2+
3+
`md-progress-bar` is a component for indicating progress and activity, matching the spec of
4+
[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html).
5+
6+
### Progress Modes
7+
8+
There are four modes:
9+
1. Determinate - `<md-progress-bar mode="determinate">`
10+
* Indicates how long an operation will take when the percentage complete is detectable.
11+
2. Indeterminate - `<md-progress-bar mode="indeterminate">`
12+
* Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it will take.
13+
3. Buffer - `<md-progress-bar mode="buffer">`
14+
* Indicates how long an operation will take when the percentage complete is detectable, also provides a value of the preloading for the operation.
15+
4. Query - `<md-progress-bar mode="query">`
16+
* Indicates the user must wait while something finishes when it is not yet possible to indicate how long it will take, but will be possible. Once possible, the progress mode should be moved to buffer or determinate.
17+
18+
19+
Example:
20+
21+
```html
22+
<md-progress-bar mode="determinate" value="myValue"></md-progress-bar>
23+
<md-progress-bar mode="indeterminate"></md-progress-bar>
24+
<md-progress-bar mode="buffer" value="myValue" bufferValue="myBufferValue"></md-progress-bar>
25+
<md-progress-bar mode="query"></md-progress-bar>
26+
```
27+
28+
### Theming
29+
30+
All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class.
31+
32+
Example:
33+
34+
```html
35+
<md-progress-bar mode="indeterminate" color="primary"></md-progress-bar>
36+
<md-progress-bar mode="indeterminate" color="accent"></md-progress-bar>
37+
<md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
38+
```
39+
40+
### Accessibility
41+
42+
* ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes.
43+
44+
45+
### API Summary
46+
47+
Properties:
48+
49+
| Name | Type | Description |
50+
| --- | --- | --- |
51+
| `color` | `"primary" | "accent" | "warn"` | The color palette of the progress indicator |
52+
| `mode` | `"determinate" | "indeterminate" | "buffer" | "query"` | The mode of the progress indicator |
53+
| `value` | number | The current progress percentage for determinate indicators |
54+
| `bufferValue` | number | The current progress percentage for buffer secondary indicators |
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "@angular2-material/progress-bar",
3+
"version": "2.0.0-alpha.2",
4+
"description": "Angular 2 Material progress-bar",
5+
"main": "./progress-bar.js",
6+
"typings": "./progress-bar.d.ts",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/angular/material2.git"
10+
},
11+
"keywords": [
12+
"angular",
13+
"material",
14+
"material design",
15+
"components",
16+
"progress",
17+
"progressbar",
18+
"loading"
19+
],
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/angular/material2/issues"
23+
},
24+
"homepage": "https://github.com/angular/material2#readme",
25+
"peerDependencies": {
26+
"angular2": "^2.0.0-beta.8",
27+
"@angular2-material/core": "2.0.0-alpha.2"
28+
}
29+
}

0 commit comments

Comments
 (0)