12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- ---
- title: NativeSelect
- order: 18
- layout: page
- ---
-
- [[components.nativeselect]]
- = [classname]#NativeSelect#
-
- ifdef::web[]
- [.sampler]
- image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/drop-down-menu"]
- endif::web[]
-
- [classname]#NativeSelect# is a selection component allows selecting an item from a
- drop-down list. It is implemented with the native selection input of web browsers, using the HTML [literal]#++<select>++# element.
-
-
- [source, java]
- ----
- // Create the selection component
- NativeSelect<String> select =
- new NativeSelect<>("Native Selection");
-
- // Add some items
- select.setItems("Mercury", "Venus", ...);
- ----
-
- The [methodname]#setColumns()# allows setting the width of the list as
- "columns", which is a measure that depends on the browser.
-
- [[figure.components.nativeselect.basic]]
- .The [classname]#NativeSelect# Component
- image::img/nativeselect-basic.png[width=20%, scaledwidth=35%]
-
- 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 {}
- ----
-
- The component has a [literal]#++v-select++# overall style. The native
- [literal]#++select++# element has [literal]#++v-select-select++# style.
|