Command Bar

The Command bar is used to interact with longer lists, tables and tile-views. Have a look at the styleguide for further details as well as do's and dont's.

Settings


Show Action labels Show Sort button Switch to Filter (BCI)

Examples

A Command bar can include a Search field and Action buttons. In addition you can activate a tooltip for the search field which shows the placeholder of the search field.

Recent Do some magic! Disabled Action Edit Delete

the number of items and a Sorting button,

a Filter button,

quickfilters for one-click filtering and complex Inlined filters. Filter-chips can be shown to simplify filtering. Please explicitly define the inline filter's label for smaller screens if it does not contain a MatFormField.

Usertype None {{ userType.viewValue }} Only External Recent Disabled Filter

The Commandbar add button can also be overridden to show a Selection list with predefined List items.

You can also add tooltips to any commandbar button and disable them if needed.

Tooltip text Tooltip disabled
Button Disabled Button

Table interaction demo

(Full-HD resolution is required for all elements to be visible.)

Usertype None {{ userType.viewValue }} Only External Recent NOK Monitoring Show/Hide Columns Edit Delete Some unremovable filter {{ filter.label() }}
Id {{ user.id }} Name {{ user.name }} Role {{ user.role }} Department {{ user.department }} Email {{ user.email }} Entry Date {{ user.entryDate | date: 'shortDate' }}

Styling edge cases

Usertype None {{ userType.viewValue }} Show/Hide Columns Edit Delete
Compare NOK Monitoring Download Settings
Optional additional margin left for add button

If required you can add additonal margin to the left for the add button. This is necessary in the example below to met all style requirements defined by the Brandguide. To activate it set the additionalAddBtnMargin property to true.

Additonal margin for Add button


Compare NOK Monitoring
Recent New Special Download Settings
Recent Download Settings