HomeAccordionCheckboxDropdownModalPopupProgressRatingSidebar

ui-progress

Usage

<ui-progress class="inverted indicating" value="10" total="20">
    <div class="label">
        <span v-if="isActive">Adding {{value}} of {{total}} photos</span>
        <span v-if="!isActive">All photos were uploaded.</span>
    </div>
</ui-progress>
Adding {{value}} of {{total}} photosAll photos were uploaded.

Behavior

increment by
$increment(value)
$decrement(value)

Attributes

value {Number} Default: 0

The starting value of the progress.

total {Number} Default: 100

The maximum value that the progress can run up to. Default is 100, ie 100%

class {String}

Use this attribute to specify different variations by adding one or more classes from here: variations

Color

<ui-progress class="green" value="20"></ui-progress>

Attached

<ui-progress class="attached blue" value="50"></ui-progress>
''
A segment with the progress bar attached to the top.

Events

A ui-progress instance emits a 'completed' event, which you can listen to in the following way:

var transcoding = new Progress({ ... });
transcoding.$on('completed', function(){
   // Set the 'status' depending on other logic
   transcoding.status = 'error';
})

Customizing the <content>

Here is the Jade template of this component. The content blocks can be replaced using a selector. Important: Make sure you include all the Vue.js directives as in the original template for the Component to work.