Create & Control Semantic UI Popups with Angular Directives
optional
required
Popup Directives
sm-popup
Adds a popup to the current element.
Attributes
sm-popup=a string variable representing the content of the popup.sm-popup-title=a string variable representing the title of the popup.sm-popup-html=a string variable to display instead of the preformatted content and title.sm-popup-position@a string with the position of the popup relative to the element.sm-popup-variation@a string with the variation of the popup.sm-popup-settings=reference to a settings object to pass to the initialization function.
Callback Attributes
sm-popup-on-init=Callback once the module is initialized, passing the initialized element as the first argument.sm-popup-on-create=Callback on popup element creation, with created popup.sm-popup-on-remove=Callback immediately before Popup is removed from DOM.sm-popup-on-show=Callback before popup is shown. Returningfalsefrom this callback will cancel the popup from showing.sm-popup-on-visible=Callback after popup is shown.sm-popup-on-hide=Callback before popup is hidden. Returningfalsefrom this callback will cancel the popup from hiding.sm-popup-on-hidden=Callback after popup is hidden.
Example
sm-popup-bind
A lightweight attribute directive which calls popup() 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.
sm-popup-inline
Adds the following detached popup to the current element.
Attributes
sm-popup-inline=reference to a settings object to pass to the initialization function.
Callback Attributes
sm-popup-inline-on-init=Callback once the module is initialized, passing the initialized element as the first argument.sm-popup-inline-on-create=Callback on popup element creation, with created popup.sm-popup-inline-on-remove=Callback immediately before Popup is removed from DOM.sm-popup-inline-on-show=Callback before popup is shown. Returningfalsefrom this callback will cancel the popup from showing.sm-popup-inline-on-visible=Callback after popup is shown.sm-popup-inline-on-hide=Callback before popup is hidden. Returningfalsefrom this callback will cancel the popup from hiding.sm-popup-inline-on-hidden=Callback after popup is hidden.
Example
Hi
I'm right behind you.
sm-popup-display
Adds the named detached popup to the current element.
Attributes
sm-popup-display@a string with the name of the popup to display on this element.sm-popup-display-settings=reference to a settings object to pass to the initialization function.
Callback Attributes
sm-popup-display-on-init=Callback once the module is initialized, passing the initialized element as the first argument.sm-popup-display-on-create=Callback on popup element creation, with created popup.sm-popup-display-on-remove=Callback immediately before Popup is removed from DOM.sm-popup-display-on-show=Callback before popup is shown. Returningfalsefrom this callback will cancel the popup from showing.sm-popup-display-on-visible=Callback after popup is shown.sm-popup-display-on-hide=Callback before popup is hidden. Returningfalsefrom this callback will cancel the popup from hiding.sm-popup-display-on-hidden=Callback after popup is hidden.
Example
sm-popup-detached
A popup that can be shown by the previous element or by an element with the sm-popup-display directive with the name defined on this element.
name defined on this element.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.