SplitButton with Design
SplitButton with Icons
ui5-split-buttonenables users to trigger actions. It is constructed of two separate actions - default action and arrow action that can be activated by clicking or tapping, or by pressing certain keyboard keys -
Enterfor default action, and
Arrow Upfor arrow action.
ui5-split-buttonconsists two separate buttons:
- for the first one (default action) you can define some
icon, or both. Also, it is possible to define different icon for active state of this button -
- the second one (arrow action) contains only
designfrom a set of predefined types (the same as for ui5-button) that offer different styling to correspond to the triggered action. Both text and arrow actions have the same design.
You can set the
ui5-split-buttonas enabled or disabled. Both parts of an enabled
ui5-split-buttoncan be pressed by clicking or tapping it, or by certain keys, which changes the style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled
ui5-split-buttonappears inactive and any of the two buttons cannot be pressed.
Enter- triggers the default action
Spaceis pressed, releases the default action button without triggering the click event.
Arrow Up, or
F4- triggers the arrow action There are separate events that are fired on activating of
clickfor the first button (default action)
arrow-clickfor the second button (arrow action)
ES6 Module Import
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
The available values are:
Example: See all the available icons in the
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the
slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no
slot attribute, goes the the
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as