avives
1f72193a64
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
- Base: wintercms/winter branch 1.2 (full framework) - Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS - Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication - Partials: hero (offline-first), features, modes (offline/nube toggle), screenshots, pricing (3 planes), comparison, FAQ, CTA - Plugin VivesPOS.Site with ContactForm - Dockerfile: PHP 8.2 Apache, port 80, healthcheck - Added winter/wn-pages, blog, sitemap, seo plugins - Active theme set to vivespos
163 lines
6.7 KiB
Markdown
163 lines
6.7 KiB
Markdown
# 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>
|
|
|
|
### 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>
|
|
|
|
### 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>
|
|
|
|
### 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>
|
|
|
|
## 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>
|