#SplitButton

A SplitButton is a button with a main action and an arrow that opens a list of more actions, such as "Save" with "Save as" and "Save all".

<tb:SplitButton name="save" text="Save" choices="Save as,Save all,Export" />

var save = root.Q<SplitButton>("save");
save.Clicked += SaveFile;
save.ItemPicked += item =>
{
    if (item.Text == "Save as") SaveFileAs();
};

For an icon, a detail text, a group or a disabled action, set Items:

save.Items = new List<ChoiceItem>
{
    new ChoiceItem("Save as", "Ctrl+Shift+S"),
    new ChoiceItem("Save all"),
    new ChoiceItem("Export", enabled: false),
};

• A click on the arrow opens the list. A second click on the arrow, a click outside, Escape or a pick closes it.
• With the keyboard or a gamepad: move the focus to the arrow and submit to open the list. Up and Down move the highlight, submit picks, and cancel closes the list. The focus stays on the arrow.
• A click on the main part does the main action and does not open the list.
• A pick does not change the main part. The main action stays the same.
• A disabled item shows dimmed, and the highlight goes past it.
• The list shows in the workspace, so it is not clipped by the window, and it takes the theme.

Tips:

• Make the main part the action that the user needs most. Put the variants in the list.
• For a list of values where the pick stays selected, use a ComboBox or a DropdownField.
• For a colored split button, add a button class to the two parts: save.Query<Button>().ForEach(b => b.AddToClassList(ButtonStyle.PRIMARY_CLASS));

#Styling

To make the list as wide as a long action text needs, and the arrow wider:

.tb-split-button__popup { min-width: 220px; }
.tb-split-button > .tb-split-button__arrow { padding-left: 10px; padding-right: 10px; }