ShellBarItem
<ui5-shellbar-item>
The ui5-shellbar-item represents a custom item, that
might be added to the ui5-shellbar.
ES6 Module Import
import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
Properties
icon
| Description | Defines the name of the item's icon. |
| Type | string | undefined |
| Default | undefined |
text
| Description | Defines the item text.
Note: The text is only displayed inside the overflow popover list view. |
| Type | string | undefined |
| Default | undefined |
count
| Description | Defines the count displayed in the top-right corner. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.0.0-rc.6 |
accessibilityAttributes
| Description | Defines additional accessibility attributes on Shellbar Items.
The accessibility attributes support the following values:
- expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: true or false.
- hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
- controls: Identifies the element (or elements) whose contents or presence are controlled by the component. Accepts a lowercase string value, referencing the ID of the element it controls. |
| Type | ShellBarItemAccessibilityAttributes |
| Default | {} |
| Since | 2.9.0 |
Slots
No slots available for this component.
Events
click
| Description | Fired, when the item is pressed. |
| Type | CustomEvent<ShellBarItemClickEventDetail> |
| Parameters | targetRef: HTMLElement
DOM ref of the clicked element |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.