Toolbar
A scrollable set of buttons aligned to the left with a fixed right section.
All toolbar items (toolbar-item) should have a fixed width, except for the primary item (toolbar-primary) which will stretch. In the Winter backend you can use the data-calculate-width attribute to have these widths calculated dynamically for you.
Basic toolbar
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<button type="button" class="btn btn-primary wn-icon-plus">Create post</button>
<button type="button" class="btn btn-default wn-icon-copy">Copy</button>
<button type="button" class="btn btn-default wn-icon-trash">Delete</button>
<button type="button" class="btn btn-default wn-icon-magic">Publish</button>
<button type="button" class="btn btn-default wn-icon-power-off">Unpublish</button>
<button type="button" class="btn btn-default wn-icon-clock-o">Timer</button>
<button type="button" class="btn btn-default wn-icon-mail-reply-all">Send by email</button>
<button type="button" class="btn btn-default wn-icon-hdd-o">Archive</button>
</div>
</div>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<button type="button" class="btn btn-primary wn-icon-plus">Create post</button>
<button type="button" class="btn btn-default wn-icon-copy">Copy</button>
<button type="button" class="btn btn-default wn-icon-trash">Delete</button>
<button type="button" class="btn btn-default wn-icon-magic">Publish</button>
<button type="button" class="btn btn-default wn-icon-power-off">Unpublish</button>
<button type="button" class="btn btn-default wn-icon-clock-o">Timer</button>
<button type="button" class="btn btn-default wn-icon-mail-reply-all">Send by email</button>
<button type="button" class="btn btn-default wn-icon-hdd-o">Archive</button>
</div>
</div>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
Button groups
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default wn-icon-mail-reply-all">Send by email</button>
<button type="button" class="btn btn-default wn-icon-hdd-o">Archive</button>
</div>
</div>
</div>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default wn-icon-mail-reply-all">Send by email</button>
<button type="button" class="btn btn-default wn-icon-hdd-o">Archive</button>
</div>
</div>
</div>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
Button with Tooltips
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<button
type="button"
class="btn btn-default wn-icon-download"
title="Hold down shift for more options"
data-control="tooltip"
data-placement="bottom"
data-container="body">
Export
</button>
</div>
</div>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<button
type="button"
class="btn btn-default wn-icon-download"
title="Hold down shift for more options"
data-control="tooltip"
data-placement="bottom"
data-container="body">
Export
</button>
</div>
</div>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
Dropdown buttons
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<div class="dropdown dropdown-fixed">
<button
type="button"
class="btn btn-default wn-icon-users"
data-toggle="dropdown">
Assign selected to...
</button>
<ul class="dropdown-menu" data-dropdown-title="Assign selected to...">
<li><a href="#" tabindex="-1" class="wn-icon-user">Sally</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-user">Steve</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-user">Justin</a></li>
</ul>
</div>
</div>
</div>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<div class="dropdown dropdown-fixed">
<button
type="button"
class="btn btn-default wn-icon-users"
data-toggle="dropdown">
Assign selected to...
</button>
<ul class="dropdown-menu" data-dropdown-title="Assign selected to...">
<li><a href="#" tabindex="-1" class="wn-icon-user">Sally</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-user">Steve</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-user">Justin</a></li>
</ul>
</div>
</div>
</div>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
Editor toolbar
<div class="layout control-toolbar editor-toolbar">
<div class="layout-cell toolbar-item">
<div data-control="toolbar">
<!-- Dropdown item -->
<div class="dropdown dropdown-fixed">
<button
type="button"
class="btn"
title="Formatting"
data-toggle="dropdown"
data-control="tooltip"
data-placement="bottom"
data-container="body">
<i class="icon-paragraph"></i>
</button>
<ul class="dropdown-menu" data-dropdown-title="Formatting">
<li><a href="#" tabindex="-1" class="wn-icon-quote-right">Quote</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-code">Code</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 1</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 2</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 3</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 4</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 5</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 6</a></li>
</ul>
</div>
<!-- Item with tooltip -->
<button
type="button"
class="btn"
title="Bold"
data-control="tooltip"
data-placement="bottom"
data-container="body">
<i class="icon-bold"></i>
</button>
<!-- Disabled item -->
<button type="button" disabled class="btn">
<i class="icon-italic"></i>
</button>
<button type="button" class="btn">
<i class="icon-list-ul"></i>
</button>
<button type="button" class="btn">
<i class="icon-list-ol"></i>
</button>
<button type="button" class="btn">
<i class="icon-link"></i>
</button>
<button type="button" class="btn">
<i class="icon-minus"></i>
</button>
</div>
</div>
<div class="toolbar-item" style="width: 80px">
<button type="button" class="btn wn-icon-eye"></button>
<button type="button" class="btn wn-icon-expand"></button>
</div>
</div>
<div class="layout control-toolbar editor-toolbar">
<div class="layout-cell toolbar-item">
<div data-control="toolbar">
<!-- Dropdown item -->
<div class="dropdown dropdown-fixed">
<button
type="button"
class="btn"
title="Formatting"
data-toggle="dropdown"
data-control="tooltip"
data-placement="bottom"
data-container="body">
<i class="icon-paragraph"></i>
</button>
<ul class="dropdown-menu" data-dropdown-title="Formatting">
<li><a href="#" tabindex="-1" class="wn-icon-quote-right">Quote</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-code">Code</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 1</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 2</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 3</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 4</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 5</a></li>
<li><a href="#" tabindex="-1" class="wn-icon-header">Header 6</a></li>
</ul>
</div>
<!-- Item with tooltip -->
<button
type="button"
class="btn"
title="Bold"
data-control="tooltip"
data-placement="bottom"
data-container="body">
<i class="icon-bold"></i>
</button>
<!-- Disabled item -->
<button type="button" disabled class="btn">
<i class="icon-italic"></i>
</button>
<button type="button" class="btn">
<i class="icon-list-ul"></i>
</button>
<button type="button" class="btn">
<i class="icon-list-ol"></i>
</button>
<button type="button" class="btn">
<i class="icon-link"></i>
</button>
<button type="button" class="btn">
<i class="icon-minus"></i>
</button>
</div>
</div>
<div class="toolbar-item" style="width: 80px">
<button type="button" class="btn wn-icon-eye"></button>
<button type="button" class="btn wn-icon-expand"></button>
</div>
</div>
Copyright © 2024 Winter CMS