From 74bc62320e4076ab5aff2ae978f69cc8ea304ca5 Mon Sep 17 00:00:00 2001 From: Austin Date: Fri, 20 Oct 2017 19:09:47 -0500 Subject: [PATCH] docs(demos): add more progress bar examples (#7859) --- src/lib/progress-bar/progress-bar.md | 45 ++++++++++++------- src/material-examples/example-module.ts | 34 +++++++++++--- .../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, 104 insertions(+), 31 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 98c3d301913..6ea821aec18 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. +The progress-bar supports four modes: determinate, indeterminate, buffer and query. -| 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 | +#### Determinate +Operations where the percentage of the operation complete is known should use the +determinate indicator. -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. + + +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. + + + +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. +#### Query +For situations where the user wants to indicate pre-loading (until the loading can actually be made), +use the query indicator. + + + 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 both "indeterminate" and "query" modes, the `value` property is ignored. - +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 b23d451531a..ed950aa52cf 100644 --- a/src/material-examples/example-module.ts +++ b/src/material-examples/example-module.ts @@ -74,8 +74,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'; @@ -483,15 +486,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 }, @@ -793,8 +814,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 00000000000..32c7d95e25e --- /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 00000000000..9a9dce0ef3c --- /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 00000000000..7432308753e --- /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 00000000000..905e8524e00 --- /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 00000000000..bb26495a38c --- /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 00000000000..7432308753e --- /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 00000000000..e9fc28bc4e4 --- /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 67a6c94df90..00000000000 --- 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 00000000000..7432308753e --- /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 00000000000..71ef7d54a7d --- /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 00000000000..c65d08c9d77 --- /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 {}