A sidebar can appear on any side of content
A sidebar can be formatted to include additional styling for display
A sidebar can vary in width and height to allow more content
A sidebar can appear floating above content
Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.
A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with ui menu to display a vertical menu as a sidebar.
All the following behaviors can be called using the syntax:
| Behavior | Description |
|---|---|
| attach events(selector, event) | Attaches sidebar action to given selector. Default event if none specified is toggle |
| show | Shows sidebar |
| hide | Hides sidebar |
| toggle | Toggles visibility of sidebar |
| is open | Returns whether sidebar is open |
| is closed | Returns whether sidebar is closed |
| push page | Pushes page content to be visible alongside sidebar |
| get direction | Returns direction of current sidebar |
| pull page | Returns page content to original position |
| add body css | Adds stylesheet to page head to trigger sidebar animations |
| remove body css | Removes any inline stylesheets for sidebar animation |
| get transition event | Returns vendor prefixed transition end event |
A sidebar can overlay page content instead of pushing it to the side
For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click
You can also however specify what action should occur when the element is clicked
| Setting | Default | Description |
|---|---|---|
| overlay | false | Whether sidebar should overlay page instead of pushing page to the side |
| exclusive | true | Whether multiple sidebars can be open at once |
| useCSS | true | Whether to use css animations or fallback javascript animations |
| duration | 300 | Duration of side bar transition animation |
Callbacks specify a function to occur after a specific behavior.
| Setting | Context | Description |
|---|---|---|
| onShow | Sidebar | Is called when a sidebar is shown. |
| onHide | Sidebar | Is called when a sidebar is hidden. |
| onChange | Sidebar | Is called after a sidebar changes visibility |
| Setting | Default | Description |
|---|---|---|
| namespace | sidebar | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| className |
className: {
active : 'active',
pushed : 'pushed',
top : 'top',
left : 'left',
right : 'right',
bottom : 'bottom'
}
|
Class names used to attach style to state |
| Setting | Default | Description |
|---|---|---|
| name | Sidebar | Name used in debug logs |
| debug | True | Provides standard debug output to console |
| performance | True | Provides standard debug output to console |
| verbose | True | Provides ancillary debug output to console |
| errors |
error : {
method : 'The method you called is not defined.',
notFound : 'There were no elements that matched the specified selector'
}
|
|