From 1d8815420e15176ffc75c607fab08eefa5325285 Mon Sep 17 00:00:00 2001 From: Austin Date: Tue, 17 Oct 2017 14:20:16 -0500 Subject: [PATCH] docs(demos): add more progress bar examples --- src/lib/progress-bar/progress-bar.md | 41 ++++++++++++------- src/material-examples/example-module.ts | 36 +++++++++++++--- .../progress-bar-buffer-example.css} | 0 .../progress-bar-buffer-example.html | 1 + .../progress-bar-buffer-example.ts | 10 +++++ .../progress-bar-determinate-example.css | 1 + .../progress-bar-determinate-example.html | 1 + .../progress-bar-determinate-example.ts | 10 +++++ .../progress-bar-indeterminate-example.css | 1 + .../progress-bar-indeterminate-example.html} | 0 .../progress-bar-indeterminate-example.ts | 10 +++++ .../progress-bar-overview-example.ts | 10 ----- .../progress-bar-query-example.css | 1 + .../progress-bar-query-example.html | 1 + .../progress-bar-query-example.ts | 10 +++++ 15 files changed, 103 insertions(+), 30 deletions(-) rename src/material-examples/{progress-bar-overview/progress-bar-overview-example.css => progress-bar-buffer/progress-bar-buffer-example.css} (100%) create mode 100644 src/material-examples/progress-bar-buffer/progress-bar-buffer-example.html create mode 100644 src/material-examples/progress-bar-buffer/progress-bar-buffer-example.ts create mode 100644 src/material-examples/progress-bar-determinate/progress-bar-determinate-example.css create mode 100644 src/material-examples/progress-bar-determinate/progress-bar-determinate-example.html create mode 100644 src/material-examples/progress-bar-determinate/progress-bar-determinate-example.ts create mode 100644 src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.css rename src/material-examples/{progress-bar-overview/progress-bar-overview-example.html => progress-bar-indeterminate/progress-bar-indeterminate-example.html} (100%) create mode 100644 src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.ts delete mode 100644 src/material-examples/progress-bar-overview/progress-bar-overview-example.ts create mode 100644 src/material-examples/progress-bar-query/progress-bar-query-example.css create mode 100644 src/material-examples/progress-bar-query/progress-bar-query-example.html create mode 100644 src/material-examples/progress-bar-query/progress-bar-query-example.ts diff --git a/src/lib/progress-bar/progress-bar.md b/src/lib/progress-bar/progress-bar.md index 98c3d301913f..6ea821aec18d 100644 --- a/src/lib/progress-bar/progress-bar.md +++ b/src/lib/progress-bar/progress-bar.md @@ -1,29 +1,42 @@ `` is a horizontal progress-bar for indicating progress and activity. - +### Progress mode +The progress-bar supports four modes: determinate, indeterminate, buffer and query. +#### Determinate +Operations where the percentage of the operation complete is known should use the +determinate indicator. -### Progress mode -The progress-bar supports four modes. + + +This is the default mode and the progress is represented by the `value` property. + +#### Indeterminate +Operations where the user is asked to wait while something finishes and it’s +not necessary to indicate how long it will take should use the indeterminate indicator. -| Mode | Description | -|---------------|----------------------------------------------------------------------------------| -| determinate | Standard progress bar, fills from 0% to 100% | -| indeterminate | Indicates that something is happening without conveying a discrete progress | -| buffer | Dual-progress mode, typically showing both video download and playback progress | -| query | Dual-stage mode, typically showing sending a request and downloading a response | + -The default mode is "determinate". In this mode, the progress is set via the `value` property, -which can be a whole number between 0 and 100. +In this mode the `value` property is ignored. + +#### Buffer +Operations where the user wants to indicate some activity or loading from the server, +use the buffer indicator. + + In "buffer" mode, `value` determines the progress of the primary bar while the `bufferValue` is used to show the additional buffering progress. -In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response -progress is available, the `mode` should be changed to determinate to convey the progress. +#### Query +For situations where the user wants to indicate pre-loading (until the loading can actually be made), +use the query indicator. -In both "indeterminate" and "query" modes, the `value` property is ignored. + +In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response +progress is available, the `mode` should be changed to determinate to convey the progress. In +this mode the `value` property is ignored. ### Theming The color of a progress-bar can be changed by using the `color` property. By default, progress-bars diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index 2add4934cdc6..d1a0982d4cd8 100644 --- a/src/material-examples/example-module.ts +++ b/src/material-examples/example-module.ts @@ -68,8 +68,11 @@ import {MenuOverviewExample} from './menu-overview/menu-overview-example'; import {NestedMenuExample} from './nested-menu/nested-menu-example'; import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example'; import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example'; +import {ProgressBarBufferExample} from './progress-bar-buffer/progress-bar-buffer-example'; import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example'; -import {ProgressBarOverviewExample} from './progress-bar-overview/progress-bar-overview-example'; +import {ProgressBarDeterminateExample} from './progress-bar-determinate/progress-bar-determinate-example'; +import {ProgressBarIndeterminateExample} from './progress-bar-indeterminate/progress-bar-indeterminate-example'; +import {ProgressBarQueryExample} from './progress-bar-query/progress-bar-query-example'; import {ProgressSpinnerConfigurableExample} from './progress-spinner-configurable/progress-spinner-configurable-example'; import {ProgressSpinnerOverviewExample} from './progress-spinner-overview/progress-spinner-overview-example'; import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example'; @@ -441,15 +444,33 @@ export const EXAMPLE_COMPONENTS = { additionalFiles: null, selectorName: null }, + 'progress-bar-buffer': { + title: 'Buffer progress-bar', + component: ProgressBarBufferExample, + additionalFiles: null, + selectorName: null + }, 'progress-bar-configurable': { title: 'Configurable progress-bar', component: ProgressBarConfigurableExample, additionalFiles: null, selectorName: null }, - 'progress-bar-overview': { - title: 'Basic progress-bar', - component: ProgressBarOverviewExample, + 'progress-bar-determinate': { + title: 'Determinate progress-bar', + component: ProgressBarDeterminateExample, + additionalFiles: null, + selectorName: null + }, + 'progress-bar-indeterminate': { + title: 'Indeterminate progress-bar', + component: ProgressBarIndeterminateExample, + additionalFiles: null, + selectorName: null + }, + 'progress-bar-query': { + title: 'Query progress-bar', + component: ProgressBarQueryExample, additionalFiles: null, selectorName: null }, @@ -514,7 +535,7 @@ export const EXAMPLE_COMPONENTS = { selectorName: null }, 'select-no-ripple': { - title: 'Select with cno option ripple ', + title: 'Select with no option ripple ', component: SelectNoRippleExample, additionalFiles: null, selectorName: null @@ -745,8 +766,11 @@ export const EXAMPLE_LIST = [ NestedMenuExample, PaginatorConfigurableExample, PaginatorOverviewExample, + ProgressBarBufferExample, ProgressBarConfigurableExample, - ProgressBarOverviewExample, + ProgressBarDeterminateExample, + ProgressBarIndeterminateExample, + ProgressBarQueryExample, ProgressSpinnerConfigurableExample, ProgressSpinnerOverviewExample, RadioNgModelExample, diff --git a/src/material-examples/progress-bar-overview/progress-bar-overview-example.css b/src/material-examples/progress-bar-buffer/progress-bar-buffer-example.css similarity index 100% rename from src/material-examples/progress-bar-overview/progress-bar-overview-example.css rename to src/material-examples/progress-bar-buffer/progress-bar-buffer-example.css diff --git a/src/material-examples/progress-bar-buffer/progress-bar-buffer-example.html b/src/material-examples/progress-bar-buffer/progress-bar-buffer-example.html new file mode 100644 index 000000000000..32c7d95e25e1 --- /dev/null +++ b/src/material-examples/progress-bar-buffer/progress-bar-buffer-example.html @@ -0,0 +1 @@ + diff --git a/src/material-examples/progress-bar-buffer/progress-bar-buffer-example.ts b/src/material-examples/progress-bar-buffer/progress-bar-buffer-example.ts new file mode 100644 index 000000000000..9a9dce0ef3c2 --- /dev/null +++ b/src/material-examples/progress-bar-buffer/progress-bar-buffer-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Buffer progress-bar + */ +@Component({ + selector: 'progress-bar-buffer-example', + templateUrl: 'progress-bar-buffer-example.html', +}) +export class ProgressBarBufferExample {} diff --git a/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.css b/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.css new file mode 100644 index 000000000000..7432308753e6 --- /dev/null +++ b/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.html b/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.html new file mode 100644 index 000000000000..905e8524e00d --- /dev/null +++ b/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.html @@ -0,0 +1 @@ + diff --git a/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.ts b/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.ts new file mode 100644 index 000000000000..bb26495a38c3 --- /dev/null +++ b/src/material-examples/progress-bar-determinate/progress-bar-determinate-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Determinate progress-bar + */ +@Component({ + selector: 'progress-bar-determinate-example', + templateUrl: 'progress-bar-determinate-example.html', +}) +export class ProgressBarDeterminateExample {} diff --git a/src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.css b/src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.css new file mode 100644 index 000000000000..7432308753e6 --- /dev/null +++ b/src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/material-examples/progress-bar-overview/progress-bar-overview-example.html b/src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.html similarity index 100% rename from src/material-examples/progress-bar-overview/progress-bar-overview-example.html rename to src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.html diff --git a/src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.ts b/src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.ts new file mode 100644 index 000000000000..e9fc28bc4e43 --- /dev/null +++ b/src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Indeterminate progress-bar + */ +@Component({ + selector: 'progress-bar-indeterminate-example', + templateUrl: 'progress-bar-indeterminate-example.html', +}) +export class ProgressBarIndeterminateExample {} diff --git a/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts b/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts deleted file mode 100644 index 67a6c94df90d..000000000000 --- a/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {Component} from '@angular/core'; - -/** - * @title Basic progress-bar - */ -@Component({ - selector: 'progress-bar-overview-example', - templateUrl: 'progress-bar-overview-example.html', -}) -export class ProgressBarOverviewExample {} diff --git a/src/material-examples/progress-bar-query/progress-bar-query-example.css b/src/material-examples/progress-bar-query/progress-bar-query-example.css new file mode 100644 index 000000000000..7432308753e6 --- /dev/null +++ b/src/material-examples/progress-bar-query/progress-bar-query-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/material-examples/progress-bar-query/progress-bar-query-example.html b/src/material-examples/progress-bar-query/progress-bar-query-example.html new file mode 100644 index 000000000000..71ef7d54a7d1 --- /dev/null +++ b/src/material-examples/progress-bar-query/progress-bar-query-example.html @@ -0,0 +1 @@ + diff --git a/src/material-examples/progress-bar-query/progress-bar-query-example.ts b/src/material-examples/progress-bar-query/progress-bar-query-example.ts new file mode 100644 index 000000000000..c65d08c9d77b --- /dev/null +++ b/src/material-examples/progress-bar-query/progress-bar-query-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Query progress-bar + */ +@Component({ + selector: 'progress-bar-query-example', + templateUrl: 'progress-bar-query-example.html', +}) +export class ProgressBarQueryExample {}