HomeAccordionCheckboxDropdownModalPopupProgressRatingSidebar

ui-sidebar

Usage

<ui-sidebar class="vertical inverted labeled icon menu">
    <a class="item">
        <i class="home icon"></i>
        Home
    </a>
    <a class="item">
        <i class="smile icon"></i>
        Smile
    </a>
</ui-sidebar>
HomeSmile

Behavior

$toggle()
$show()
$hide()

Attributes

transition {String} Default: 'push'

A transition name. Possible options can be seen at sidebar transitions

direction {String} Default: 'left'

A sidebar can appear on different sides of the page. Possible options are 'left', 'right', 'top', 'bottom'

dimPage {Boolean} Default: false

Whether the page should be dimmed when the sidebar appears. To turn this option on you can either pass a data value of true for 'dimPage' or set it as an attribute on ui-sidebar

<ui-sidebar position="right" dimPage>
    <div class="menu"> ... </div>
</ui-sidebar>

class {String}

A sidebar can be anything you want it to be. You just need to pass in the extra classes, for example:

<ui-sidebar class="raised segment">
    <content></content>
</ui-sidebar>

Customizing the <content>

Here is the Jade template of this component. The content blocks can be replaced using a selector. Important: Make sure you include all the Vue.js directives as in the original template for the Component to work.