Used as a header, sub-header and a footer of a page.
The Bar
control consists of three areas to hold its content. It has the capability to center content, such as a title, while having other controls on the left and right side.
With the use of the design
property, you can set the style of the Bar
to appear as a header, sub-header and footer.
Note: Do not place a sap.m.Bar
inside another sap.m.Bar
or inside any bar-like control. Doing so causes unpredictable behavior.
The content in the middle area is centrally positioned if there is enough space. If the right or left content overlaps the middle content, the middle content will be centered in the space between.
Constructor for a new Bar
.
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.m.Bar(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | ID for the new control, generated automatically if no ID is given |
|
mSettings? | object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
design | sap.m.BarDesign | Auto | Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed. |
enableFlexBox | boolean | false | If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space. Visibility: public |
titleAlignment | sap.m.TitleAlignment | None | Specifies the Title alignment (theme specific). If set to |
translucent | boolean | false | Indicates whether the Bar is partially translucent. It is only applied for touch devices. |
Default Aggregation:
Name | Cardinality | Type | Description |
---|---|---|---|
contentLeft | 0..n | sap.ui.core.Control |
Represents the left content area, usually containing a button or an app icon. If it is overlapped by the right content, its content will disappear and the text will show an ellipsis. |
contentMiddle | 0..n | sap.ui.core.Control |
Represents the middle content area. Controls such as label, segmented buttons or select can be placed here. The content is centrally positioned if there is enough space. If the right or left content overlaps the middle content, the middle content will be centered in the space between the left and the right content. |
contentRight | 0..n | sap.ui.core.Control |
Represents the right content area. Controls such as action buttons or search field can be placed here. |
Name | Cardinality | Type | Description |
---|---|---|---|
ariaLabelledBy | 0..n | sap.ui.core.Control |
Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledby). |
Method | Description |
---|---|
_applyContextClassFor |
Sets classes according to the context of the page. Possible contexts are header, footer and subheader. |
_applyTag |
Sets HTML tag according to the context of the page. Possible contexts are header, footer and subheader. |
addAriaLabelledBy |
Adds some ariaLabelledBy into the association ariaLabelledBy. |
addContentLeft |
Adds some contentLeft to the aggregation contentLeft. |
addContentMiddle |
Adds some contentMiddle to the aggregation contentMiddle. |
addContentRight |
Adds some contentRight to the aggregation contentRight. |
applyTagAndContextClassFor |
Sets classes and HTML tag according to the context of the page. Possible contexts are header, footer and subheader. |
destroyContentLeft |
Destroys all the contentLeft in the aggregation contentLeft. |
destroyContentMiddle |
Destroys all the contentMiddle in the aggregation contentMiddle. |
destroyContentRight |
Destroys all the contentRight in the aggregation contentRight. |
sap.m.Bar.extend |
Creates a new subclass of class sap.m.Bar with name
|
getAriaLabelledBy |
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy. |
getContentLeft |
Gets content of aggregation contentLeft. Represents the left content area, usually containing a button or an app icon. If it is overlapped by the right content, its content will disappear and the text will show an ellipsis. |
getContentMiddle |
Gets content of aggregation contentMiddle. Represents the middle content area. Controls such as label, segmented buttons or select can be placed here. The content is centrally positioned if there is enough space. If the right or left content overlaps the middle content, the middle content will be centered in the space between the left and the right content. |
getContentRight |
Gets content of aggregation contentRight. Represents the right content area. Controls such as action buttons or search field can be placed here. |
getContext |
Gets the available Bar contexts. |
getDesign |
Gets current value of property design. Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed. Default value is |
getEnableFlexBox |
Gets current value of property enableFlexBox. If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space. Default value is
Since 1.16 replaced by <code>contentMiddle</code> aggregation. <code>contentMiddle</code> will always occupy of the 100% width when no <code>contentLeft</code> and <code>contentRight</code> are being set.
|
getHTMLTag |
Gets the HTML tag of the root element. |
sap.m.Bar.getMetadata |
Returns a metadata object for class sap.m.Bar. |
getTitleAlignment |
Gets current value of property titleAlignment. Specifies the Title alignment (theme specific). If set to Default value is |
getTranslucent |
Gets current value of property translucent. Indicates whether the Bar is partially translucent. It is only applied for touch devices. Default value is
Since 1.18.6 This property has no effect since release 1.18.6 and should not be used. Translucent bar may overlay an input and make it difficult to edit.
|
indexOfContentLeft |
Checks for the provided |
indexOfContentMiddle |
Checks for the provided |
indexOfContentRight |
Checks for the provided |
insertContentLeft |
Inserts a contentLeft into the aggregation contentLeft. |
insertContentMiddle |
Inserts a contentMiddle into the aggregation contentMiddle. |
insertContentRight |
Inserts a contentRight into the aggregation contentRight. |
isContextSensitive |
Determines whether the Bar is sensitive to the container context. Implementation of the IBar interface. |
removeAllAriaLabelledBy |
Removes all the controls in the association named ariaLabelledBy. |
removeAllContentLeft |
Removes all the controls from the aggregation contentLeft. Additionally, it unregisters them from the hosting UIArea. |
removeAllContentMiddle |
Removes all the controls from the aggregation contentMiddle. Additionally, it unregisters them from the hosting UIArea. |
removeAllContentRight |
Removes all the controls from the aggregation contentRight. Additionally, it unregisters them from the hosting UIArea. |
removeAriaLabelledBy |
Removes an ariaLabelledBy from the association named ariaLabelledBy. |
removeContentLeft |
Removes a contentLeft from the aggregation contentLeft. |
removeContentMiddle |
Removes a contentMiddle from the aggregation contentMiddle. |
removeContentRight |
Removes a contentRight from the aggregation contentRight. |
setDesign |
Sets a new value for property design. Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed. When called with a value of Default value is |
setEnableFlexBox |
Sets a new value for property enableFlexBox. If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space. When called with a value of Default value is
Since 1.16 replaced by <code>contentMiddle</code> aggregation. <code>contentMiddle</code> will always occupy of the 100% width when no <code>contentLeft</code> and <code>contentRight</code> are being set.
|
setHTMLTag |
Sets the HTML tag of the root element. |
setTitleAlignment |
Sets a new value for property titleAlignment. Specifies the Title alignment (theme specific). If set to When called with a value of Default value is |
setTranslucent |
Sets a new value for property translucent. Indicates whether the Bar is partially translucent. It is only applied for touch devices. When called with a value of Default value is
Since 1.18.6 This property has no effect since release 1.18.6 and should not be used. Translucent bar may overlay an input and make it difficult to edit.
|
Sets classes according to the context of the page. Possible contexts are header, footer and subheader.
Sets HTML tag according to the context of the page. Possible contexts are header, footer and subheader.
Adds some ariaLabelledBy into the association ariaLabelledBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaLabelledBy | sap.ui.core.ID sap.ui.core.Control |
The ariaLabelledBy to add; if empty, nothing is inserted |
Adds some contentLeft to the aggregation contentLeft.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentLeft | sap.ui.core.Control |
The contentLeft to add; if empty, nothing is inserted |
Adds some contentMiddle to the aggregation contentMiddle.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentMiddle | sap.ui.core.Control |
The contentMiddle to add; if empty, nothing is inserted |
Adds some contentRight to the aggregation contentRight.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentRight | sap.ui.core.Control |
The contentRight to add; if empty, nothing is inserted |
Sets classes and HTML tag according to the context of the page. Possible contexts are header, footer and subheader.
Creates a new subclass of class sap.m.Bar with name sClassName
and enriches it with the information contained in oClassInfo
.
oClassInfo
might contain the same kind of information as described in sap.ui.core.Control.extend.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Gets content of aggregation contentLeft.
Represents the left content area, usually containing a button or an app icon. If it is overlapped by the right content, its content will disappear and the text will show an ellipsis.
Gets content of aggregation contentMiddle.
Represents the middle content area. Controls such as label, segmented buttons or select can be placed here. The content is centrally positioned if there is enough space. If the right or left content overlaps the middle content, the middle content will be centered in the space between the left and the right content.
Gets content of aggregation contentRight.
Represents the right content area. Controls such as action buttons or search field can be placed here.
Gets current value of property design.
Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed.
Default value is Auto
.
Gets current value of property enableFlexBox.
If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space.
Default value is false
.
Gets current value of property titleAlignment.
Specifies the Title alignment (theme specific). If set to TitleAlignment.None
, the automatic title alignment depending on the theme settings will be disabled. If set to TitleAlignment.Auto
, the Title will be aligned as it is set in the theme (if not set, the default value is center
); Other possible values are TitleAlignment.Start
(left or right depending on LTR/RTL), and TitleAlignment.Center
(centered)
Default value is None
.
Gets current value of property translucent.
Indicates whether the Bar is partially translucent. It is only applied for touch devices.
Default value is false
.
Checks for the provided sap.ui.core.Control
in the aggregation contentLeft. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentLeft | sap.ui.core.Control |
The contentLeft whose index is looked for |
Checks for the provided sap.ui.core.Control
in the aggregation contentMiddle. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentMiddle | sap.ui.core.Control |
The contentMiddle whose index is looked for |
Checks for the provided sap.ui.core.Control
in the aggregation contentRight. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentRight | sap.ui.core.Control |
The contentRight whose index is looked for |
Inserts a contentLeft into the aggregation contentLeft.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentLeft | sap.ui.core.Control |
The contentLeft to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Inserts a contentMiddle into the aggregation contentMiddle.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentMiddle | sap.ui.core.Control |
The contentMiddle to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Inserts a contentRight into the aggregation contentRight.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContentRight | sap.ui.core.Control |
The contentRight to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Determines whether the Bar is sensitive to the container context.
Implementation of the IBar interface.
Removes all the controls from the aggregation contentLeft.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation contentMiddle.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation contentRight.
Additionally, it unregisters them from the hosting UIArea.
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaLabelledBy | int sap.ui.core.ID sap.ui.core.Control |
The ariaLabelledBy to be removed or its index or ID |
Removes a contentLeft from the aggregation contentLeft.
Param | Type | DefaultValue | Description |
---|---|---|---|
vContentLeft | int string sap.ui.core.Control |
The contentLeft to remove or its index or id |
Removes a contentMiddle from the aggregation contentMiddle.
Param | Type | DefaultValue | Description |
---|---|---|---|
vContentMiddle | int string sap.ui.core.Control |
The contentMiddle to remove or its index or id |
Removes a contentRight from the aggregation contentRight.
Param | Type | DefaultValue | Description |
---|---|---|---|
vContentRight | int string sap.ui.core.Control |
The contentRight to remove or its index or id |
Sets a new value for property design.
Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Auto
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sDesign | sap.m.BarDesign | Auto |
New value for property |
Sets a new value for property enableFlexBox.
If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bEnableFlexBox | boolean | false |
New value for property |
Sets the HTML tag of the root element.
Param | Type | DefaultValue | Description |
---|---|---|---|
sTag | sap.m.IBarHTMLTag |
The HTML tag of the root element |
Sets a new value for property titleAlignment.
Specifies the Title alignment (theme specific). If set to TitleAlignment.None
, the automatic title alignment depending on the theme settings will be disabled. If set to TitleAlignment.Auto
, the Title will be aligned as it is set in the theme (if not set, the default value is center
); Other possible values are TitleAlignment.Start
(left or right depending on LTR/RTL), and TitleAlignment.Center
(centered)
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is None
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sTitleAlignment | sap.m.TitleAlignment | None |
New value for property |
Sets a new value for property translucent.
Indicates whether the Bar is partially translucent. It is only applied for touch devices.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bTranslucent | boolean | false |
New value for property |