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.
 
 
 

726 lines
20 KiB

---
layout : 'default'
css : ''
element : 'sidebar'
elementType : 'element'
title : 'Sidebar'
description : 'A sidebar hides additional content beside a page.'
type : 'UI Module'
themes : ['Default']
---
<script src="/javascript/sidebar.js"></script>
<%- @partial('header', { tabs: 'module' }) %>
<div class="main container">
<div class="ui active tab" data-tab="definition">
<h2 class="ui dividing header">Types</h2>
<div class="no left example">
<h4 class="ui header">Transitions</h4>
<p>A sidebar can use different transitions to display itself</p>
<div class="ui ignored message">
<p>Browsers that do not support <code>translate3D</code>, like <b>IE < 10</b> will automatically fall back to javascript transitions, you can also force this behavior using <code>useLegacy: true</code>.</p>
</div>
<div class="code" data-label="Javascript" data-type="javascript">
$('.ui.sidebar')
.sidebar({
transition: 'push'
})
;
</div>
<div class="ui button" data-transition="overlay">
Overlay
</div>
<div class="ui button" data-transition="push">
Push
</div>
<div class="ui button" data-transition="uncover">
Uncover
</div>
<div class="ui button" data-transition="slide along">
Slide Along
</div>
<div class="ui button" data-transition="slide out">
Slide Out
</div>
<div class="ui button" data-transition="scale down">
Scale Down
</div>
<div class="ui button" data-transition="safe">
Safe
</div>
</div>
<div class="no direction example">
<h4 class="ui header">Direction</h4>
<div class="ui ignored warning message">Only <b>top</b> and <b>bottom</b> sidebars support dropdown menus. This is because elements with scrollbars cannot have absolutely positioned content escape the container.</div>
<div class="ui ignored info message">
Only <b>left</b> and <b>right</b> sidebars support all animations. Top and bottom sidebars must overlay page content.
</div>
<p>A sidebar can appear on different sides of the page</p>
<div class="ui button" data-direction="left">
Left
</div>
<div class="ui button" data-direction="right">
Right
</div>
<div class="ui button" data-direction="top">
Top
</div>
<div class="ui button" data-direction="bottom">
Bottom
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="no styled example">
<h4 class="ui header">Styled</h4>
<p>A sidebar can be formatted to include additional styling for display</p>
<div class="code" data-type="html">
<div class="ui styled sidebar">...</div>
</div>
<div class="ui labeled icon button">
<i class="left arrow icon"></i>
Show
</div>
</div>
<div class="no size example">
<h4 class="ui header">Size</h4>
<p>A sidebar can vary in width and height to allow more content</p>
<div class="code" data-type="html">
<div class="ui very thin sidebar">...</div>
<div class="ui thin sidebar">...</div>
<div class="ui wide sidebar">...</div>
<div class="ui very wide sidebar">...</div>
</div>
<div class="ui variation toggle buttons">
<div class="ui button" data-variation=".very.thin">
Very Thin
</div>
<div class="ui button" data-variation=".thin">
Thin
</div>
<div class="ui button" data-variation=".wide">
Wide
</div>
<div class="ui button" data-variation=".very.wide">
Very Wide
</div>
</div>
</div>
<div class="no floating example">
<h4 class="ui header">Floating</h4>
<p>A sidebar can appear floating above content</p>
<div class="code" data-type="html">
<div class="ui floating sidebar">...</div>
</div>
<div class="ui labeled icon button">
<i class="left arrow icon"></i>
Show
</div>
</div>
</div>
<div class="ui tab" data-tab="usage">
<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 icon message">
<i class="info letter icon"></i>
<div class="content">
<div class="header">Fixed Position</div>
<p>Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions</p>
<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>
<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="ui ignored info message">
A safe transition does not use <code>translate3D</code>, this means it will not modify <code>position: fixed</code> inside your document, and you can use fixed elements inside your <code>.pusher .page</code>
</div>
<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>
<h2 class="ui dividing header">Behavior</h2>
<p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p>
<div class="code">
$('.your.element')
.sidebar('behavior name', argumentOne, argumentTwo)
;
</div>
<table class="ui definition celled sortable table segment">
<thead>
<tr>
<th>Behavior</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>
<div class="ui tab" data-tab="examples">
<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').first()
.sidebar('attach events', '.toggle.button')
;
$('.toggle.button')
.removeClass('disabled')
;
</div>
<div class="ui disabled secondary labeled icon 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').first()
.sidebar('attach events', '.open.button', 'show')
;
$('.open.button')
.removeClass('disabled')
;
</div>
<div class="ui disabled secondary labeled icon open button">
<i class="left arrow icon"></i>
Open Sidebar
</div>
</div>
</div>
<div class="ui tab" data-tab="settings">
<h3 class="ui header">
Sidebar Settings
<div class="sub header">Form settings modify the sidebar behavior</div>
</h3>
<table class="ui celled sortable definition table segment">
<thead>
<tr>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</tr>
</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>exclusive</td>
<td>true</td>
<td>Whether multiple sidebars can be open at once</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 transition animation</td>
</tr>
</tbody>
</table>
<div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
<h4 class="ui header">Callbacks</h4>
<p>Callbacks specify a function to occur after a specific behavior.</p>
<table class="ui celled sortable definition table segment">
<thead>
<tr>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onShow</td>
<td>Sidebar</td>
<td>Is called when a sidebar is shown.</td>
</tr>
<tr>
<td>onHide</td>
<td>Sidebar</td>
<td>Is called when a sidebar is hidden.</td>
</tr>
<tr>
<td>onChange</td>
<td>Sidebar</td>
<td>Is called after a sidebar changes visibility</td>
</tr>
</tbody>
</table>
<div class="ui horizontal divider"><i class="icon setting"></i></div>
<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 definition table segment">
<thead>
<tr>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</tr>
</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 celled sortable definition table segment">
<thead>
<tr>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</tr>
</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>
</div>
<div class="ui styled sidebar">
<h3 class="ui header">You Might Like</h3>
<div class="ui fluid vertical menu">
<a class="item">
<i class="chat outline icon"></i>
More by this author
</a>
<a class="item">
<i class="text file icon"></i>
Suggested Articles
</a>
</div>
<h3 class="ui header">Contact Us</h3>
<div class="ui form">
<div class="field">
<label>Name</label>
<div class="ui icon input">
<i class="user icon"></i>
<input type="text" data-placeholder="Name">
</div>
</div>
<div class="field">
<label>Message</label>
<textarea></textarea>
</div>
<div class="ui black fluid button">Submit</div>
</div>
</div>
<div class="ui thin styled sidebar">
<h3 class="ui header">Share</h3>
<div class="ui fluid vertical labeled icon buttons">
<div class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</div>
<div class="ui twitter button">
<i class="twitter icon"></i>
Twitter
</div>
<div class="ui google plus button">
<i class="google plus icon"></i>
Google
</div>
</div>
</div>
<div class="ui very thin styled sidebar">
<div class="ui fluid vertical icon buttons">
<div class="ui facebook button">
<i class="facebook icon"></i>
</div>
<div class="ui twitter button">
<i class="twitter icon"></i>
</div>
<div class="ui google plus button">
<i class="google plus icon"></i>
</div>
</div>
</div>
<div class="ui wide styled sidebar">
<h3 class="ui header">You Might Like</h3>
<div class="ui fluid vertical menu">
<a class="item">
<i class="chat outline icon"></i>
More by this author
</a>
<a class="item">
<i class="text file icon"></i>
Suggested Articles
</a>
</div>
</div>
<div class="ui very wide styled sidebar">
<h3 class="ui header">Contact Us</h3>
<div class="ui form">
<div class="field">
<label>Name</label>
<div class="ui icon input">
<i class="user icon"></i>
<input type="text" data-placeholder="Name">
</div>
</div>
<div class="field">
<label>Message</label>
<textarea></textarea>
</div>
<div class="ui black fluid button">Submit</div>
</div>
</div>
<div class="ui vertical overlay 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 floating vertical 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 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 left sidebar vertical inverted menu">
<a class="header item">Categories</a>
<a class="item">World</a>
<a class="item">U.S.</a>
<a class="item">Business</a>
<a class="item">Opinion</a>
<a class="item">Technology</a>
<a class="item">Health</a>
<a class="item">Sports</a>
</div>
<div class="ui right vertical inverted sidebar menu">
<a class="header item">File Permissions</a>
<a class="item">Share on Social</a>
<a class="item">Share by E-mail</a>
<a class="item">Edit Permissions</a>
<a class="item">Delete Permanently</a>
</div>
<div class="ui top inverted sidebar menu">
<div class="menu">
<a class="item">
Home
</a>
<div class="ui pointing dropdown link item">
<i class="dropdown icon"></i>
Shopping
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
Clothing
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
<a class="item">
Forums
</a>
<a class="item">
Contact Us
</a>
</div>
</div><div class="ui bottom inverted sidebar menu">
<div class="menu">
<a class="item">
Home
</a>
<div class="ui bottom pointing dropdown link item">
<i class="dropdown icon"></i>
Shopping
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
Clothing
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
<a class="item">
Forums
</a>
<a class="item">
Contact Us
</a>
</div>
</div>