提交 a4c185ec 编写于 作者: E ester.zhou

Update docs (17461)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 e197ecba
# picker-view # picker-view
> **NOTE** > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen. The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen.
...@@ -77,7 +76,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md ...@@ -77,7 +76,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| selected-font-size | &lt;length&gt; | 20px | No | Font size of the selected item. The value is of the length type, in pixels. | | selected-font-size | &lt;length&gt; | 20px | No | Font size of the selected item. The value is of the length type, in pixels. |
| disappear-color<sup>5+</sup> | &lt;color&gt; | \#ffffff | No | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | | disappear-color<sup>5+</sup> | &lt;color&gt; | \#ffffff | No | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. |
| disappear-font-size<sup>5+</sup> | &lt;length&gt; | 14px | No | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | | disappear-font-size<sup>5+</sup> | &lt;length&gt; | 14px | No | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. |
| font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. | | font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
## Events ## Events
...@@ -121,252 +120,232 @@ Not supported ...@@ -121,252 +120,232 @@ Not supported
## Example ## Example
1. Text Selector ### Text Selector
```html
<!-- xxx.hml --> ```html
<div class="container"> <!-- xxx.hml -->
<text class="title"> <div class="container">
Selected value: {{value}} Selected index: {{index}} <text class="title">
</text> Selected value: {{value}} Selected index: {{index}}
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view> </text>
</div> <picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
``` </div>
```
```css
/* xxx.css */ ```css
.container { /* xxx.css */
flex-direction: column; .container {
justify-content: center; flex-direction: column;
align-items: center; justify-content: center;
left: 0px; align-items: center;
top: 0px; width: 100%;
width: 454px; height: 50%;
height: 454px; }
} .title {
.title { font-size: 30px;
font-size: 30px; text-align: center;
text-align: center; margin-top: 50%;
margin-top: 20px; }
} ```
```
```js
```js /* xxx.js */
/* xxx.js */ export default {
export default { data: {
data: { options: ['Option 1','Option 2','Option 3'],
options: ['Option 1','Option 2','Option 3'], value: "Option 1",
value: "Option 1", index: 0
index: 0 },
}, handleChange(data) {
handleChange(data) { this.value = data.newValue;
this.value = data.newValue; this.index = data.newSelected;
this.index = data.newSelected; },
}, }
} ```
``` ![picker-view0](figures/pickerview1.gif)
![](figures/pickerview1.gif)
### Time Selector
2. Time Selector
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
Selected: {{time}} Selected: {{time}}
</text> </text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
left: 0px; width: 100%;
top: 0px; height: 50%;
width: 454px; }
height: 454px; .title {
} font-size: 31px;
.title { text-align: center;
font-size: 30px; margin-top: 50%;
text-align: center; }
} ```
.time-picker {
width: 500px; ```js
height: 400px; /* xxx.js */
margin-top: 20px; export default {
} data: {
``` defaultTime: "",
time: "",
```js },
/* xxx.js */ onInit() {
export default { this.defaultTime = this.now();
data: { },
defaultTime: "", handleChange(data) {
time: "", this.time = this.concat(data.hour, data.minute);
}, },
onInit() { now() {
this.defaultTime = this.now(); const date = new Date();
}, const hours = date.getHours();
handleChange(data) { const minutes = date.getMinutes();
this.time = this.concat(data.hour, data.minute); return this.concat(hours, minutes);
}, },
now() { fill(value) {
const date = new Date(); return (value > 9 ? "" : "0") + value;
const hours = date.getHours(); },
const minutes = date.getMinutes(); concat(hours, minutes) {
return this.concat(hours, minutes); return `${this.fill(hours)}:${this.fill(minutes)}`;
}, },
fill(value) { }
return (value > 9 ? "" : "0") + value; ```
},
concat(hours, minutes) { ![picker-view1](figures/pickerview2.gif)
return `${this.fill(hours)}:${this.fill(minutes)}`;
}, ### Date Selector
}
``` ```html
<!-- xxx.hml -->
![](figures/pickerview2.gif) <div class="container">
<text class="title">
3. Date Selector Selected: {{date}}
```html </text>
<!-- xxx.hml --> <picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
<div class="container"> </div>
<text class="title"> ```
Selected: {{time}}
</text> ```css
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> /* xxx.css */
</div> .container {
``` flex-direction: column;
justify-content: center;
```css align-items: center;
/* xxx.css */ width: 100%;
.container { height: 50%;
flex-direction: column; }
justify-content: center; .title {
align-items: center; font-size: 31px;
left: 0px; text-align: center;
top: 0px; margin-top: 50%;
width: 454px; }
height: 454px; ```
}
.title { ```js
font-size: 30px; /* xxx.js */
text-align: center; export default {
margin-top: 20px; data: {
} date: "",
.date-picker { },
width: 500px; handleChange(data) {
height: 400px; this.date = data.year + "/" + data.month + "/" + data.day + "";
margin-top: 50px; },
} }
``` ```
![picker-view2](figures/pickerview3.gif)
```js
/* xxx.js */ ### Date and Time Selector
export default {
data: { ```html
date: "", <!-- xxx.hml -->
}, <div class="container">
handleChange(data) { <text class="title">
this.date = data.year + "" + data.month + "" + data.day + ""; Selected: {{datetime}}
}, </text>
} <picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
``` </div>
```
4. Date and Time Selector ```css
```html /* xxx.css */
<!-- xxx.hml --> .container {
<div class="container"> flex-direction: column;
<text class="title"> justify-content: center;
Selected: {{datetime}} align-items: center;
</text> width: 100%;
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view> height: 50%;
</div> }
``` .title {
font-size: 31px;
```css text-align: center;
/* xxx.css */ margin-top: 50%;
.container { }
flex-direction: column; ```
justify-content: center;
align-items: center; ```js
left: 0px; /* xxx.js */
top: 0px; export default {
width: 500px; data: {
height: 454px; datetime: "",
} },
.title { handleChange(data) {
font-size: 30px; this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + "";
text-align: center; },
margin-top: 20px; }
} ```
.date-picker { ![picker-view3](figures/pickerview4.gif)
width: 500px;
height: 400px; ### Multi-Column Text Selector
margin-top: 50px;
} ```html
``` <!-- xxx.hml -->
<div class="container">
```js <text class="title">
/* xxx.js */ Selected: {{ value }}
export default { </text>
data: { <picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
datetime: "", </div>
}, ```
handleChange(data) {
this.datetime = data.year + "" + data.month + "" + data.day + "" + data.hour + "" + data.minute + ""; ```css
}, /* xxx.css */
} .container {
``` flex-direction: column;
justify-content: center;
align-items: center;
5. Multi-Column Text Selector width: 100%;
height: 50%;
```html }
<!-- xxx.hml --> .title {
<div class="container"> font-size: 31px;
<text class="title"> text-align: center;
Selected: {{ value }} margin-top: 50%;
</text> }
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view> ```
</div>
``` ```js
/* xxx.js */
```css export default {
/* xxx.css */ data: {
.container { multitext: [
flex-direction: column; [1, 2, 3],
justify-content: center; [4, 5, 6],
align-items: center; [7, 8, 9],
left: 0px; ],
top: 0px; value: ""
width: 500px; },
height: 454px; handleChange(data) {
} this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected;
.title { },
font-size: 30px; }
text-align: center; ```
margin-top: 20px; ![picker-view4](figures/pickerview5.gif)
} \ No newline at end of file
```
```js
/* xxx.js */
export default {
data: {
multitext: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
],
value: ""
},
handleChange(data) {
this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected;
},
}
```
![](figures/pickerview5.gif)
...@@ -76,7 +76,6 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support ...@@ -76,7 +76,6 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
## Example ## Example
1.
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -137,4 +136,4 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support ...@@ -137,4 +136,4 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
``` ```
![en-us_image_0000001167823076](figures/text.png) ![en-us_image_0000001167823076](figures/js-text.png)
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
- Anti-aliasing enabled - Anti-aliasing enabled
![screenshot-8](figures/screenshot-8.png) ![en-us_image_0000001127125162](figures/en-us_image_0000001127125162.png)
## Attributes ## Attributes
...@@ -558,7 +558,7 @@ export default { ...@@ -558,7 +558,7 @@ export default {
} }
``` ```
![smoothoff](figures/smoothoff.png) ![en-us_image_0000001167952236](figures/en-us_image_0000001167952236.png)
...@@ -865,8 +865,8 @@ Moves a drawing path to a target position on the canvas. ...@@ -865,8 +865,8 @@ Moves a drawing path to a target position on the canvas.
| Name | Type | Description | | Name | Type | Description |
| ---- | ------ | --------- | | ---- | ------ | --------- |
| x | number | X-coordinate of the target position.| | x | number | X-coordinate of the target position.<br>Unit: vp|
| y | number | Y-coordinate of the target position.| | y | number | Y-coordinate of the target position.<br>Unit: vp|
**Example** **Example**
```html ```html
...@@ -902,8 +902,8 @@ Connects the current point to a target position using a straight line. ...@@ -902,8 +902,8 @@ Connects the current point to a target position using a straight line.
| Name | Type | Description | | Name | Type | Description |
| ---- | ------ | --------- | | ---- | ------ | --------- |
| x | number | X-coordinate of the target position.| | x | number | X-coordinate of the target position.<br>Unit: vp|
| y | number | Y-coordinate of the target position.| | y | number | Y-coordinate of the target position.<br>Unit: vp|
**Example** **Example**
```html ```html
...@@ -1026,7 +1026,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -1026,7 +1026,7 @@ Draws a cubic bezier curve on the canvas.
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div> </div>
``` ```
...@@ -1204,7 +1204,7 @@ Draws an ellipse in the specified rectangular region on the canvas. ...@@ -1204,7 +1204,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
} }
``` ```
![ellipse](figures/ellipse.png) ![en-us_image_0000001214823665](figures/en-us_image_0000001214823665.png)
### rect ### rect
......
...@@ -31,7 +31,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri ...@@ -31,7 +31,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
> **NOTE** > **NOTE**
> >
> **id** in the universal attributes is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group. > The universal attribute **id** is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group.
## Styles ## Styles
...@@ -48,7 +48,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md ...@@ -48,7 +48,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Name | Description | | Name | Parameter | Description |
| ------------- | ---------------------------------- | ---------------------------------------- | | ------------- | ---------------------------------- | ---------------------------------------- |
| groupclick | { groupid: string } | Triggered when a group is clicked.<br>**groupid**: ID of the group that is clicked. | | groupclick | { groupid: string } | Triggered when a group is clicked.<br>**groupid**: ID of the group that is clicked. |
| groupcollapse | { groupid: string } | Triggered when a group is collapsed.<br>**groupid**: ID of the group that is collapsed.<br>If the parameter is not carried or **groupid** is left empty, all groups are collapsed.| | groupcollapse | { groupid: string } | Triggered when a group is collapsed.<br>**groupid**: ID of the group that is collapsed.<br>If the parameter is not carried or **groupid** is left empty, all groups are collapsed.|
...@@ -124,50 +124,57 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support ...@@ -124,50 +124,57 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import promptAction from '@ohos.promptAction';
export default { export default {
data: { data: {
direction: 'column', direction: 'column',
list: [], list: [],
listAdd: [] listAdd: []
}, },
onInit() { onInit() {
this.list = [] this.list = []
this.listAdd = [] this.listAdd = []
for (var i = 1; i <= 3; i++) { for (var i = 1; i <= 3; i++) {
var dataItem = { var dataItem = {
value: 'GROUP' + i, value: 'GROUP' + i,
}; };
this.list.push(dataItem); this.list.push(dataItem);
}
},
collapseOne(e) {
this.$element('mylist').collapseGroup({
groupid: 'GROUP1'
})
},
expandOne(e) {
this.$element('mylist').expandGroup({
groupid: 'GROUP1'
})
},
collapseAll(e) {
this.$element('mylist').collapseGroup({
groupid: ''
})
},
expandAll(e) {
this.$element('mylist').expandGroup({
groupid: ''
})
},
collapse(e) {
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
promptAction.showToast({
message: 'Open ' + e.groupid
})
} }
},
collapseOne(e) {
this.$element('mylist').collapseGroup({
groupid: 'GROUP1'
})
},
expandOne(e) {
this.$element('mylist').expandGroup({
groupid: 'GROUP1'
})
},
collapseAll(e) {
this.$element('mylist').collapseGroup()
},
expandAll(e) {
this.$element('mylist').expandGroup()
},
collapse(e) {
prompt.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
prompt.showToast({
message: 'Open ' + e.groupid
})
}
} }
``` ```
![list6](figures/list6.gif) ![list6](figures/list6.gif)
...@@ -28,6 +28,8 @@ Creates a date picker in the given date range. ...@@ -28,6 +28,8 @@ Creates a date picker in the given date range.
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| ------| -------------- | -------- | | ------| -------------- | -------- |
| lunar | boolean | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.<br>Default value: **false**| | lunar | boolean | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.<br>Default value: **false**|
...@@ -35,6 +37,8 @@ Creates a date picker in the given date range. ...@@ -35,6 +37,8 @@ Creates a date picker in the given date range.
## Events ## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onChange(callback: (value: DatePickerResult) =&gt; void) | Triggered when a date is selected.| | onChange(callback: (value: DatePickerResult) =&gt; void) | Triggered when a date is selected.|
...@@ -62,7 +66,7 @@ struct DatePickerExample { ...@@ -62,7 +66,7 @@ struct DatePickerExample {
build() { build() {
Column() { Column() {
Button('Switch Calendar') Button('Switch Calendar')
.margin({ top: 30 }) .margin({ top: 30, bottom: 30 })
.onClick(() => { .onClick(() => {
this.isLunar = !this.isLunar this.isLunar = !this.isLunar
}) })
......
...@@ -18,17 +18,18 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) ...@@ -18,17 +18,18 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.| | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
## GestureMode ## GestureMode
| Name| Description|
| -------- | -------- | | Name | Description |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.| | --------- | ---------------------------------------- |
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.| | Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.| | Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
## Events ## Events
| Name| Description| | Name | Description |
| -------- | -------- | | ---------------------------------------- | ------------------------------------ |
| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.| | onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
...@@ -49,6 +50,7 @@ struct GestureGroupExample { ...@@ -49,6 +50,7 @@ struct GestureGroupExample {
build() { build() {
Column() { Column() {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
.fontSize(15)
} }
.translate({ x: this.offsetX, y: this.offsetY, z: 0 }) .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.height(150) .height(150)
......
...@@ -240,7 +240,7 @@ struct FlexExample4 { ...@@ -240,7 +240,7 @@ struct FlexExample4 {
} }
``` ```
![en-us_image_0000001174422904](figures/en-us_image_0000001174422904.jpg) ![en-us_image_0000001174422904](figures/en-us_image_0000001174422904.png)
```ts ```ts
// xxx.ets // xxx.ets
......
...@@ -98,7 +98,7 @@ struct ScrollExample { ...@@ -98,7 +98,7 @@ struct ScrollExample {
.scrollable(ScrollDirection.Vertical) .scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On) .scrollBar(BarState.On)
.scrollBarColor(Color.Gray) .scrollBarColor(Color.Gray)
.scrollBarWidth(30) .scrollBarWidth(10)
.onScroll((xOffset: number, yOffset: number) => { .onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset) console.info(xOffset + ' ' + yOffset)
}) })
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册