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.