Differences

This shows you the differences between two versions of the page.

--- vaadin_splitbutton [2015/04/15 09:24]
+++ vaadin_splitbutton [2021/04/05 11:23] (current)
@@ Line 1: / Line 1: @@
+====== Vaadin Splitbutton ======
+<note important>This self-made splitbutton composition is not necessary any more. The Vaadin Valo theme supports splitbuttons via the MenuBar component, see [[http://demo.vaadin.com/valo-theme/#!menubars|Vaadin Valo Demo Menu Bars]].</note>
+Bootstrap has such a nice splitbutton UI component. But with some composition you can have a similar component in Vaadin (with the Valo theme) by using the CssLayout and the ''v-component-group'' CSS class.
+<sxh java>
+CssLayout group = new CssLayout();
+group.addStyleName("v-component-group");
+Button save = new Button("save");
+group.addComponent(save);
+ComboBox box = new ComboBox();
+// this puts the icon in the middle of the rest of the combobox
+box.setWidth("45px");
+box.addItem("refresh");
+box.addItem("history");
+box.addItem("coordinates");
+box.setNewItemsAllowed(false);
+box.setTextInputAllowed(false);
+group.addComponent(box);
+</sxh>
+<note tip>Don't miss to reset the value of the combo box after handling the event:
+  box.setValue(null);
+</note>
+{{tag>vaadin java}}