1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: OptionGroup
order: 19
layout: page
---
[[components.optiongroup]]
= [classname]#OptionGroup#
ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/option-group"]
endif::web[]
[classname]#OptionGroup# is a selection component that allows selection from a
group of radio buttons in single selection mode. In multiple selection mode, the
items show up as check boxes. The common selection component features are
described in
<<dummy/../../../framework/components/components-selection#components.selection,"Selection
Components">>.
[[figure.components.optiongroup]]
.Option Button Group in Single and Multiple Selection Mode
image::img/optiongroup-basic.png[]
Option group is by default in single selection mode. Multiple selection is
enabled with [methodname]#setMultiSelect()#.
[source, java]
----
// A single-select radio button group
OptionGroup single = new OptionGroup("Single Selection");
single.addItems("Single", "Sola", "Yksi");
// A multi-select check box group
OptionGroup multi = new OptionGroup("Multiple Selection");
multi.setMultiSelect(true);
multi.addItems("Many", "Muchos", "Monta");
----
<<figure.components.optiongroup>> shows the [classname]#OptionGroup# in both
single and multiple selection mode.
You can also create check boxes individually using the [classname]#CheckBox#
class, as described in
<<dummy/../../../framework/components/components-checkbox#components.checkbox,"CheckBox">>.
The advantages of the [classname]#OptionGroup# component are that as it
maintains the individual check box objects, you can get an array of the
currently selected items easily, and that you can easily change the appearance
of a single component.
[[components.optiongroup.disabling]]
== Disabling Items
You can disable individual items in an [classname]#OptionGroup# with
[methodname]#setItemEnabled()#. The user can not select or deselect disabled
items in multi-select mode, but in single-select mode the use can change the
selection from a disabled to an enabled item. The selections can be changed
programmatically regardless of whether an item is enabled or disabled. You can
find out whether an item is enabled with [methodname]#isItemEnabled()#.
The [methodname]#setItemEnabled()# identifies the item to be disabled by its
item ID.
[source, java]
----
// Have an option group with some items
OptionGroup group = new OptionGroup("My Disabled Group");
group.addItems("One", "Two", "Three");
// Disable one item by its item ID
group.setItemEnabled("Two", false);
----
The item IDs are also used for the captions in this example. The result is shown
in <<figure.components.optiongroup.disabling>>.
[[figure.components.optiongroup.disabling]]
.[classname]#OptionGroup# with a Disabled Item
image::img/optiongroup-disabling.png[]
Setting an item as disabled turns on the [literal]#++v-disabled++# style for it.
[[components.optiongroup.css]]
== CSS Style Rules
[source, css]
----
.v-select-optiongroup {}
.v-select-option.v-checkbox {}
.v-select-option.v-radiobutton {}
----
The [literal]#++v-select-optiongroup++# is the overall style for the component.
Each check box will have the [literal]#++v-checkbox++# style, borrowed from the
[classname]#CheckBox# component, and each radio button the
[literal]#++v-radiobutton++# style. Both the radio buttons and check boxes will
also have the [literal]#++v-select-option++# style that allows styling
regardless of the option type. Disabled items have additionally the
[literal]#++v-disabled++# style.
[[components.optiongroup.css.horizontal]]
=== Horizontal Layout
The options are normally laid out vertically. You can use horizontal layout by
setting [literal]#++display: inline-block++# for the options. The
[literal]#++nowrap++# setting for the overall element prevents wrapping if there
is not enough horizontal space in the layout, or if the horizontal width is
undefined.
[source, css]
----
/* Lay the options horizontally */
.v-select-optiongroup-horizontal .v-select-option {
display: inline-block;
}
/* Avoid wrapping if the layout is too tight */
.v-select-optiongroup-horizontal {
white-space: nowrap;
}
/* Some extra spacing is needed */
.v-select-optiongroup-horizontal
.v-select-option.v-radiobutton {
padding-right: 10px;
}
----
Use of the above rules requires setting a custom [literal]#++horizontal++# style
name for the component. The result is shown in
<<figure.components.optiongroup.horizontal>>.
[[figure.components.optiongroup.horizontal]]
.Horizontal [classname]#OptionGroup#
image::img/optiongroup-horizontal.png[]
|
