You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
10 KiB
385 lines
10 KiB
---
|
|
layout : 'default'
|
|
css : 'side'
|
|
|
|
title : 'Sidebar'
|
|
description : 'A sidebar is a menu hidden beside page content'
|
|
type : 'UI Module'
|
|
---
|
|
|
|
<div class="ui red vertical demo sidebar menu">
|
|
<a class="item">
|
|
<i class="home icon"></i>
|
|
Home
|
|
</a>
|
|
<a class="active item">
|
|
<i class="heart icon"></i>
|
|
Current Section
|
|
</a>
|
|
<a class="item">
|
|
<i class="facebook icon"></i>
|
|
Like us on Facebook
|
|
</a>
|
|
<div class="item">
|
|
<b>More</b>
|
|
<div class="menu">
|
|
<a class="item">About</a>
|
|
<a class="item">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui right sidebar inverted red vertical menu">
|
|
<div class="header item">Right Sidebar menu</div>
|
|
<a class="item">One</a>
|
|
<a class="item">Two</a>
|
|
<a class="item">Three</a>
|
|
</div>
|
|
<div class="ui top inverted teal sidebar menu">
|
|
<div class="header item">Top Sidebar menu</div>
|
|
<a class="item">One</a>
|
|
<a class="item">Two</a>
|
|
<a class="item">Three</a>
|
|
</div>
|
|
<div class="ui bottom inverted sidebar menu">
|
|
<div class="header item">Bottom Sidebar menu</div>
|
|
<a class="item">One</a>
|
|
<a class="item">Two</a>
|
|
<a class="item">Three</a>
|
|
</div>
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Initializing</a>
|
|
<a class="item">Usage</a>
|
|
<a class="item">Variations</a>
|
|
<a class="item">Behavior</a>
|
|
<a class="item">Settings</a>
|
|
</div>
|
|
</div>
|
|
<h2 class="ui dividing header">Initializing</h2>
|
|
<p>Any content can be used as a sidebar by adding the class <code>ui sidebar</code> and initializing the menu in javascript.</p>
|
|
<div class="ui ignored warning message">
|
|
<div class="header">Fixed Position Snafoos</div>
|
|
Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
|
|
<ul class="ui list">
|
|
<li>Specify your fixed content without using the css left or top properties.</li>
|
|
<li>Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class <code>(direction) pushed</code> when the view is moved.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="code" data-label="true" data-type="html">
|
|
<div class="ui sidebar">
|
|
Any content in the world
|
|
</div>
|
|
</div>
|
|
<div class="code" data-label="true" data-type="javascript">
|
|
$('.ui.sidebar')
|
|
.sidebar()
|
|
;
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Usage</h2>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Showing a sidebar</h4>
|
|
<p>A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with <a href="/collections/menu.html">ui menu</a> to display a vertical menu as a sidebar.</p>
|
|
<div class="code" data-type="html" data-title="Example HTML">
|
|
<div class="ui red vertical demo sidebar menu">
|
|
<a class="item">
|
|
<i class="home icon"></i>
|
|
Home
|
|
</a>
|
|
<a class="active item">
|
|
<i class="heart icon"></i>
|
|
Current Section
|
|
</a>
|
|
<a class="item">
|
|
<i class="facebook icon"></i>
|
|
Like us on Facebook
|
|
</a>
|
|
<div class="item">
|
|
<b>More</b>
|
|
<div class="menu">
|
|
<a class="item">About</a>
|
|
<a class="item">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="code" data-demo="true" data-type="javascript">
|
|
$('.demo.sidebar')
|
|
.sidebar('toggle')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Triggering show/hide with other content</h4>
|
|
<p>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</p>
|
|
<div class="code" data-demo="true">
|
|
$('.demo.sidebar')
|
|
.sidebar('attach events', '.toggle.button')
|
|
;
|
|
$('.toggle.button')
|
|
.removeClass('disabled')
|
|
;
|
|
</div>
|
|
<div class="ui disabled teal toggle button">
|
|
<i class="left arrow icon"></i>
|
|
Trigger Sidebar
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Triggering custom action with other content</h4>
|
|
<p>You can also however specify what action should occur when the element is clicked</p>
|
|
<div class="code" data-demo="true">
|
|
$('.demo.sidebar')
|
|
.sidebar('attach events', '.open.button', 'show')
|
|
;
|
|
$('.open.button')
|
|
.removeClass('disabled')
|
|
;
|
|
</div>
|
|
<div class="ui disabled teal open button">
|
|
<i class="left arrow icon"></i>
|
|
Open Sidebar
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Floating</h4>
|
|
<p>A sidebar can appear floating above content</p>
|
|
<div class="code" data-demo="true">
|
|
$('.demo.sidebar')
|
|
.addClass('floating')
|
|
.sidebar('toggle')
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Direction</h4>
|
|
<p>A sidebar can appear on any side of content</p>
|
|
<div class="code" data-type="html">
|
|
<!-- Assumes left if none specified -->
|
|
<div class="ui sidebar"></div>
|
|
<div class="ui top sidebar"></div>
|
|
<div class="ui right sidebar"></div>
|
|
<div class="ui bottom sidebar"></div>
|
|
</div>
|
|
|
|
<div class="code" data-demo="true">
|
|
$('.direction.button')
|
|
.on('click', function() {
|
|
$('.sidebar')
|
|
.filter('.' + $(this).data('direction') )
|
|
.sidebar('toggle')
|
|
;
|
|
})
|
|
;
|
|
$('.direction.button')
|
|
.removeClass('disabled')
|
|
;
|
|
</div>
|
|
<div class="ui buttons">
|
|
<div class="ui disabled direction button" data-direction="top">
|
|
Top
|
|
</div>
|
|
<div class="ui disabled direction button" data-direction="right">
|
|
Right
|
|
</div>
|
|
<div class="ui disabled direction button" data-direction="bottom">
|
|
Bottom
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Overlay</h4>
|
|
<p>A sidebar can overlay page content instead of pushing it to the side</p>
|
|
<div class="code" data-demo="true">
|
|
$('.demo.sidebar')
|
|
.sidebar('setting', 'overlay', true)
|
|
.sidebar('toggle')
|
|
.sidebar('setting', 'overlay', false)
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Behavior</h2>
|
|
|
|
All the following behaviors can be called using the syntax <code>$('.foo').sidebar('behavior name', argumentOne, argumentTwo)</code>
|
|
|
|
<table class="ui definition celled table segment">
|
|
<tr>
|
|
<td>attach events(selector, event)</td>
|
|
<td>Attaches sidebar action to given selector. Default event if none specified is toggle</td>
|
|
</tr>
|
|
<tr>
|
|
<td>show</td>
|
|
<td>Shows sidebar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hide</td>
|
|
<td>Hides sidebar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>toggle</td>
|
|
<td>Toggles visibility of sidebar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is open</td>
|
|
<td>Returns whether sidebar is open</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is closed</td>
|
|
<td>Returns whether sidebar is closed</td>
|
|
</tr>
|
|
<tr>
|
|
<td>push page</td>
|
|
<td>Pushes page content to be visible alongside sidebar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>get direction</td>
|
|
<td>Returns direction of current sidebar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>pull page</td>
|
|
<td>Returns page content to original position</td>
|
|
</tr>
|
|
<tr>
|
|
<td>add body css</td>
|
|
<td>Adds stylesheet to page head to trigger sidebar animations</td>
|
|
</tr>
|
|
<tr>
|
|
<td>remove body css</td>
|
|
<td>Removes any inline stylesheets for sidebar animation</td>
|
|
</tr>
|
|
<tr>
|
|
<td>get transition event</td>
|
|
<td>Returns vendor prefixed transition end event</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2 class="ui dividing header">Settings</h2>
|
|
|
|
<h3 class="ui header">
|
|
Transition Settings
|
|
<div class="sub header">Form settings modify the transition behavior</div>
|
|
</h3>
|
|
<table class="ui red celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>overlay</td>
|
|
<td>false</td>
|
|
<td>Whether sidebar should overlay page instead of pushing page to the side</td>
|
|
</tr>
|
|
<tr>
|
|
<td>useCSS</td>
|
|
<td>true</td>
|
|
<td>Whether to use css animations or fallback javascript animations</td>
|
|
</tr>
|
|
<tr>
|
|
<td>duration</td>
|
|
<td>300</td>
|
|
<td>Duration of side bar animation</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 class="ui header">
|
|
DOM Settings
|
|
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
|
|
</h3>
|
|
<table class="ui celled purple definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="six wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>namespace</td>
|
|
<td>sidebar</td>
|
|
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>className</td>
|
|
<td>
|
|
<div class="code">
|
|
className: {
|
|
active : 'active',
|
|
pushed : 'pushed',
|
|
top : 'top',
|
|
left : 'left',
|
|
right : 'right',
|
|
bottom : 'bottom'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Class names used to attach style to state</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="ui horizontal divider"><i class="icon setting"></i></div>
|
|
|
|
<h3 class="ui header">
|
|
Debug Settings
|
|
<div class="sub header">Debug settings controls debug output to the console</div>
|
|
</h3>
|
|
|
|
<table class="ui blue celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>name</td>
|
|
<td>Sidebar</td>
|
|
<td>Name used in debug logs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>debug</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>performance</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verbose</td>
|
|
<td>True</td>
|
|
<td>Provides ancillary debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>errors</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
error : {
|
|
method : 'The method you called is not defined.',
|
|
notFound : 'There were no elements that matched the specified selector'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|