Toolbar

The Toolbar component provides a container for action buttons (tool buttons) that can be arranged horizontally or vertically. It’s a versatile UI element for grouping related actions in a compact, organized manner.

Dependencies

This component has no external dependencies beyond the Metro UI core CSS.

Usage

Basic Usage

<!-- Basic horizontal toolbar -->
<div class="toolbar">
    <button class="tool-button"><span class="mif-home"></span></button>
    <button class="tool-button"><span class="mif-pencil"></span></button>
    <button class="tool-button"><span class="mif-search"></span></button>
</div>

Additional Configurations

<!-- Vertical toolbar -->
<div class="toolbar vertical">
    <button class="tool-button"><span class="mif-home"></span></button>
    <button class="tool-button"><span class="mif-pencil"></span></button>
    <button class="tool-button"><span class="mif-search"></span></button>
</div>

<!-- Movable toolbar with caption -->
<div class="toolbar movable" data-caption="Tools">
    <button class="tool-button"><span class="mif-home"></span></button>
    <button class="tool-button"><span class="mif-pencil"></span></button>
    <button class="tool-button"><span class="mif-search"></span></button>
</div>

Plugin Parameters

The toolbar is a CSS-only component and doesn’t have JavaScript plugin parameters.

API Methods

The toolbar is a CSS-only component and doesn’t have JavaScript API methods.

Events

The toolbar is a CSS-only component and doesn’t have JavaScript events.

Styling with CSS Variables

The toolbar component uses the following CSS variables that you can customize:

Variable	Default (Light)	Dark Mode	Description
--tool-button-border-radius	4px	4px	Border radius for tool buttons
--tool-button-background	#F8F8F8	#2e2e2e	Background color for tool buttons
--tool-button-color	#191919	#F8F8F8	Text color for tool buttons
--tool-button-background-hover	#dcdcdc	#373737	Background color for tool buttons on hover
--tool-button-color-hover	#474747	#bfbfbf	Text color for tool buttons on hover
--tool-button-border-color	#E8E8E8	#4A4D51	Border color for outline tool buttons

Example of Custom Styling

:root {
    --tool-button-background: #0078d7;
    --tool-button-color: white;
    --tool-button-background-hover: #106ebe;
    --tool-button-color-hover: white;
    --tool-button-border-radius: 2px;
}

Available CSS Classes

Base Classes

• .toolbar - The main container class for the toolbar
• .tool-button - Class for individual action buttons within the toolbar

Modifiers

• .toolbar.vertical - Arranges buttons in a vertical column
• .toolbar.movable - Adds a draggable handle to the toolbar
• .toolbar.no-divider - Removes the divider (handle) from the toolbar

Tool Button Modifiers

• .tool-button.text-button - Creates a button with text (auto-width)
• .tool-button.outline - Creates a button with an outline style
• .tool-button.w-auto - Creates a button with automatic width
• .tool-button.disabled - Styles for disabled buttons

Tool Button Types

Standard Tool Button

<button class="tool-button">
    <span class="mif-home"></span>
</button>

Text Button

<button class="tool-button text-button">
    Save
</button>

Outline Button

<button class="tool-button outline">
    <span class="mif-pencil"></span>
</button>

Auto-width Button

<button class="tool-button w-auto">
    <span class="mif-cog"></span> Settings
</button>

Disabled Button

<button class="tool-button disabled">
    <span class="mif-block"></span>
</button>
<!-- or -->
<button class="tool-button" disabled>
    <span class="mif-block"></span>
</button>

Toolbar with Caption

You can add a caption to your toolbar using the data-caption attribute:

<div class="toolbar" data-caption="Editor tools">
    <!-- Tool buttons -->
</div>

Using Icons

Tool buttons support various icon formats:

<!-- Metro Icon Font -->
<button class="tool-button">
    <span class="mif-file-text"></span>
</button>

<!-- Custom Icon Class -->
<button class="tool-button">
    <span class="icon custom-icon"></span>
</button>

<!-- Image -->
<button class="tool-button">
    <img src="icon.png" alt="Icon">
</button>

Customizing Appearance

Button Size

By default, tool buttons are 32x32 pixels. You can customize their size using CSS:

.my-custom-toolbar .tool-button {
    width: 48px;
    height: 48px;
}

.my-custom-toolbar .tool-button [class*=mif],
.my-custom-toolbar .tool-button .icon,
.my-custom-toolbar .tool-button img {
    height: 24px;
    width: 24px;
    font-size: 24px;
}

Button Spacing

Tool buttons have a default margin of 0 2px in horizontal toolbars and 2px 0 in vertical toolbars. You can adjust this with custom CSS:

.toolbar .tool-button {
    margin: 0 5px;  /* Horizontal spacing */
}

.toolbar.vertical .tool-button {
    margin: 5px 0;  /* Vertical spacing */
}