The ui5-product-switch-item web component represents the items displayed in the
ui5-product-switch web component.
Note: ui5-product-switch-item is not supported when used outside of ui5-product-switch.
Keyboard Handling
The ui5-product-switch provides advanced keyboard handling.
When focused, the user can use the following keyboard
shortcuts in order to perform a navigation:
- [Space] / [Enter] or [Return] - Trigger
ui5-click event
ES6 Module Import
import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";
Properties
titleText
| Description | Defines the title of the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.0.0-rc.15 |
subtitleText
| Description | Defines the subtitle of the component. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.0.0-rc.15 |
icon
| Description | Defines the icon to be displayed as a graphical element within the component.
Example:
<ui5-product-switch-item icon="palette">
See all the available icons in the Icon Explorer. |
| Type | string | undefined |
| Default | undefined |
target
| Description | Defines a target where the targetSrc content must be open.
Available options are:
- _self
- _top
- _blank
- _parent
- _search
Note: By default target will be open in the same frame as it was clicked. |
| Type | string | undefined |
| Default | undefined |
targetSrc
| Description | Defines the component target URI. Supports standard hyperlink behavior. |
| Type | string | undefined |
| Default | undefined |
Slots
image
| Description | Defines an image to be displayed instead of the standard icon.
Note: The image slot takes precedence over the icon property. Note: We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment. |
| Type | Array<HTMLElement> |
| Since | 2.14.0 |
Events
click
| Description | Fired when the ui5-product-switch-item is activated either with a click/tap or by using the Enter or Space key. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
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.