Intro
The bar is a container that can hold text, titles, buttons, and input elements.
https://www.sap.com/design-system/live-examples/Bar/Bar_LE_Header.html
Bar used as a title bar or page header
https://www.sap.com/design-system/live-examples/Bar/Bar_LE_Header_Subheader.html
Bar used as title bar/page header and as a subheader
When to Use
Do
Use the bar:
- For page headers, subheaders, footers, and floating footers used on a page, dialog, or popover.
- If you only need to include a small number of components.
Don't
Don’t use the bar:
- If you need a container for a larger number of components, with a built-in overflow menu. Use the toolbar instead.
Anatomy
1. Bar container
The bar container provides slots:
A. Start content: Defines the content at the start of the bar.
B. End content: Defines the content at the end of the bar.
der.
Anatomy of a bar container
Types
Title Bar
The bar is used as a page header.
Title Bar with Subheader
The bar is used as a page header with a subheader.
Page Footer Bar
The bar is used as a page footer.
Floating Footer Bar
The bar is used as a floating footer.
Behavior and Interaction
Within the bar container, all the interactions depend on the components used.
Responsive Behavior
The bar doesn’t have a built-in overflow menu. If there isn’t enough space to show all the elements on the title bar, add a subheader.
Globalization and Localization
The bar container supports left-to-right (LTR) and right-to-left (RTL) reading directions.