User Tools

Site Tools


vaadin_splitbutton

Vaadin Splitbutton

This self-made splitbutton composition is not necessary any more. The Vaadin Valo theme supports splitbuttons via the MenuBar component, see Vaadin Valo Demo Menu Bars.

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.

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);

Don't miss to reset the value of the combo box after handling the event:

box.setValue(null);

vaadin_splitbutton.txt · Last modified: 2015/04/15 07:24 by mihael