inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2824] Doc review and minor changes to review checker tool (#3466)

Browse Source
This commit is contained in:
Andy Stark
2018-06-11 09:48:02 +01:00
committed by Eugenio Romano
parent 3281891dcd
commit d152c367aa
29 changed files with 336 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/core/boilerplate.component.md
View File

@@ -1,66 +0,0 @@
# Boilerplate component
Shows how to write a Markdown file for a component.
![Screenshot goes here if necessary](../docassets/images/adf-toolbar-01.png)
<!-- Most doc files don't need a table of contents. Delete this part unless
you have added about five subsections in the Details part.
-->
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
<!-- Delete any Basic Usage parts that you don't need (eg, some components don't
have any properties). -->
```html
<adf-document-list
#documentList
[currentFolderId]="'-my-'"
[contextMenuActions]="true"
[contentActions]="true">
</adf-document-list>
```
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| prop1 | string | 'hello' | The property description in the table should be no more than a few sentences. Add extra description in the Details section if you need to. |
| prop2 | boolean | true | Prop tables should have name, type, default and description, in that order. Leave default value blank if appropriate. |
### Events
| Name | Description |
| ---- | ----------- |
| someEvent | Keep description short for the table. Usually starts with "Emitted when..." |
| anotherEvent | Emitted when the user double-clicks a list node |
## Details
**Note: This is not a real component!**
Copy the contents of this file when you create a new component doc and edit or remove bits of it
as necessary. Usually, the title should be derived from the Angular name with the kebab-case expanded
(so "task-details.component" becomes "Task Details component") but there is no need to stick to this
if it looks wrong to you.
### Subsection
You don't need to make subsections in the Details part but add them if they help with the
explanation. Add them as level 3 headings in the Details part only - to keep the consistency
of the docs, you shouldn't normally add any new level 1 or 2 sections to the Markdown.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

43
docs/core/boilerplate.service.md
View File

@@ -1,43 +0,0 @@
# Boilerplate service
Shows how to write a Markdown file for a service.
## Methods
`someMethod(value: string = '')`<br/>
Shows how to document a method.
`anotherMethod(value: string = '')`<br/>
Shows how to document a method.
## Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| prop1 | string | 'hello' | Many services don't need a properties table. Delete this section if you don't need it. |
| prop2 | boolean | true | Prop tables should have name, type, default and description, in that order. Leave default blank if appropriate. |
## Details
**Note: This is not a real component!**
Copy the contents of this file when you create a new service doc and edit or remove bits of it
as necessary. Usually, the title should be derived from the Angular name with the kebab-case expanded
(so "page-title.service" becomes "Page Title service") but there is no need to stick to this
if it looks wrong to you.
The main difference between service and component docs is that services usually have methods. Replace
the method signature and description with your own text but keep the &lt;br> at the end of the
signature line.
### Subsection
You don't need to make subsections in the Details part but add them if they help with the
explanation. Add them as level 3 headings in the Details part only - to keep the consistency
of the docs, you shouldn't normally add any new level 1 or 2 sections to the Markdown.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

32
docs/core/buttons-menu.component.md
View File

@@ -1,16 +1,18 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-04-24
Last reviewed: 2018-06-08
---
# Buttons Menu Component
Displays buttons on a responsive menu. This way the html doesn't need to
Displays buttons on a responsive menu.
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
## Basic Usage
In order to use this component, you will have to place the buttons that you want to have in your menu inside this component's html tags.
Place the buttons for the menu inside this component's HTML tags.
They must use the following structure:
```html
@@ -24,7 +26,8 @@ They must use the following structure:
</adf-buttons-action-menu>
```
Notice that they need an icon and a label for the button inside a span tag. They also make use of the Angular material directive `mat-menu-item`.
Notice that the buttons have an icon and a label for the button inside a `<span>` tag.
They also make use of the Angular material directive `mat-menu-item`.
```html
<button mat-menu-item (click)="event()">
@@ -32,21 +35,20 @@ Notice that they need an icon and a label for the button inside a span tag. They
<span> label </span>
</button>
```
## Class members
### Properties
| Name | Type | Description |
| -- | -- | -- |
| isMenuEmpty | boolean | If the menu has no buttons it won't be displayed. |
## Details
This component is fully responsive and it will display two different layouts regarding the screen size.
This component is fully responsive and it will display one of two different layouts
depending on the screen size:
**Desktop View**
#### Desktop View
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
#### Mobile View
**Mobile View**
![adf-buttons-menu-mobile](../docassets/images/adf-buttons-menu-mobile.png)
The component has a property called `isMenuEmpty` that you can access from code. If this is
set to true then the component will not show an empty menu with no buttons defined.

44
docs/core/empty-content.component.md
View File

