optional required

Sidebar Directives
Create & Control Semantic UI Sidebar with Angular Directives

sm-sidebar
Creates a sidebar.

Attributes
  • items = an array of items to place in the sidebar.
  • label & an expression which takes item and returns what the label of the sidebar item will look like. HTML code is allowed here.
  • on-click & an expression which takes item when it's clicked and performs some action.
  • visible = a variable which can be used to toggle the visiblity of the sidebar.
  • settings = a reference to a settings object to pass to the initialization function.
Callback Attributes
  • on-init = Callback once the module is initialized, passing the initialized element as the first argument.
  • on-visible = Callback called when a sidebar begins animating in.
  • on-show = Callback called when a sidebar has finished animating in.
  • on-change = Callback called when a sidebar begins to hide or show.
  • on-hide = Callback called before a sidebar begins to animate out.
  • on-hidden = Callback called after a sidebar has finished animating out.
Example


        Toggle

        

          
        


      


      

        

          sm-sidebar-bind
          
A lightweight attribute directive which calls sidebar() 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.

        

      


      


        
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.
    • 
        


        
Example


        


        

          Execute Simple Behavior
          Execute Advanced Behavior
        


      


      

        

          sm-sidebar-show
          
When a DOM event fires on the element with the directive, it can command sidebar(s) to show themselves.

        

      

      


        


        

          
          Show
        


      


      

        

          sm-sidebar-toggle
          
When a DOM event fires on the element with the directive, it can command sidebar(s) to toggle visibility.

        

      

      


        


        

          
          Toggle
        


      


      

        

          sm-sidebar-hide
          
When a DOM event fires on the element with the directive, it can command sidebar(s) hide.

        

      

      


        


        

          
          Hide
        


      


      

        

          sm-sidebar-push-page
          
When a DOM event fires on the element with the directive, it can command sidebar(s) to push page content to be visible alongside sidebar.

        

      


      

        

          sm-sidebar-pull-page
          
When a DOM event fires on the element with the directive, it can command sidebar(s) to return page content to original position.

        

      


      

        

          sm-sidebar-add-body-css
          
When a DOM event fires on the element with the directive, it can command sidebar(s) to add stylesheet to page head to trigger sidebar animations.

        

      


      

        

          sm-sidebar-remove-body-css
          
When a DOM event fires on the element with the directive, it can command sidebar(s) to remove any inline stylesheets for sidebar animation.