Merge pull request #451 from lochstar/progress-bar-slot

Added default slot to ProgressBar
pull/457/head
Cagatay Civici 2020-08-27 13:41:50 +03:00 committed by GitHub
commit b740d5216d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 1 deletions

View File

@ -1,7 +1,9 @@
<template>
<div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100">
<div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle"></div>
<div v-if="determinate && value && showValue" class="p-progressbar-label">{{value + '%'}}</div>
<div v-if="determinate && value && showValue" class="p-progressbar-label">
<slot>{{value + '%'}}</slot>
</div>
<div v-if="indeterminate" class="p-progressbar-indeterminate-container">
<div class="p-progressbar-value p-progressbar-value-animate"></div>
</div>

View File

@ -23,6 +23,14 @@ data() {
<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
<CodeHighlight>
&lt;ProgressBar mode="indeterminate"/&gt;
</CodeHighlight>
<h5>Slot</h5>
<p>A custom label can be placed inside the progress bar via the default slot.</p>
<CodeHighlight>
&lt;ProgressBar :value="value"&gt;
Percent Complete
&lt;/ProgressBar&gt;
</CodeHighlight>
<h5>Properties</h5>