Examples
Basic
Most basic dock component.
Advanced header
Using dropdown, other buttons and icon
Header color
Use .dock-header-inverse
and .bg-*
Sizing
You can apply .dock-{size}
to a .dock where {size}
can be any of xs
, sm
, lg
, and xl
.
Ajax load
Give a data-url
attribute to your .dock component.
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-list and 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-url
attribute to your .dock or .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.