Examples
Basic
Most basic dock component.
Advanced header
Using dropdown, other buttons and icon
Header color
Use .dock-header-inverseand .bg-*
Sizing
You can apply .dock-{size}to a .dockwhere {size}can be any of xs, sm, lg, and xl.
Ajax load
Give a data-urlattribute to your .dockcomponent.
Chat box
This dock is populated with extra data.
Documentation
Following code demonstrate a basic code for including a dock in your page. Please note that all of your docks should be wrapped inside a .dock-list. Each page only have one .dock-listand it should be inside <body>tag.
<div class="dock-list"> <!-- Basic setup --> <div id="dock-basic" class="dock"> <header class="dock-header"> <div class="dock-title"> <span>Most basic dock</span> </div> <div class="dock-actions"> <span title="Close" data-provide="tooltip" data-dock="close"></span> <span title="Maximize" data-provide="tooltip" data-dock="maximize"></span> <span title="Minimize" data-provide="tooltip" data-dock="minimize"></span> </div> </header> <div class="dock-body"> <div class="dock-block"> Your content comes here </div> </div> </div></div>Ajax load
As you can see in the example, you should add data-urlattribute to your .dockor .dock-body, so the contentwill load from the URL you specify. Please consider that it only loads once. If you need to load the content from URL everytime that dock opens, add data-always-reload="true"to the element.
