123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- ---
- title: ListSelect
- order: 17
- layout: page
- ---
-
- [[components.listselect]]
- = [classname]#ListSelect#
-
- ifdef::web[]
- [.sampler]
- image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-select"]
- endif::web[]
-
- The [classname]#ListSelect# component is list box that shows the selectable
- items in a vertical list. If the number of items exceeds the height of the
- component, a scrollbar is shown. The component allows both single and multiple
- selection modes, which you can set with [methodname]#setMultiSelect()#. It is
- visually identical in both modes.
-
-
- [source, java]
- ----
- // Create the selection component
- ListSelect select = new ListSelect("The List");
-
- // Add some items (here by the item ID as the caption)
- select.addItems("Mercury", "Venus", "Earth", ...);
-
- select.setNullSelectionAllowed(false);
-
- // Show 5 items and a scrollbar if there are more
- select.setRows(5);
- ----
-
- The number of visible items is set with [methodname]#setRows()#.
-
- [[figure.components.listselect.basic]]
- .The [classname]#ListSelect# Component
- image::img/listselect-basic.png[width=35%, scaledwidth=50%]
-
- Common selection component features are described in
- <<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
-
- == CSS Style Rules
-
-
- [source, css]
- ----
- .v-select {}
- .v-select-select {}
- option {}
- ----
-
- The component has an overall [literal]#++v-select++# style. The native
- [literal]#++<select>++# element has [literal]#++v-select-select++# style. The
- items are represented as [literal]#++<option>++# elements.
|