Intro
These visual specifications should serve as a guideline for Front-End Developers on how implement this control.
Icon Tab Bar (SAC)
To be combined with Page Header
| Value | Description | Details |
| A | Icon | Font size: 1rem R padding: 0.5rem Aside from the icon, spec should be the same as UI5 Icon Tab Bar |
Toolbar (SAC)
To be combined with Page Header
| Value | Description | Details |
| A | Container | Height: 2.75rem L padding: 1.188rem R padding: 1rem Horizontal alignment: Center |
| B | Icon | Font size: 1rem R padding: 0.5rem Color: --sapContent_IconColor |
| C | Label | UI5 Web Components: Label Type: Bold Color: --sapTextColor |
| D | Icon Button | UI5 Web Components: Button R padding: 0.5rem |
| E | Icon Button | UI5 Web Components: Button |
Title Toolbar (SAC)
| Value | Description | Details |
| A | Title | UI5 Web Components: Title Type: H5 Bold Color: --sapTextColor Aside from the title text, spec should be the same as the SAC Toolbar H2 should be assigned for the DOM (visual remains H5) |
Toolbar (DSP)
To be combined with Page Header
| Value | Description | Details |
| A | Container | Height: 2.75rem L padding: 1.188rem R padding: 1rem Horizontal alignment: Center |
| B | Icon | Font size: 1rem R padding: 0.5rem Color: --sapContent_NonInteractiveIconColor |
| C | Label | UI5 Web Components: Label Type: Bold |
| D | Icon Button | UI5 Web Components: Button R padding: 0.5rem |
| E | Icon Button | UI5 Web Components: Button |
Dynamic Page Header
| Value | Description | Details |
| A | Dynamic Page Header | Native UI5: Dynamic Page Visual Core: Dynamic Page Title: Special Case - Condensed header (Smaller title) |
Dynamic Page Header (SAC)
| Value | Description | Details |
| A | Dynamic Page Header | Native UI5: Label |
Base Side Panel
| Value | Description | Details |
| A | Icon Tab Bar / Toolbar | Icon Tab Bar / Toolbar Spec |
| B | Dynamic Page | SAC UI5 Web Components: Dynamic Page Visual Core: Dynamic Page DSP/BDC Native UI5: Dynamic Page Visual Core: Dynamic Page |
Data Analyzer (SAC)
| Value | Description | Details |
| A | Icon Tab Bar / Toolbar | Icon Tab Bar / Toolbar Spec |
| B | Dynamic Page | Native UI5: Dynamic Page Visual Core: Dynamic Page |
| C | Side Tab Bar | Spec TBC |