Users can use the ui5-segmented-button-item as part of a ui5-segmented-button.
Clicking or tapping on a ui5-segmented-button-item changes its state to selected.
The item returns to its initial state when the user clicks or taps on it again.
By applying additional custom CSS-styling classes, apps can give a different style to any
ui5-segmented-button-item.
ES6 Module Import
import "@ui5/webcomponents/dist/SegmentedButtonItem.js";
Properties
accessibleDescription
| Description | Defines the accessible description of the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 2.15.0 |
accessibleDescriptionRef
| Description | Defines the IDs of the HTML Elements that describe the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 2.15.0 |
accessibleName
| Description | Defines the accessible ARIA name of the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.0.0-rc.15 |
accessibleNameRef
| Description | Receives id(or many ids) of the elements that label the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.1.0 |
disabled
| Description | Defines whether the component is disabled. A disabled component can't be selected or focused, and it is not in the tab chain. |
| Type | boolean |
| Default | false |
icon
| Description | Defines the icon, displayed as graphical element within the component. The SAP-icons font provides numerous options.
Example: See all the available icons within the Icon Explorer. |
| Type | string | undefined |
| Default | undefined |
selected
| Description | Determines whether the component is displayed as selected. |
| Type | boolean |
| Default | false |
| Description | Defines the tooltip of the component.
Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.2.0 |
Slots
default
| Description | Defines the text of the component.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. |
| Type | Array<Node> |
Events
click
| Description | Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
Note: The event will not be fired if the disabled property is set to true. |
| Type | CustomEvent<SegmentedButtonItemClickEventDetail> |
| Parameters | altKey: boolean
Returns whether the "ALT" key was pressed when the event was triggered.
ctrlKey: boolean
Returns whether the "CTRL" key was pressed when the event was triggered.
metaKey: boolean
Returns whether the "META" key was pressed when the event was triggered.
shiftKey: boolean
Returns whether the "SHIFT" key was pressed when the event was triggered. |
| Since | 2.22.0 |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.
CSS Custom States
No CSS custom states available for this component.