OverviewThe Bar is a container which is primarily used to hold titles, buttons and input elements and its design and functionality is the basis for page headers and footers. The component consists of three areas to hold its content - startContent slot, default slot and endContent slot. It has the capability to center content, such as a title, while having other components on the left and right side.
UsageWith 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 may cause unpredictable behavior.
Responsive BehaviorThe default slot will be centered in the available space between the startContent and the endContent areas, therefore it might not always be centered in the entire bar.
CSS Shadow Parts
ui5-barexposes the following CSS Shadow Parts:
- bar - Used to style the wrapper of the content of the component
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.
Note: Available options are:
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