Documentation menu

Toolbar

A toolbar is a collection of the most commonly used features.

This guide describes how to create and customize the toolbar.

Creating the toolbar

You can create the toolbar by calling the fm3.Controls.Toolbar() method in JavaScript code or using the <fm-toolbar> tag in your HTML:

Positioning the toolbar

By default, the toolbar is displayed horizontally. To display the toolbar vertically, use the vertical attribute of the <fm-toolbar> tag:

<fm-toolbar state-id="fm-state" vertical>
</fm-toolbar>
Live example

Customizing the toolbar

You can customize the toolbar using the <template> tag inside the <fm-toolbar> tag. The general idea is that you manually specify necessary toolbar tabs with needed configurations in the <template>.

See the following sections to learn about particular use cases.

Display a specific set of tabs

If you want to show only a few specific tabs in the toolbar, list them within the <template> tag:

<fm-toolbar state-id="fm-state">
  <template>
    <fm-field-list-tab></fm-field-list-tab>
    <fm-fullscreen-tab></fm-fullscreen-tab>
  </template>
</fm-toolbar>
Live example

As a result, only the Fields and Fullscreen tabs will be displayed in the toolbar. Check out the list of all toolbar tabs.

Customize an existing tab

You can customize an existing tab using the tab attributes. For example, change the icon and label of a tab:

<fm-toolbar state-id="fm-state">
  <template>
    <fm-field-list-tab icon="ui_search" label="New label"></fm-field-list-tab>
  </template>
</fm-toolbar>
Live example

Note that the icon attribute supports only the icons from the Flexmonster icon set. If you need a custom icon, use the <fm-tab> tag to define the tab content manually:

<fm-toolbar state-id="fm-state">
  <template>
    <fm-field-list-tab>
      <fm-tab>
        <a class="fm-tab-highlight">
          <span style="font-size: 21px;">⚙️</span>
          <span class="fm-label">New label</span>
        </a>
      </fm-tab>
    </fm-field-list-tab>
  </template>
</fm-toolbar>
Live example

Notice that the fm-tab-highlight and fm-label classes apply the default Flexmonster styles to the tab.

Add a new tab

To add a new toolbar tab with your own functionality, use the <fm-tab> tag:

Live example

Notice that the fm-tab-highlight and fm-label classes apply the Flexmonster default styles to the new tab.

Add a new tab with a dropdown

You can create a new toolbar tab with a dropdown using the <fm-dropdown>, <fm-dropdown-toggle>, <fm-dropdown-content>, and <fm-tab> tags. Check out an example:

Live example

Notice that the fm-tab-highlight and fm-label classes apply default Flexmonster styles to toolbar tabs.

To learn more about each tag, see the list of tags for toolbar configuration.

See also