Progress Indicators - accountforgithub/enyo GitHub Wiki
Progress Indicators
onyx.ProgressBar
onyx.ProgressBar is an enyo.Control that shows the current progress of a process in a horizontal bar.
{kind: "onyx.ProgressBar", progress: 40}
To animate changes, call the animateProgressTo
method:
this.$.progressBar.animateProgressTo(60);
To customize the visual styling of the bar, set a CSS style via the barClasses
property, e.g.:
{kind: "onyx.ProgressBar", barClasses: "onyx-dark", progress: 40"}
When the showStripes
property is true
(the default), stripes are shown in
the progress bar; when animateStripes
is true
(also the default), these
stripes are animated. The animated stripes use CSS3 gradients and animation to
produce the effects; in browsers that do not support these features, the effects
will not be visible.
onyx.ProgressButton
onyx.ProgressButton extends
onyx.ProgressBar
, adding a Cancel button, as well as the ability to contain
other controls.
enyo.kind({
name: "ProgressButtonExample",
components: [
{kind: "onyx.ProgressButton", barClasses: "onyx-light", progress: 20,
onCancel: "processCanceled", components: [
{content: "0"},
{content: "100", style: "float: right;"}
]
}
],
processCanceled: function(inSender, inEvent) {
// respond to cancellation
}
});
When tapped, the Cancel button fires an onCancel
event, which you may handle
as in the example above.
onyx.Slider
onyx.Slider, another kind that extends
onyx.ProgressBar
, is a control that presents a range of selection options in
the form of a horizontal slider with a control knob. The knob may be tapped and
dragged to the desired location.
{kind: "onyx.Slider", value: 30}
onChanging
events are fired while the control knob is being dragged, and an
onChange
event is fired when the position is set, either by finishing a drag
or by tapping the bar.