ember-bootstrap

API Docs 0.11.3.33c7ec07

Components.ProgressBar Class

public
Uses
Extends Ember.Component
Defined in: addon/components/bs-progress-bar.js:6

Component to display a Bootstrap progress bar, see http://getbootstrap.com/components/#progress.

Usage

Always wrap the progress bar in a Components.Progress component. Use the value property to control the progress bar's width. To apply the different styling options supplied by Bootstrap, use the appropriate properties like type, showLabel, striped or animate.

 {{#bs-progress}}
   {{bs-progress-bar value=progressValue minValue=0 maxValue=10 showLabel=true type="danger"}}
 {{/bs-progress}}

Stacked

You can place multiple progress bar components in a single Components.Progress to create a stack of progress bars as seen in http://getbootstrap.com/components/#progress-stacked.

 {{#bs-progress}}
   {{bs-progress-bar value=progressValue1 type="success"}}
   {{bs-progress-bar value=progressValue2 type="warning"}}
   {{bs-progress-bar value=progressValue3 type="danger"}}
 {{/bs-progress}}
Show:

Properties

animate boolean

public

Defined in addon/components/bs-progress-bar.js:115

Animate the stripes, see http://getbootstrap.com/components/#progress-animated

Default: false

classTypePrefix String

protected

Inherited from Mixins.TypeClass but overwritten in addon/components/bs-progress-bar.js:47

Default: 'progress-bar'

maxValue number

public

Defined in addon/components/bs-progress-bar.js:65

The upper limit of the value range

Default: 100

minValue number

public

Defined in addon/components/bs-progress-bar.js:55

The lower limit of the value range

Default: 0

percent number

protected

Defined in addon/components/bs-progress-bar.js:142

The percentage of value

percentRounded number

protected

Defined in addon/components/bs-progress-bar.js:158

The percentage of value, rounded to roundDigits digits

roundDigits number

public

Defined in addon/components/bs-progress-bar.js:125

Specify to how many digits the progress bar label should be rounded.

Default: 0

showLabel boolean

public

Defined in addon/components/bs-progress-bar.js:85

If true a label will be shown inside the progress bar.

By default it will be the percentage corresponding to the value property, rounded to roundDigits digits. You can customize it by using the component with a block template, which the component yields the percentage value to:

{{#bs-progress}}
                      {{#bs-progress-bar value=progressValue as |percent|}}{{progressValue}} ({{percent}}%){{/bs-progress-bar}}
                    {{/bs-progress}}

Default: false

striped boolean

public

Defined in addon/components/bs-progress-bar.js:105

Create a striped effect, see http://getbootstrap.com/components/#progress-striped

Default: false

style string

private

Defined in addon/components/bs-progress-bar.js:171

type String

public

Inherited from Mixins.TypeClass: addon/mixins/type-class.js:29

Property for type styling For the available types see the [Bootstrap docs](http://getbootstrap.com/css/#buttons-options) (use without "btn-" prefix)

Default: 'default'

value number

public

Defined in addon/components/bs-progress-bar.js:75

The value the progress bar should represent

Default: 0

Classes