@@ -1,22 +1,44 @@
---
Added: v2.4.0
Status: Active
Last reviewed:
Last reviewed: 2018-06-08
---
# Empty Content Component
Provides a generic "Empty Content" UI and can used as a placeholder for components that need to show different content when being empty.
Provides a generic "Empty Content" placeholder for components.
## Properties
![Favorites screen](../docassets/images/empty-content-favorites.png)
| Name | Type | Description |
| ---- | ---- | ----------- |
| icon | string | Material Icon to use |
| title | string | String or Resource Key for the title |
| subtitle | string | String or Resource Key for the subtitle |
## Basic usage
## Examples
```html
<adf-document-list>
<empty-folder-content>
<ng-template>
<adf-empty-content
icon="star_rate"
title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
</adf-empty-folder>
</ng-template>
</empty-folder-content>
</adf-document-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| icon | `string` | "cake" | Material Icon to use |
| subtitle | `string` | "" | String or Resource Key for the title |
| title | `string` | "" | String or Resource Key for the subtitle |
## Details
### Usage examples
```html
<adf-document-list>
@@ -52,3 +74,7 @@ You can also use multiple lines instead of the subtitle section:
```
![Trashcan screen](../docassets/images/empty-content-trashcan.png)
## See also
- [Error content component](error-content.component.md)

7
docs/core/info-drawer-layout.component.md
View File

@@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Info drawer layout component
@@ -29,12 +30,16 @@ Displays a sidebar-style information panel.
## Details
As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example:
As the name suggests, this is basically just a layout with CSS styling. There are three
regions where you can add your own content, as shown in the example:
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
See the [Info drawer layout component](../core/info-drawer-layout.component.md) for an alternative approach that uses tabs to
structure the content of the info drawer.
## See also
- [Info drawer component](info-drawer.component.md)

15
docs/core/info-drawer-tab.md
View File

@@ -1,5 +1,13 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-06-08
---
# Info Drawer Tab component
Renders tabs in a [Info drawer component](../core/info-drawer.component.md).
![Info drawer screenshot](../docassets/images/label-tab.png)
## Basic usage
@@ -46,6 +54,11 @@ Render tab with icon instead of labels:
| label | `string` | '' | Tab label. |
| icon | `string` | null | The material design icon. |
## Details
See the [Info drawer component](../core/info-drawer.component.md) page for details of how to use this subcomponent.
## See also
- [Info drawer layout component](info-drawer.component.md)
- [Info drawer component](info-drawer.component.md)
- [Info drawer layout component](info-drawer-layout.component.md)

6
docs/core/info-drawer.component.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-06-08
---
# Info Drawer component
@@ -47,11 +47,11 @@ Displays a sidebar-style information panel with tabs.
## Details
This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the `adf-info-drawer-tab` subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the Info drawer tab subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
You can also customize the three regions (title, buttons and content) as with the [Info Drawer Layout component](../core/info-drawer-layout.component.md).
## See also
- [Info drawer layout component](info-drawer-layout.component.md)
- [Info drawer layout component](info-drawer-tab.component.md)
- [Info drawer tab component](info-drawer-tab.component.md)

104
docs/core/log.service.md
View File

@@ -1,11 +1,12 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Log Service
Provide a log functionality for your ADF application.
Provides log functionality.
## Basic Usage
@@ -31,9 +32,73 @@ export class AppComponent {
}
```
```ts
import { LogService } from '@alfresco/adf-core';
@Component({...})
export class AppComponent {
constructor(logService: LogService, myIntegrationService: MyIntegrationService)) {
logService.onMessage.subscribe((message) => {
myIntegrationService.send(message.text,message.type);
});
}
}
```
## Class members
### Methods
- **assert**(test?: `boolean` = `null`, message?: `string` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message if a boolean test fails.
- _test:_ `boolean` - (Optional) Test value (typically a boolean expression)
- _message:_ `string` - (Optional) Message to show if test is false
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **debug**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "DEBUG" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **error**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "ERROR" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **getLogLevel**(level: `string` = `null`): [`LogLevelsEnum`](../../lib/core/models/log-levels.model.ts)<br/>
Converts a log level name string into its numeric equivalent.
- _level:_ `string` - Level name
- **Returns** [`LogLevelsEnum`](../../lib/core/models/log-levels.model.ts) - Numeric log level
- **group**(groupTitle?: `string` = `null`, optionalParams: `any[]` = `null`)<br/>
Starts an indented group of log messages.
- _groupTitle:_ `string` - (Optional) Title shown at the start of the group
- _optionalParams:_ `any[]` - Interpolation values for the title in "printf" format
- **groupEnd**()<br/>
Ends a indented group of log messages.
- **info**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "INFO" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **log**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at any level from "TRACE" upwards.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **messageBus**(text: `string` = `null`, logLevel: `string` = `null`)<br/>
Triggers notification callback for log messages.
- _text:_ `string` - Message text
- _logLevel:_ `string` - Log level for the message
- **trace**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "TRACE" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **warn**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "WARN" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
## Details
### Log levels
The [log service](../core/log.service.md) provide 6 level of logs:
There are 6 levels of logs that you can use:
| Name | Level |
| ---- | ----- |
@@ -44,9 +109,10 @@ The [log service](../core/log.service.md) provide 6 level of logs:
| ERROR | 1 |
| SILENT | 0 |
You can configure the log level setting the **_logLevel_** properties in the **app.config.json**. By default the level is TRACE.
You can set the default log level using the **_logLevel_** property in `app.config.json`.
The factory setting for this property is `TRACE`.
If you want set for example the log to warning:
For example, you can set the default log level to `WARNING` as follows:
**app.config.json**
@@ -58,9 +124,10 @@ If you want set for example the log to warning:
### Log message bus
The logservice provide also an [`Observable`](http://reactivex.io/documentation/observable.html) **_onMessage_** where you can subscribe and recive all the logs:
The messagge object recived form the bus is composed:
The [log service](../core/log.service.md) also provides an
[`Observable`](http://reactivex.io/documentation/observable.html) called `_onMessage_`
that you can subscribe to if you want to receive all the log messages.
The message object passed as a parameter to the `onMessage` handler has the following format:
```ts
{
@@ -69,21 +136,10 @@ The messagge object recived form the bus is composed:
}
```
## Usage
### Using the log to feed analytics
```ts
import { LogService } from '@alfresco/adf-core';
@Component({...})
export class AppComponent {
constructor(logService: LogService, myIntegrationService: MyIntegrationService)) {
logService.onMessage.subscribe((message) => {
myIntegrationService.send(message.text,message.type);
});
}
}
```
You can pass the log output to an analytics system to collect error and assertion data
from apps as they run. This can help you spot which problems users are running into most
often and the situations in which they occur. See the tutorial about
[integrating the log service with analytics](https://community.alfresco.com/community/application-development-framework/blog/2018/05/01/how-to-integrate-adf-log-service-with-mixpanel-analytics-service)
on the Alfresco Community site for further information.

1
docs/core/notification.service.md
View File

@@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Notification Service

1
docs/core/shared-links-api.service.md
View File

@@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Shared Links Api service

62
docs/core/sidenav-layout.component.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.3.0
Status: Active
Last reviewed: 2018-04-11
Last reviewed: 2018-06-08
---
# Sidenav Layout component
@@ -21,8 +21,6 @@ Displays the standard three-region ADF application layout.
- [Details](#details)
- [Public attributes](#public-attributes)
- [Events](#events-1)
- [Template context](#template-context)
- [menuOpenState$](#menuopenstate)
- [Preserving the menu state](#preserving-the-menu-state)
@@ -70,15 +68,15 @@ Displays the standard three-region ADF application layout.
| -- | -- | -- | -- |
| expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? |
| hideSidenav | `boolean` | false | Toggles showing/hiding the navigation region |
| sidenavMax | `number` | | ( |
| sidenavMin | `number` | | ( |
| stepOver | `number` | | ( |
| sidenavMax | `number` | | Maximum size of the navigation region |
| sidenavMin | `number` | | Minimum size of the navigation region |
| stepOver | `number` | | Screen size at which display switches from small screen to large screen configuration |
### Events
| Name | Type | Description |
| -- | -- | -- |
| expanded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | |
| expanded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the menu toggle and the collapsed/expanded state of the sideNav changes |
## Details
@@ -106,18 +104,6 @@ Desktop layout (screen width greater than the `stepOver` value):
Mobile layout (screen width less than the `stepOver` value):
![Sidenav on mobile](../docassets/images/sidenav-layout-mobile.png)
### Public attributes
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| menuOpenState$ | Observable&lt;boolean> | true | Another way to listen to menu open/closed state |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| expanded | `EventEmitter<boolean>` | Emmitted when the menu toggle and the collapsed/expanded state of the sideNav changes |
### Template context
Each template is given a context containing the following methods:
@@ -130,26 +116,38 @@ Each template is given a context containing the following methods:
### menuOpenState$
Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is the menuOpenState$ observable, which is driven by a BehaviorSubject at the background. The value emitted on this observable is the opposite of the isMenuMinimized template variable.
Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is with the `menuOpenState$` observable, which is driven by a `BehaviorSubject` in the background. The value emitted by this observable is the opposite of the `isMenuMinimized` template variable.
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| menuOpenState$ | Observable&lt;boolean> | true | Another way to listen to menu open/closed state |
Every time the menu state is changed, the following values are emitted:
- true, if the menu got into opened state
- false, if the menu git into closed state
- true, if the menu changed to the opened state
- false, if the menu changed to the closed state
### Preserving the menu state
It is possible to preserve the state of the menu between sessions. This require to first set a property in the appConfig.json file.
You can preserve the state of the menu between sessions. To do this, you first need to
set a property in the `app.config.json` file:
"sideNav" : {
"preserveState" : true
}
```json
"sideNav" : {
"preserveState" : true
}
```
If this property is set, the collapsed/expanded state will be stored in the local storage, and it will be restored with page reload or the next time the user visits the app.
Beside this, it is also possible to set the default value in the appConfig.json file:
When this property is set, the collapsed/expanded state will be stored in the local storage
and restored when the page is reloaded or when the user next uses the app.
"sideNav" : {
"expandedSidenav" : true
}
You can also set the default state in the `app.config.json` file:
By default the collapsed/exapnded state should be read from the application configuration file, but only if there is no value for the collapsed/expanded state in the local storage.
```json
"sideNav" : {
"expandedSidenav" : true
}
```
Note that if `preserveState` is set then the current state of the sidenav (set by the user)
will override this default setting.

52
docs/core/sorting-picker.component.md
View File

@@ -1,11 +1,16 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-06-08
---
# Sorting Picker Component
Provides an ability to pick one of the predefined sorting definitions and define sorting direction:
Selects from a set of predefined sorting definitions and directions.
![Sorting Picker](../docassets/images/sorting-picker.png)
## Basic Usage
```html
<adf-sorting-picker
@@ -16,11 +21,30 @@ Provides an ability to pick one of the predefined sorting definitions and define
</adf-sorting-picker>
```
![Sorting Picker](../docassets/images/sorting-picker.png)
## Class members
## Options format
### Properties
You can bind a collection of any objects that expose the following properties:
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| ascending | `boolean` | true | Current sorting direction |
| options | `Array<object>` | \[] | Available sorting options |
| selected | `string` | | Currently selected option key |
### Events
| Name | Type | Description |
| -- | -- | -- |
| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<object>` | Raised each time sorting key or direction gets changed. |
## Details
The picker shows the user a menu of sorting options (which could be data columns to sort on
alphabetical vs numerical search, etc) and the choice of ascending vs descending sort order.
Note that picker only implements the menu, so you are responsible for implementing the sorting
options yourself.
The `options` property contains an array of any objects that expose the following properties:
```ts
{
@@ -29,15 +53,13 @@ You can bind a collection of any objects that expose the following properties:
}
```
## Properties
The `key` is an identifying value and the `label` is the text that the user will see in the
picker. The selected `key` is reported by the `change` event, which passes an object like the
following as its parameter:
| Name | Type | Default Value | Description |
| options | `Array<{key: string, label: string}>` | `[]` | Available sorting options. |
| selected | `string` | | Currently selected option key. |
| ascending | `boolean` | true | Current sorting direction. |
## Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| change | `EventEmitter<{ key: string, ascending: boolean }>` | Raised each time sorting key or direction gets changed. |
```ts
{
key: string,
ascending: boolean
}
```

1
docs/core/start-form.component.md
View File

@@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Start Form component

1
docs/core/toolbar-divider.component.md
View File

@@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Toolbar Divider Component

1
docs/core/toolbar-title.component.md
View File

@@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Toolbar Title Component

26
docs/core/toolbar.component.md
View File

@@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Toolbar Component
@@ -53,7 +54,8 @@ Simple container for headers, titles, actions and breadcrumbs.
### 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:
You can use any HTML layout or Angular component as the content of the title section by
using the `<adf-toolbar-title>` subcomponent instead of the "title" attribute:
```html
<adf-toolbar>
@@ -64,8 +66,6 @@ You can use any HTML layout or Angular component as a content of the Title secti
</adf-toolbar>
```
The toolbar should now look similar to the following:
![](../docassets/images/adf-toolbar-02.png)
### Divider
@@ -83,8 +83,9 @@ You can divide groups of elements with a visual separator `<adf-toolbar-divider>
### 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:
You can split the toolbar into separate sections at the left and right of the screen
with the `adf-toolbar--spacer` CSS class. In the following example, the toolbar title
element is rendered to the left but all the buttons are pushed to the right side:
```html
<adf-toolbar>
@@ -100,12 +101,11 @@ to fill the empty space and move the content to the right of the toolbar if need
</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:
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">
@@ -131,11 +131,10 @@ You can use the following example to create a dropdown 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.
![](../docassets/images/adf-toolbar-03.png)
Once you click the menu button you should see the following menu items as defined earlier:
With the menu set up like this, you would see the following menu items as defined earlier
when you click the menu button:
![](../docassets/images/adf-toolbar-04.png)
@@ -143,7 +142,8 @@ Once you click the menu button you should see the following menu items as define
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.
You might also want to change colors to follow your application's color
[theme](../user-guide/theming.md):
For example:

1
docs/core/translation.service.md
View File

@@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-07
---
# Translation service