Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

DSP App Toolbar

DSP App Toolbar

Value Description Details
A Toolbar Container Native UI5: Toolbar
L/R inner padding: 1rem
Width: 100%
Height: 3.125rem

Spacing between toolbar elements: 0.5rem
Spacing between left-side toolbar actions & right-side section: fill width
All elements vertically aligned in toolbar container

SAC App Toolbar: Collapsed

SAC App Toolbar – Collapsed

Value Description Details
A Toolbar Container Native UI5: Toolbar
L/R inner padding: 1rem
Width: 100%
Height: 3.625rem

Spacing between toolbar elements: 0.5rem
Spacing between left-side toolbar actions & right-side section: fill width
All elements vertically aligned in toolbar container

SAC App Toolbar: Expanded

SAC App Toolbar – Expanded

Value Description Details
A Toolbar Container Native UI5: Toolbar
L/R inner padding: 1rem
Width: 100%
Height: 5.125rem

Spacing between section labels and toolbar elements: 0.25rem
Spacing between toolbar elements: 0.5rem
Spacing between left-side toolbar actions & right-side section: fill width
All elements vertically aligned in toolbar container