blob: 116f175af54bb5a922f7b61b9e884d4eee02309b (
plain)
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
|
---
title: NativeSelect
order: 18
layout: page
---
[[components.nativeselect]]
= 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.
|
