31479cfaa4
* [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Fixed links in Proc cloud, Insights and Extensions docs * [ADF-4152] Updated links in user guide * [ADF-4152] Fixed broken links in tutorials * [ADF-4152] Fixed remaining links in core docs * [ADF-4152] Fixed remaining links in proc services docs * [ADF-4152] Fixed remaining links in content services docs * [ADF-4152] Fixed links in breaking changes docs * [ADF-4152] Updated main README index page * [ADF-4152] Fixed glitches with preview ext component docs
3.7 KiB
Title, Added, Status, Last reviewed
| Title | Added | Status | Last reviewed |
|---|---|---|---|
| Toolbar Component | v2.0.0 | Active | 2018-06-08 |
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>
Transclusions
You can set the title content using an <adf-toolbar-title> element (although
you can also set a simple textual title with the title attribute).
All other content in the toolbar is free-form but you can use one or more
<adf-toolbar-divider> elements between your own elements to add a visual
separator. Also, any content following a <div> element with the CSS class
adf-toolbar--spacer will be pushed across to the right-hand side of the
toolbar:
<adf-toolbar>
<adf-toolbar-title>
<adf-breadcrumb ...></adf-breadcrumb>
</adf-toolbar-title>
<adf-toolbar-divider></adf-toolbar-divider>
<button></button>
<button></button>
<div class="adf-toolbar--spacer"></div>
<button></button>
</adf-toolbar>
For example, the image below shows a toolbar with a Breadcrumb component title, and then some buttons pushed to the right by a spacer:
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
Dropdown menu
The following example shows how to create a dropdown menu. The code is based
on the <mat-menu> component from the @angular/material library
but you could also use your own custom menu components:
<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>
With the menu set up like this, you would see the following menu items as defined earlier when you click the menu button:
Custom color
Besides the default color you can use 'primary', 'accent', or 'warn' values:
You might also want to change colors to follow your application's color theme:
For example:
