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 |
| 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 |
| 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 |
No slots available for this component.
| 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 |
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.