Create & Control Semantic UI Progress with Angular Directives
optional
required
Progress Directives
sm-progress
Creates a progress bar.
Attributes
model=a number variable representing the current progress on the bar (out of total, which is by default 100).total=a number variable for the largest possible value the progress bar can have (100 by default).label=a string which determines what label is displayed in the bar.active-text@a templated string for the text below the progress bar in a normal (active) state.error-text@a templated string for the text below the progress bar in a error state.warning-text@a templated string for the text below the progress bar in a warning state.success-text@a templated string for the text below the progress bar in a success state.duration@a string representing the amount of time it takes the progress bar to reach a target value from the current value.
Callback Attributes
on-init=Callback once the module is initialized, passing the initialized element as the first argument.on-change=Callback on percentage change.on-success=Callback on success state.on-active=Callback on active state.on-error=Callback on error state.on-warning=Callback on warning state.
Example
sm-progress-bind
A lightweight attribute directive which calls progress() on the element with the settings object passed to the attribute. Using this directive means you need to manage the communication between Angular and Semantic UI yourself.
So far, so good.
Behavior Directives
These attribute directives invoke a behavior on the component where the attribute value can be one of the following formats:
String
- Selector to the dropdown(s) to invoke the behavior when the element with the directive is clicked.
Object
$@A selector string.evt@The event string which triggers the behavior ('click' by default).enabled=A boolean value which determines whether or not the behavior should be called when the event occurs.value=The first argument to pass to the behavior if it requires one.