From 3dd66f6b4b9881e64a4c2623d9dce892c83d3b02 Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Mon, 11 Apr 2016 15:23:46 -0700 Subject: [PATCH] chore(progress-bar): add README & package.json. (#292) --- src/components/progress-bar/README.md | 54 ++++++++++++++++++++++++ src/components/progress-bar/package.json | 29 +++++++++++++ 2 files changed, 83 insertions(+) create mode 100644 src/components/progress-bar/README.md create mode 100644 src/components/progress-bar/package.json diff --git a/src/components/progress-bar/README.md b/src/components/progress-bar/README.md new file mode 100644 index 00000000000..9c1cb370609 --- /dev/null +++ b/src/components/progress-bar/README.md @@ -0,0 +1,54 @@ +# md-progress-bar + +`md-progress-bar` is a component for indicating progress and activity, matching the spec of +[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html). + +### Progress Modes + +There are four modes: + 1. Determinate - `` + * Indicates how long an operation will take when the percentage complete is detectable. + 2. Indeterminate - `` + * Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it will take. + 3. Buffer - `` + * Indicates how long an operation will take when the percentage complete is detectable, also provides a value of the preloading for the operation. + 4. Query - `` + * 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. + + +Example: + + ```html + + + + + ``` + +### Theming + +All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class. + +Example: + + ```html + + + + ``` + +### Accessibility + + * ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes. + + +### API Summary + +Properties: + +| Name | Type | Description | +| --- | --- | --- | +| `color` | `"primary" | "accent" | "warn"` | The color palette of the progress indicator | +| `mode` | `"determinate" | "indeterminate" | "buffer" | "query"` | The mode of the progress indicator | +| `value` | number | The current progress percentage for determinate indicators | +| `bufferValue` | number | The current progress percentage for buffer secondary indicators | diff --git a/src/components/progress-bar/package.json b/src/components/progress-bar/package.json new file mode 100644 index 00000000000..09bf4621dc6 --- /dev/null +++ b/src/components/progress-bar/package.json @@ -0,0 +1,29 @@ +{ + "name": "@angular2-material/progress-bar", + "version": "2.0.0-alpha.2", + "description": "Angular 2 Material progress-bar", + "main": "./progress-bar.js", + "typings": "./progress-bar.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/angular/material2.git" + }, + "keywords": [ + "angular", + "material", + "material design", + "components", + "progress", + "progressbar", + "loading" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/angular/material2/issues" + }, + "homepage": "https://github.com/angular/material2#readme", + "peerDependencies": { + "angular2": "^2.0.0-beta.8", + "@angular2-material/core": "2.0.0-alpha.2" + } +}