The Bar component consists of three areas to hold its content. It has the capability to center content, such as a title, while having other components on the left and right side.
With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.
Note: Do not place a Bar inside another Bar or inside any bar-like component. Doing so causes unpredictable behavior.
For the ui5-bar
ES6 Module Import
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Defines the ui5-bar design.
Note: Available options are "Header", "Subheader", "Footer", "FloatingFooter".
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.
Defines the content at the end of the bar
Defines the content in the middle of the bar
Defines the content at the start of the bar
Theme:Quartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteBelizeHigh Contrast BlackHigh Contrast White