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>