← Back

StyleableOptionGroup

Give style names for your OptionGroup items

Author

Rating

Popularity

<100

StyleableOptionGroup extends the OptionGroup of the core framework by allowing separate style names for each item.

In case you need even more flexibility in your OptionGroup, you might want to check out the FlexibleOptionGroup add-on.

Sample code

StyleableOptionGroup radioButtons = new StyleableOptionGroup();
radioButtons.addItem("item1");
radioButtons.addItem("item2");
radioButtons.addItem("item3");
radioButtons.setItemStyleName("item1", "red");
radioButtons.setItemStyleName("item2", "green");
radioButtons.setItemStyleName("item3", "blue");

.v-select-optiongroup {
    .v-select-option {
        &.red {
            color: desaturate(red, 25%);
        }
        &.green {
            color: desaturate(green, 25%);
        }
        &.blue {
            color: desaturate(blue, 25%);
        }
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

First released version.

Released: 2015-03-04
Maturity: STABLE
License: Apache License 2.0

Compatibility

Framework: Vaadin 7.3+
Browser: N/A

StyleableOptionGroup - Vaadin Add-on Directory

Give style names for your OptionGroup items

StyleableOptionGroup extends the OptionGroup of the core framework by allowing separate style names for each item. In case you need even more flexibility in your OptionGroup, you might want to check out the [FlexibleOptionGroup](https://vaadin.com/addon/flexibleoptiongroup) add-on.

Online Demo
Issue Tracker
Source Code

StyleableOptionGroup version 1.0.0
First released version.

Directory