mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
1fa81962a0
* fix after rebase * new release strategy for ng next Signed-off-by: eromano <eugenioromano16@gmail.com> * peer dep Signed-off-by: eromano <eugenioromano16@gmail.com> * Angular 14 fix unit test and storybook Signed-off-by: eromano <eugenioromano16@gmail.com> fix after rebase Signed-off-by: eromano <eugenioromano16@gmail.com> update pkg.json Signed-off-by: eromano <eugenioromano16@gmail.com> missing dep Signed-off-by: eromano <eugenioromano16@gmail.com> Fix mistake and missing code Dream....build only affected libs Add utility run commands * Use nx command to run affected tests * Fix nx test core fix content tests Run unit with watch false core test fixes reduce test warnings Fix process cloud unit Fix adf unit test Fix lint process cloud Disable lint next line Use right core path Fix insights unit fix linting insights Fix process-services unit fix the extensions test report fix test warnings Fix content unit Fix bunch of content unit * Produce an adf alpha of 14 * hopefully fixing the content * Push back the npm publish * Remove flaky unit * Fix linting * Make the branch as root * Get rid of angualar13 * Remove the travis depth * Fixing version for npm * Enabling cache for unit and build * Fix scss for core and paths Copy i18 and asset by using ng-packager Export the theming alias and fix path Use ng-package to copy assets process-services-cloud Use ng-package to copy assets process-services Use ng-package to copy assets content-services Use ng-package to copy assets insights * feat: fix api secondary entry point * fix storybook rebase * Move dist under dist/libs from lib/dist * Fix the webstyle * Use only necessary nrwl deps and improve lint * Fix unit for libs * Convert lint.sh to targets - improve performance * Use latest of angular * Align alfresco-js-api Signed-off-by: eromano <eugenioromano16@gmail.com> Co-authored-by: eromano <eugenioromano16@gmail.com> Co-authored-by: Mikolaj Serwicki <mikolaj.serwicki@hyland.com> Co-authored-by: Tomasz <tomasz.gnyp@hyland.com>
138 lines
3.8 KiB
Markdown
138 lines
3.8 KiB
Markdown
---
|
|
Title: Toolbar Component
|
|
Added: v2.0.0
|
|
Status: Active
|
|
Last reviewed: 2018-06-08
|
|
---
|
|
|
|
# [Toolbar Component](lib/core/src/lib/toolbar/toolbar.component.ts "Defined in toolbar.component.ts")
|
|
|
|
Simple container for headers, titles, actions and breadcrumbs.
|
|
|
|
|
|
|
|
## Contents
|
|
|
|
- [Basic Usage](#basic-usage)
|
|
- [Transclusions](#transclusions)
|
|
- [Class members](#class-members)
|
|
- [Properties](#properties)
|
|
- [Details](#details)
|
|
- [Dropdown menu](#dropdown-menu)
|
|
- [Custom color](#custom-color)
|
|
- [See also](#see-also)
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<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](../../user-guide/transclusion.md)
|
|
|
|
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:
|
|
|
|
```html
|
|
<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](../../content-services/components/breadcrumb.component.md) title, and then some buttons
|
|
pushed to the right by a spacer:
|
|
|
|
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default value | Description |
|
|
| ---- | ---- | ------------- | ----------- |
|
|
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | 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:
|
|
|
|
```html
|
|
<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](../../user-guide/theming.md):
|
|
|
|
For example:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## See also
|
|
|
|
- [Toolbar Divider component](toolbar-divider.component.md)
|
|
- [Toolbar Title component](toolbar-title.component.md)
|