1# picker-view
2
3The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen.
4
5> **NOTE**
6>
7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12Not supported
13
14
15## Attributes
16
17| Name| Type| Default Value| Mandatory| Description|
18| -------- | -------- | -------- | -------- | -------- |
19| type | string | text | No| Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows:<br>- **text**: text selector.<br>- **time**: time selector.|
20| id | string | - | No| Unique ID of the component.|
21| style | string | - | No| Style declaration of the component.|
22| class | string | - | No| Style class of the component, which is used to refer to a style table.|
23| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
24
25Text selector (**type** is **text**)
26
27| Name| Type| Default Value| Mandatory| Description|
28| -------- | -------- | -------- | -------- | -------- |
29| range | Array | - | No| Value range of the text selector.<br>Use data binding, for example, **range = {{data}}**, to specify the range. Declare the corresponding variable in the JavaScript: **data: ["15", "20", "25"]**.|
30| selected | string | 0 | No| Default value of the text selector. The value is the index of **range**.|
31
32Time selector (**type** is **time**)
33
34| Name| Type| Default Value| Mandatory| Description|
35| -------- | -------- | -------- | -------- | -------- |
36| selected | string | 00:00 | No| Default value of the time selector, in the format of HH:mm.<br>|
37
38
39## Events
40
41Text selector (**type** is **text**)
42
43| Name| Parameter| Description|
44| -------- | -------- | -------- |
45| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is specified for the text selector.|
46
47Time selector (**type** is **time**)
48
49| Name| Parameter| Description|
50| -------- | -------- | -------- |
51| change | { hour: hour, minute: minute} | Triggered when a value is specified for the time selector. |
52
53
54## Styles
55
56| Name| Type| Default Value| Mandatory| Description|
57| -------- | -------- | -------- | -------- | -------- |
58| color | &lt;color&gt; | \#808080      | No| Font color of a candidate item.|
59| font-size | &lt;length&gt; | 30px | No| Font size of a candidate item. The value is of the length type, in pixels.|
60| selected-color | &lt;color&gt; | \#ffffff | No| Font color of the selected item.|
61| selected-font-size | &lt;length&gt; | 38px | No| Font size of the selected item. The value is of the length type, in pixels.|
62| selected-font-family | string | HYQiHei-65S | No| Font type of the selected item.|
63| font-family | string | HYQiHei-65S | No| Font type of an item.|
64| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
65| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
66| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
67| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
68| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
69| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
70| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
71| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
72| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
73| background-color | &lt;color&gt; | - | No| Background color.|
74| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
75| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
76
77
78## Example
79
80
81```html
82<!-- xxx.hml -->
83<div class="container" @swipe="handleSwipe">
84  <text class="title">
85    Selected: {{time}}
86  </text>
87  <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
88</div>
89```
90
91
92```css
93/* xxx.css */
94.container {
95  flex-direction: column;
96  justify-content: center;
97  align-items: center;
98  left: 0px;
99  top: 0px;
100  width: 454px;
101  height: 454px;
102}
103.title {
104  font-size: 30px;
105  text-align: center;
106}
107.time-picker {
108  width: 500px;
109  height: 400px;
110  margin-top: 20px;
111}
112```
113
114
115```js
116/* xxx.js */
117export default {
118  data: {
119    defaultTime: "",
120    time: "",
121  },
122  onInit() {
123    this.defaultTime = this.now();
124  },
125  handleChange(data) {
126    this.time = this.concat(data.hour, data.minute);
127  },
128  now() {
129    const date = new Date();
130    const hours = date.getHours();
131    const minutes = date.getMinutes();
132    return this.concat(hours, minutes);
133  },
134
135  fill(value) {
136    return (value > 9 ? "" : "0") + value;
137  },
138
139  concat(hours, minutes) {
140    return `${this.fill(hours)}:${this.fill(minutes)}`;
141  },
142}
143```
144
145![picker-view](figures/picker-view-lite.png)
146