12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- ---
- title: ListSelect
- order: 17
- layout: page
- ---
-
- [[components.listselect]]
- = 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 selecting multiple values.
-
-
- [source, java]
- ----
- // Create the selection component
- ListSelect<String> select = new ListSelect<>("The List");
-
- // Add some items
- select.setItems("Mercury", "Venus", "Earth", ...);
-
- // Show 5 items and a scrollbar if there are more
- select.setRows(5);
-
- select.addValueChangeListener(event -> {
- Set<String> selected = event.getNewSelection();
- Notification.show(selected.size() + " items.");
- });
- ----
-
- 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.
|