Create & Control Semantic UI Dimmers with Angular Directives
optional
required
Dimmer Directives
sm-dimmer
Creates a dimmer with content for the parent element.
Attributes
settings=reference to a settings object to pass to the initialization function.visible=a value which can show/hide the dimmer when it changes.
Callback Attributes
on-init=Callback once the module is initialized, passing the initialized element as the first argument.on-change=Callback after a dimmer is either shown or hidden.on-show=Callback after a dimmer is shown.on-hide=Callback after a dimmer is hidden.
Example
Overlayable Section
I <3 Dimmers!
sm-dimmer-bind
A lightweight attribute directive which calls dimmer() 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.
Overlayable Section
Dimmed Message!
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 accordion(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.
Example
sm-dimmer-show
When a DOM event fires on the element with the directive, it can command dimmer(s) to show.
Overlayable Section
sm-dimmer-hide
When a DOM event fires on the element with the directive, it can command dimmer(s) to hide.
Overlayable Section
sm-dimmer-toggle
When a DOM event fires on the element with the directive, it can command dimmer(s) to toggle their visibility.
Overlayable Section