Everywhere throughout your app you will need to place controls, such as e.g. link icons, search inputs, buttons, dropdowns, selects or switches.
This can be needed as a page header or on smaller UI components. To help you to build your app fast we created Toolbar for you to serve as a container for all those controls to position, style and size them.
This will give a nice and recognisable consistancy all troughout your app.

Toolbar Styling

By default the toolbar is transparent so it will always nicely adjust to the element you add it to. To style it you can add one of the colors as a class or the class theme or theme-accent.
For the examples on this page we added the class theme to the toolbar.

Toolbar Example

Toolbar comes with functions which allow you to easily create panels or widgets some functionality.
The header of the example contains a toolbar with all available functions.

Toolbar example

Toolbar functions:

  • Refresh (ajax refresh)
  • Fullscreen
  • Collapsible
  • Removable
  • Search / Filter
Toolbar Title

You can choose to add one of the following classes to size the title's font size.
small, medium or large.

Title small
Title default
Tilte medium
Title large
Title ellipsis

To avoid that content is being pushed out of the toolbar, the title will break when getting in contact with the controls.

This is an extra long title to test the conflict with the icons

Resize your browser window to see the title ellipse effect.

Icons

Add class icon to the icon element.

Icons
Action icons

For icons that serve as link anchor or action icon, also add class action.

Action Icons
Large icons

Add class large to the icon element for large icons.

Toolbar caption

Use the toolbar as an overlay on images or video's. To display a title or add links and controls to your media
By default the toolbar is positioned on the top. Add class bottom to the toolbar to posion it on the bottom.

Title
Caption on hover

You can also choose to hide the toolbar caption and show it on hovering over the image. Add class .on-hover to the .toolbar-caption element.

Title
Fullscreen

Use class toolbar-fullscreen as the trigger.
Wrap the tooolbar and your content in a element with the class toolbar-parent.

Toolbar fullscreen

Markup

<div class="toolbar-parent">
    <div class="toolbar">
        <i class="icon action mdi toolbar-fullscreen pull-right"></i>
    </div>
    <div>
        <!-- Content... -->
    </div>
</div>
Collapsible

Use class toolbar-collapse as the trigger.
Add class collapsible-target to the element you want to be collapsible, and wrap it with the toolbar in a toolbar-parent element.

Toolbar collapsible

Markup

<div class="toolbar-parent">
	<div class="toolbar">
	    <i class="icon action mdi toolbar-collapse pull-right"></i>
	</div>
	<div class="collapsible-target">
	    <!-- Content... -->
	</div>
</div> 
Collapsed

To load in a collapsed state, add class collapsed to the collapsible-target. And add class closed to the trigger if you use a icon

Collapsed state
Removable

Use class toolbar-remove as the trigger. Wrap the toolbar in a element with the class toolbar-parent.

Remove toolbar

Markup

<div class="toolbar-parent">
    <div class="toolbar">
        <i class="icon action mdi toolbar-remove pull-right"></i>
    </div>
    <div class="collapsible-target collapsed">
        <!-- Content... -->
    </div>
</div>
Refresh

Use class toolbar-body on the element u want to refresh the data. Wrap this element along with the toolbar in a element with the class toolbar-parent.

Give the toolbar-parent an id on wich you call the toolbarRefresh function. Set the path to the file your refreshing from on the source: option.

Refresh content

Markup

<div id="yourID" class="toolbar-parent">
    <div class="toolbar">
        <i class="icon action mdi toolbar-refresh pull-right"></i>
    </div>
    <div class="toolbar-body">
        <!-- Content... -->
    </div>
</div>

JS


<!-- Initialize and set the path to your file -->
$('#yourID').toolbarRefresh({
     source: 'path/to/refresh.php'
});
 
Expanding Toolbar

Expanding Toolbar
Expanding Toolbar
Buttons

Use any of the button types in your toolbar.

Select
Switch
Progress bar

Add a progress bar to the toolbar. You can choose to place it on the top or bottom by adding class top or bottom to the progress element

Toolbar with progress bar
Loader

Use a loading indicator. You can also postion the loader by adding class top or bottom to the loader.

Toolbar with loader
Input field
Toolbar input

© 2016 YourApp