Vaadin单选按钮，水平而非垂直堆叠。

Question

我想用一行显示我的单选按钮，例如：◎选项1 ◉选项2

◎选项1 ◉选项2

然而用Vaadin我无法完成这个任务，好像是以下几点。

◎方案1

◉ 选项2

这是我的代码。

final List<String> options = Arrays.asList(new String[] {
                "hebele", "hubele"});
        
        final OptionGroup group = new OptionGroup("", options);
        
        group.setNullSelectionAllowed(false); // user can not 'unselect'
        group.select("hubele"); // select this by default

我怎样才能改变这个？

Answer 1

正如在 瓦丁之书，你必须 定调 来设置自己的 style.css 文件。

然后，您可以覆盖默认的样式，让选项显示在行内，如下所示。

.v-app .v-select-optiongroup .v-select-option {
    display:inline;
}

Answer 2

在Vaadin 7.3版本中，Valo主题支持水平显示。OptionGroup 不写自定义样式。

OptionGroup group = new OptionGroup("", options);
group.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);

Answer 3

我解决了这个问题，如下所示。

RadioButtonGroup<String> radioGroupGtip = new RadioButtonGroup<>();
radioGroupGtip.getStyle().set("white-space","nowrap");