Permalink
Browse files

feat(progress): Support for multiple progress bars (#889)

* feat(prgress-bar): sub component

* Update index.js

* [progress] use nw progress-bar sub component

* Update meta.json

* Update README.md

* Update demo.html

* Update demo.html

* Update README.md

* Update progress-bar.vue

* Update progress.vue

* Update progress-bar.vue

* Update README.md

* Update README.md

* feat(progress): typo fix ⌨💥

* fix(form-input): no dynamic type with v-model

* fix(docs): clear console errs for progress page

* feat(docs): add striped button, fix multiple bars syntax err

* [progress-bar] add label prop

* Update README.md

* ESLint
  • Loading branch information...
tmorehouse committed Aug 20, 2017
1 parent 25a20f2 commit 76c613cbdf4d2524b81b8e11e42271feb84f39c9
@@ -1,24 +1,25 @@
# Progress
> Use our custom progress component for displaying simple or complex progress bars.
We don’t use the HTML5 `<progress>` element, ensuring you can animate them, and place text labels over them.
> Use our custom progress component for displaying simple or complex progress
bars, featuring support for horzontally stacked bars, animated backgrounds, and text labels.
```html
<template>
<div>
<b-progress :value="counter" show-progress animated></b-progress>
<b-progress :value="counter" :max="max" show-progress animated></b-progress>
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
</div>
</div>
</template>
<script>
export default {
data: {
counter: 45,
max: 100
},
methods: {
clicked() {
this.counter = Math.random() * 100;
this.counter = Math.random() * this.max;
console.log("Change progress to " +
Math.round(this.counter * 100) / 100);
}
@@ -30,15 +31,15 @@ export default {
```
## Value
Set the maximum value with the `max` prop (default is `100`), and the current value via the
`value` prop (default `0`).
`value` prop (default `0`).
## Labels
Add labels to your progress bars by either enabling `show-progress` (as a percentage) or
`show-value`for the current absolute value. For `show-progress`, you may also set the
percentage precision (number of digits after the decimal) via the `precision` prop (default
is `0`digits after the decimal).
When creating multiple bars in a sinple process, place hte value prop on the individual
`<b-progress-bar>` sub components (see the **Multiple Bars** section below for more details)
Need more control over the label? Provide your own label by using the default slot.
## Labels
Add labels to your progress bars by either enabling `show-progress` (percentage of max) or
`show-value`for the current absolute value. You may also set the precision (number of
digits after the decimal) via the `precision` prop (default is `0`digits after the decimal).
```html
<template>
@@ -49,13 +50,11 @@ Need more control over the label? Provide your own label by using the default sl
<b-progress :value="value" :max="max" show-value class="mb-3"></b-progress>
<h5>Progress label</h5>
<b-progress :value="value" :max="max" show-progress class="mb-3"></b-progress>
<h5>Value label with precision</h5>
<b-progress :value="value" :max="max" :precision="2" show-value class="mb-3"></b-progress>
<h5>Progress label with precision</h5>
<b-progress :value="value" :max="max" :precision="2" show-progress class="mb-3></b-progress>
<h5>Custom Label</h5>
<b-progress :value="value" :max="max">
Progress: {{ value.toFixed(3) }}
</b-progress>
</div>
<b-progress :value="value" :max="max" :precision="2" show-progress class="mb-3"></b-progress>
</div>
</template>
<script>
@@ -70,9 +69,54 @@ export default {
<!-- progress-labels.vue -->
```
### Custom progress label
Need more control over the label? Provide your own label by using the default slot within
a `<b-progress-bar>` sub-component, or by using the `label` prop on `<b-progress-bar>`
(HTML supported):
```html
<template>
<div>
<h5>Custom Label via Default Slot</h5>
<b-progress :max="max">
<b-progress-bar :value="value">
Progress: <strong>{{ value.toFixed(3) }} / {{ max }}</strong>
</b-progress-bar>
</b-progress>
<h5 class="mt-3">Custom Label via Prop</h5>
<b-progress :max="max">
<b-progress-bar :value="value" :label="'&lt;'+value.toFixed(0)+'&gt;'">
</b-progress-bar>
</b-progress>
</div>
</template>
<script>
export default {
data: {
max: 50,
value: 33.333333333
}
}
</script>
<!-- progress-custom-labels.vue -->
```
Precedence order for label methods:
- default slot of `<b-progress-bar>`
- `label` prop of `<b-progress-bar>`
- `show-progress` prop of `<b-progress-bar>`
- `show-value` prop of `<b-progress-bar>`
- `show-progress` prop of `<b-progress>`
- `show-value` prop of `<b-progress>`
- no label
## Width and Height
`<b-progress>` will always expand to the maximum with of it's parent container. To
change the width, place the progress bar in a standard Bootstrap column or apply
change the width, place `<b-progress>` in a standard Bootstrap column or apply
one of the standard Bootstrap width classes.
```html
@@ -84,7 +128,7 @@ one of the standard Bootstrap width classes.
<b-progress :value="value" class="w-75 mb-2"></b-progress>
<b-progress :value="value" class="w-50 mb-2"></b-progress>
<b-progress :value="value" class="w-25"></b-progress>
</div>
</div>
</template>
<script>
@@ -99,8 +143,8 @@ export default {
```
The height of the progress bar can be controled with the `height` prop. The height
value should be a standard CSS dimension (`px`, `rem`, `em`, etc). the default
is `1rem`.
value should be a standard CSS dimension (`px`, `rem`, `em`, etc). The default
height is `1rem`.
```html
<template>
@@ -111,7 +155,7 @@ is `1rem`.
<b-progress height="2rem" :value="value" show-progress class="mb-2"></b-progress>
<b-progress height="20px" :value="value" show-progress class="mb-2"></b-progress>
<b-progress height="2px" :value="value"></b-progress>
</div>
</div>
</template>
<script>
@@ -129,19 +173,48 @@ export default {
Use background variants to change the appearance of individual progress bars.
The default variant is `primary`.
### Solid background variants
```html
<template>
<div>
<b-progress :value="25" variant="success" class="mb-2"></b-progress>
<b-progress :value="50" variant="info" class="mb-2"></b-progress>
<b-progress :value="75" variant="warning" class="mb-2"></b-progress>
<b-progress :value="100" variant="danger" class="mb-2"></b-progress>
<b-progress :value="66.6" variant="primary" class="mb-2"></b-progress>
<b-progress :value="45" variant="secondary" class="mb-2"></b-progress>
<b-progress :value="33.3" variant="dark" class="mb-2"></b-progress>
</div>
<div v-for="bar in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1">
<b-progress :value="bar.value"
:variant="bar.variant"
:key="bar.variant"
></b-progress>
</div>
</div>
</div>
</template>
<script>
export default {
data: {
bars: [
{variant:'success', value:75},
{variant:'info', value:75},
{variant:'warning', value:75},
{variant:'danger', value:75},
{variant:'primary', value:75},
{variant:'secondary', value:75},
{variant:'dark', value:75}
],
timer: null
},
mounted() {
this.timer = setInterval(() => {
this.bars.forEach(bar => bar.value = 25 + (Math.random() * 75));
}, 2000);
},
destroyed() {
clearInterval(this.timer);
}
}
</script>
<!-- progress-backgrounds.vue -->
```
@@ -152,13 +225,24 @@ background variant.
```html
<template>
<div>
<b-progress :value="25" variant="success" striped class="mb-2"></b-progress>
<b-progress :value="50" variant="info" striped class="mb-2"></b-progress>
<b-progress :value="75" variant="warning" striped class="mb-2"></b-progress>
<b-progress :value="100" variant="danger" striped class="mb-2"></b-progress>
</div>
<b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
<b-progress :value="50" variant="info" :striped="striped" class="mb-2"></b-progress>
<b-progress :value="75" variant="warning" :striped="striped" class="mb-2"></b-progress>
<b-progress :value="100" variant="danger" :striped="striped" class="mb-2"></b-progress>
<b-button variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</b-button>
</div>
</template>
<script>
export default {
data: {
striped: true
}
}
</script>
<!-- progress-striped.vue -->
```
@@ -171,12 +255,12 @@ The striped gradient can also be animated by setting the `animated`prop.
<b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
<b-progress :value="50" variant="info" striped :animated="animate" class="mb-2"></b-progress>
<b-progress :value="75" variant="warning" striped :animated="animate" class="mb-2"></b-progress>
<b-progress :value="100" variant="danger" striped :animated="animate" class="mb-3"></b-progress>
<b-progress :value="100" variant="danger" :animated="animate" class="mb-3"></b-progress>
<b-button variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</b-button>
</div>
</template>
</template>
<script>
export default {
@@ -188,3 +272,57 @@ export default {
<!-- progress-animated.vue -->
```
Notes:
- if `animated` is true, `striped` will automatically be enabled.
- Animated progress bars don’t work in Opera 12 — as they don’t support CSS3 animations.
## Multiple bars
Include multiple `<b-progress-bar>` sub-components in a `<b-progress>` component to build
a horizontally stacked set of progress bars.
```html
<template>
<div>
<b-progress :max="max" class="mb-3">
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
</b-progress>
<b-progress show-progress :max="max" class="mb-3"></b-progress-bar>
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
</b-progress>
<b-progress show-value striped :max="max" class="mb-3"></b-progress-bar>
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
</b-progress>
<b-progress :max="max" class="mb-3">
<b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
<b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
<b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
</b-progress>
</div>
</template>
<script>
export default {
data: {
max: 100,
values: [ 15, 30, 20 ]
}
}
</script>
<!-- progress-multiple.vue -->
```
`<b-prgress-bar>` will inherit most of the props from the `<b-progress>` parent component,
but you can override any of the props by setting them on the `<b-progress-bar>`
Notes:
- `height`, if speified, should always set on the `<b-progress>` component.
- `<b-progress-bar>` will not inherit `value` from `<b-progress>`.
@@ -1,4 +1,5 @@
{
"title": "Progress",
"component": "bProgress"
"component": "bProgress",
"components": [ "bProgressBar" ]
}
@@ -53,6 +53,7 @@ import bNavForm from "./nav-form";
import bPagination from "./pagination.vue";
import bPaginationNav from "./pagination-nav.vue";
import bPopover from "./popover.vue";
import bProgressBar from "./progress-bar.vue";
import bProgress from "./progress.vue";
import bTable from "./table.vue";
import bTabs from "./tabs.vue";
@@ -117,6 +118,7 @@ export {
bPagination,
bPaginationNav,
bPopover,
bProgressBar,
bProgress,
bTable,
bTooltip,
Oops, something went wrong.

0 comments on commit 76c613c

Please sign in to comment.