inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
alfresco-ng2-components/docs/core/toolbar.component.md
Denys Vuika 2bba93d80e update toolbar docs (#3423)
2018-06-01 13:27:05 +02:00

3.6 KiB
Raw Blame History

Added, Status
Added Status
v2.0.0 Active

Toolbar Component

Simple container for headers, titles, actions and breadcrumbs.

Contents

Basic Usage

<adf-toolbar title="Toolbar">
    <button mat-icon-button>
        <mat-icon>create_new_folder</mat-icon>
    </button>
    <button mat-icon-button>
        <mat-icon>delete</mat-icon>
    </button>
</adf-toolbar>

Class members

Properties

Name Type Default value Description
color string Toolbar color. Can be changed to empty value (default), primary, accent or warn.
title string "" Toolbar title.

Details

Custom title

You can use any HTML layout or Angular component as a content of the Title section by using the special <adf-toolbar-title> component instead of the "title" attribute:

<adf-toolbar>
    <adf-toolbar-title>
        <adf-breadcrumb ...></adf-breadcrumb>
    </adf-toolbar-title>
    ...
</adf-toolbar>

The toolbar should now look similar to the following:

Divider

You can divide groups of elements with a visual separator <adf-toolbar-divider>:

<adf-toolbar>
    <button></button>
    <button></button>
    <adf-toolbar-divider></adf-toolbar-divider>
    <button></button>
</adf-toolbar>

Spacer

You can provide a separate element with adf-toolbar--spacer class name to fill the empty space and move the content to the right of the toolbar if needed:

<adf-toolbar>
    <adf-toolbar-title>
        ...
    <adf-toolbar-title>
    
    <div class="adf-toolbar--spacer"></div>

    <button></button>
    <adf-toolbar-divider></adf-toolbar-divider>
    <button></button>
</adf-toolbar>

In the example above, the toolbar title element is rendered to the left, but all the buttons are pushed to the right side.

Dropdown menu

You can use the following example to create a dropdown menu:

<adf-toolbar title="Toolbar">
    ...

    <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item>
            <mat-icon>dialpad</mat-icon>
            <span>Redial</span>
        </button>
        <button mat-menu-item disabled>
            <mat-icon>voicemail</mat-icon>
            <span>Check voicemail</span>
        </button>
        <button mat-menu-item>
            <mat-icon>notifications_off</mat-icon>
            <span>Disable alerts</span>
        </button>
    </mat-menu>
</adf-toolbar>

The code above is based on the <mat-menu> component from the @angular/material library. You can use any custom menu component as well.

Once you click the menu button you should see the following menu items as defined earlier:

Custom color

Besides the default color you can use 'primary', 'accent', or 'warn' values:

Depending on the overall application theme the colors of the toolbar should change.

For example:

See also