diff --git a/en/application-dev/reference/arkui-js/js-components-basic-button.md b/en/application-dev/reference/arkui-js/js-components-basic-button.md index fcd20d610e482f7c58859e9d14702f9b15507be6..29061668cc3ddd2c59a2b057a97bb09970807693 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-button.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-button.md @@ -1,85 +1,82 @@ -# button +# button + +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. The **\ @@ -89,6 +86,9 @@ When the button type is **download**, the following methods are supported. onclick="progress">{{downloadText}} +``` + +```css /* xxx.css */ .div-button { flex-direction: column; @@ -129,7 +129,10 @@ When the button type is **download**, the following methods are supported. text-color: white; background-color: #007dff; } -// xxx.js +``` + +```js +// xxx.js export default { data: { count: 5, @@ -146,4 +149,4 @@ export default { } ``` -![img](figures/1.png) \ No newline at end of file +![1](figures/1.png) diff --git a/en/application-dev/reference/arkui-js/js-components-container-list-item-group.md b/en/application-dev/reference/arkui-js/js-components-container-list-item-group.md index 164b3f207785aa1c65a63a9064c227c968368242..1a9fa13727b5fbd31d257379ede19e045df95cfa 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-list-item-group.md +++ b/en/application-dev/reference/arkui-js/js-components-container-list-item-group.md @@ -1,62 +1,68 @@ # list-item-group -**\** is a child component of **<[list](js-components-container-list.md)>** and is used to group items in a list. By default, the width of **\** is equal to that of **\**. +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + +**\** is a child component of **[\](../arkui-js/js-components-container-list.md)** and is used to group items in a list. By default, the width of **\** is equal to that of **\**. + -- To use this component, you must set the **columns** attribute of the parent component **\** to **1**. Otherwise, **\** is not displayed. -- You can customize the width of each **\**. However, if you retain the default value **stretch** of **align-items** for the parent component **\**, the width of **\** is equal to that of **\**. You can set **align-items** to other values rather than **stretch** to make the customized **\** width take effect. +- To use this component, you must set the **columns** attribute of the parent component **\** to **1**. Otherwise, this component is not displayed. + +- You can customize the width of each **\**. However, if you retain the default value **stretch** of **align-items** for the parent component **\**, the width of **\** is equal to that of **\**. To make the customized **\** width take effect, set **align-items** to other values rather than **stretch**. ## Required Permissions None -## Child Components -Only **<[list-item](js-components-container-list-item.md)>** are supported. +## Child Components -## Attributes +Only the **[\](../arkui-js/js-components-container-list-item.md)** component is supported. -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. +## Attributes +In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. -| Name | Type | Default Value | Mandatory | Description | -| ---- | ------ | ------------- | --------- | ------------------------------------------------------------ | -| type | string | default | No | Type of the list-item-group. A list supports multiple list-item-group types. The same type of list-item-groups should have the same view layout after being rendered. When the type is fixed, replace the **if** attribute with the **show** attribute to ensure that the view layout remains unchanged. | +| Name | Type | Default Value | Mandatory | Description | +| ---- | ------ | ------- | ---- | ---------------------------------------- | +| type | string | default | No | Type of the list item group. A list supports multiple list item group types. The same type of list item groups must have the same view layout after being rendered. If the type is fixed, replace the **if** attribute with the **show** attribute to ensure that the view layout remains unchanged.| -> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** > -> **id** in the common 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. +> **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. -## Styles -In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. +## Styles +In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. +| Name | Type | Default Value | Mandatory | Description | +| --------------- | ------ | ---------- | ---- | ---------------------------------------- | +| flex-direction | string | row | No | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:
- **column**: Items are placed vertically from top to bottom.
- **row**: Items are placed horizontally from left to right.| +| justify-content | string | flex-start | No | How items are aligned along the main axis of the flex container. Available values are as follows:
- **flex-start**: Items are packed toward the start edge of the container along the main axis.
- **flex-end**: Items are packed toward the end edge of the container along the main axis.
- **center**: Items are packed toward the center of the container along the main axis.
- **space-between**: Items are positioned with space between the rows.
- **space-around**: Items are positioned with space before, between, and after the rows.
- **space-evenly**5+: Items are distributed within the container along the main axis, with even space between each two.| -| Name | Type | Default Value | Mandatory | Description | -| --------------- | ------ | ------------- | --------- | ------------------------------------------------------------ | -| flex-direction | string | row | No | Main axis direction of the container. Available values are as follows:
- **column**: Items are placed vertically from top to bottom.
- **row**: Items are placed horizontally from left to right. | -| justify-content | string | flex-start | No | How items are aligned along the main axis of the current row in the container. Available values are as follows:
- **flex-start**: Items are packed towards the start row.
- **flex-end**: Items are packed towards the end row.
- **center**: Items are centered along the row.
- **space-between**: Items are positioned with space between the rows.
- **space-around**: Items are positioned with space before, between, and after the rows.
- **space-evenly**5+: Items are arranged with even space between each two. | ## Events -In addition to the events in [Universal Events](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 | +| ------------- | ---------------------------------- | ---------------------------------------- | +| groupclick | { groupid: string } | Triggered when a group is clicked.
**groupid**: ID of the group that is clicked. | +| groupcollapse | { groupid: string } | Triggered when a group is collapsed.
**groupid**: ID of the group that is collapsed.
If the parameter is not carried or **groupid** is left empty, all groups are collapsed.| +| groupexpand | { groupid: string } | Triggered when a group is expanded.
**groupid**: ID of the group that is expanded.
If the parameter is not carried or **groupid** is left empty, all groups are expanded.| -| Name | Parameter | Description | -| ------------- | ------------------- | ------------------------------------------------------------ | -| groupclick | { groupid: string } | Triggered when a group is clicked.
**groupid**: ID of the group that is clicked. | -| groupcollapse | { groupid: string } | Triggered when a group is collapsed.
**groupid**: ID of the group collapsed.
If the parameter is not carried or **groupid** is left empty, all groups are collapsed. | -| groupexpand | { groupid: string } | Triggered when a group is expanded.
**groupid**: ID of the group expanded.
If the parameter is not carried or **groupid** is left empty, all groups are expanded. | ## Methods -Methods in [Universal Methods](js-components-common-methods.md) are supported. +The [universal methods](../arkui-js/js-components-common-methods.md) are supported. + ## Example -``` +```html
@@ -86,6 +92,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
+``` + +```css /* xxx.css */ .doc-page { flex-direction: column; @@ -111,12 +120,16 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. align-items: center; width:100%; } +``` + +```js // xxx.js import prompt from '@system.prompt'; export default { data: { direction: 'column', - list: [] + list: [], + listAdd: [] }, onInit() { this.list = [] @@ -157,4 +170,4 @@ export default { } ``` -![img](figures/list6.gif) \ No newline at end of file +![list6](figures/list6.gif) diff --git a/en/application-dev/reference/arkui-js/js-components-container-stepper.md b/en/application-dev/reference/arkui-js/js-components-container-stepper.md index 122d71bdefbe7872594ddf692eb637af5a1ec332..6a666a454cd424e1b3daf67fcae1c4a4e08f67a6 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-stepper.md +++ b/en/application-dev/reference/arkui-js/js-components-container-stepper.md @@ -1,60 +1,69 @@ # stepper +> **NOTE** +> +> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. + The **\** component provides a step navigator. When multiple steps are required to complete a task, you can use the **\** component to navigate your users through the whole process. + ## Required Permissions None + ## Child Components Only the **\** component is supported. -> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** Steps in the **\** are sorted according to the sequence of its **\** child components. +> **NOTE** +> +> Steps in the **\** are sorted according to the sequence of its **\** child components. -## Attributes -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. +## Attributes +In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. +| Name | Type | Default Value | Description | +| ----- | ------ | ---- | ------------------------------ | +| index | number | - | Index of the **\** child component that is currently displayed.| -| Name | Type | Default Value | Description | -| ----- | ------ | ------------- | ------------------------------------------------------------ | -| index | number | - | Index of the **\** child component that is currently displayed. | ## Styles -Styles in [Universal Styles](js-components-common-styles.md) are supported. +The [universal styles](../arkui-js/js-components-common-styles.md) are supported. -> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** By default, the **\** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component. +> **NOTE** +> +> By default, the **\** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component. -## Events -In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. +## Events +In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. +| Name | Parameter | Description | +| ------ | ---------------------------------------- | ---------------------------------------- | +| finish | - | Triggered when the last step on the navigator is complete. | +| skip | - | Triggered when users click the skip button, which works only if you have called **setNextButtonStatus** method to allow users to skip all steps.| +| change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step.| +| next | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **\** child component as the next step to go.| +| back | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **\** child component as the previous step.| -| Name | Parameter | Description | -| ------ | -------------------------------------------- | ------------------------------------------------------------ | -| finish | None | Triggered when the last step on the navigator is complete. | -| skip | None | Triggered when users click the skip button, which works only if you have called **setNextButtonStatus** method to allow users to skip all steps. | -| change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step. | -| next | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:** pendingIndex**}** format. You can use **pendingIndex** to specify a **\** child component as the next step to go. | -| back | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:** pendingIndex**}** format. You can use **pendingIndex** to specify a **\** child component as the previous step. | ## Methods -In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. +In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. +| Name | Parameter | Description | +| ------------------- | ---------------------------------------- | ---------------------------------------- | +| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. Available **status** values are as follows:
- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.
- **disabled**: The next button is grayed out and unavailable.
- **waiting**: The next button is not displayed, and a process bar is displayed instead.
- **skip**: The skip button is displayed to allow users to skip all remaining steps.| -| Name | Parameter | Description | -| ------------------- | -------------------------------- | ------------------------------------------------------------ | -| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. Available **status** values are as follows:
- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.
- **disabled**: The next button is grayed out and unavailable.
- **waiting**: The next button is not displayed, and a process bar is displayed instead.
- **skip**: The skip button is displayed to allow users to skip all remaining steps. | - ## Example -``` +```html
@@ -78,6 +87,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
+``` + +```css /* xxx.css */ .container { margin-top: 20px; @@ -86,6 +98,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m height: 300px; } .stepperItem { + width: 100%; flex-direction: column; align-items: center; } @@ -99,6 +112,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m margin-top: 30px; justify-content: center; } +``` + +```js // xxx.js export default { data: { @@ -139,4 +155,4 @@ export default { } ``` -![img](figures/en-us_image_0000001127125114.gif) \ No newline at end of file +![en-us_image_0000001127125114](figures/en-us_image_0000001127125114.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md index a1b70cba60d30f5f5802598a8af9473cf4c4b904..b54b997ad32ffdf73b22d4821b19971dbecbff49 100644 --- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -25,7 +25,7 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P | Name | Type | Mandatory| Description | | ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | src | string \| [Resource](ts-types.md#resource) | No | Path of the video source, which can be a local path or a URL.
The video resources can be stored in the **video** or **rawfile** folder under **resources**.
The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).
**NOTE**
The supported video formats are MP4, MKV, WebM, and TS. | -| currentProgressRate | number \| string \| PlaybackSpeed8+ | No | Video playback speed.
**NOTE**
The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.
Default value: **1.0** \| PlaybackSpeed.Speed_Forward_1_00_X | +| currentProgressRate | number \| PlaybackSpeed8+ | No | Video playback speed.
**NOTE**
The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.
Default value: **1.0** \| PlaybackSpeed.Speed_Forward_1_00_X | | previewUri | string \| PixelMap8+ \| [Resource](ts-types.md#resource) | No | Path of the preview image. | | controller | [VideoController](#videocontroller) | No | Controller. | @@ -181,7 +181,7 @@ struct VideoCreateComponent { console.error('onFinish'); }) .onError(() => { - console.error('onFinish'); + console.error('onError'); }) .onPrepared((e) => { console.error('onPrepared is ' + e.duration); diff --git a/en/application-dev/ui/ui-js-components-button.md b/en/application-dev/ui/ui-js-components-button.md index 2a639b7f240f9da2d8651778104599e3856f2a41..b543a415b84bbfb56248be1249d7bb5aeceda799 100644 --- a/en/application-dev/ui/ui-js-components-button.md +++ b/en/application-dev/ui/ui-js-components-button.md @@ -1,23 +1,20 @@ -# <button> Development +# \ ``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -34,11 +31,10 @@ Create a **<button>** component in the .hml file under **pages/index**. ## Setting the Button Type -Set the **type** attribute of the **<input>** component to **button**, **date**, or any of the supported values. - +Set the **type** attribute of the **\ @@ -47,8 +43,7 @@ Set the **type** attribute of the **<input>** component to **button**, **d ``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -78,20 +73,14 @@ Set the **type** attribute of the **<input>** component to **button**, **d ![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> - For capsule buttons, border-related styles are not supported. -> -> - For circle buttons, text-related styles are not supported. +> **NOTE** > -> - For text buttons, the text size is adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent. -> -> - If the icon used by the **<button>** component is from the cloud, you must declare the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder. +>If the icon used by the **\ ``` - -``` +```css /* xxx.css */ .container { + width: 100%; + height: 100%; background-color: #F1F3F5; flex-direction: column; align-items: center; @@ -130,8 +119,7 @@ Add the **progress** method to the **<button>** component to display the d } ``` - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -141,7 +129,7 @@ export default { isPaused: true, intervalId : null, }, - star(){ + start(){ this.intervalId = setInterval(()=>{ if(this.percent <100){ this.percent += 1; @@ -166,7 +154,7 @@ export default { prompt.showToast({ message: "Started Downloading" }) - this.star(); + this.start(); this.isPaused = false; }else{ prompt.showToast({ @@ -181,7 +169,7 @@ export default { ![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > > The **setProgress** method supports only buttons of the download type. @@ -191,8 +179,7 @@ export default { Switch between the button types for different types of text. - -``` +```html
@@ -210,8 +197,7 @@ Switch between the button types for different types of text. ``` - -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -258,8 +244,7 @@ Switch between the button types for different types of text. ``` - -``` +```js // xxx.js export default { data: { diff --git a/en/application-dev/ui/ui-js-components-images.md b/en/application-dev/ui/ui-js-components-images.md index f2cc2bb3c98fe689b577768efd4437ec04a847d4..59f475f3aa30e4b5a8a493652763af5d058090b1 100644 --- a/en/application-dev/ui/ui-js-components-images.md +++ b/en/application-dev/ui/ui-js-components-images.md @@ -1,22 +1,19 @@ -# <image> Development +# \ Development +The **\** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md). -The **<image>** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md). +## Creating an \ Component -## Creating an <image> Component - - Create an **<image>** component in the .hml file under **pages/index**. - -``` +Create an **\** component in the .hml file under **pages/index**. +```html
``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -33,11 +30,10 @@ The **<image>** component is used to render and display images. For detail ## Setting the Image Style -Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image. - +Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of the image. -``` +```html
@@ -45,8 +41,7 @@ Set the **width**, **height**, and **object-fit** attributes to define the width ``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -63,21 +58,18 @@ image{ border-radius: 20px; object-fit: contain; match-text-direction:true; - } ``` - ![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png) -## Loading Images - -When an image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure is printed. +## Loading the Image +When the image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure log is printed. -``` +```html
@@ -89,8 +81,7 @@ When an image is successfully loaded, the **complete** event is triggered, and t
``` - -``` +```css /* xxx.css */ .container{ width: 100%; @@ -108,14 +99,13 @@ When an image is successfully loaded, the **complete** event is triggered, and t } ``` - -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { imageComplete(i,e){ prompt.showToast({ - message: "Image "+i+"'s width"+ e.width+"----Image "+i+"'s height"+e.height, + message: "image "+i+"'s width"+ e.width+"----image "+i+"'s height"+e.height, duration: 3000, }) }, @@ -130,19 +120,19 @@ export default { } ``` -![en-us_image_images.gif ](figures/en-us_image_images.gif ) +![en-us_image_images](figures/en-us_image_images.gif) + ## Example Scenario In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**. - -``` +```html
- +
Touch and hold the image @@ -151,8 +141,7 @@ In this example you touch and hold an image to gradually hide it. After the imag
``` - -``` +```css /* xxx.css */ .page-container { width: 100%; @@ -186,9 +175,8 @@ In this example you touch and hold an image to gradually hide it. After the imag } ``` - -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { data: { diff --git a/en/application-dev/ui/ui-js-components-picker.md b/en/application-dev/ui/ui-js-components-picker.md index 002a9d1b078fc7748d3033a7a770db420a9a820f..b02c44441493d6b11eb508e1f96a490804288f99 100644 --- a/en/application-dev/ui/ui-js-components-picker.md +++ b/en/application-dev/ui/ui-js-components-picker.md @@ -1,29 +1,24 @@ -# <picker> Development +# \ Development +The **\** component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md). -The **<picker>** component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md). +## Creating a \ Component -## Creating a <picker> Component +Create a **\** component in the .hml file under **pages/index**. -Create a **<picker>** component in the .hml file under **pages/index**. - - -``` - +```html +
- - picker - -
+ picker +
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; - height: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -36,20 +31,18 @@ Create a **<picker>** component in the .hml file under **pages/index**. ## Setting the Picker Type -Set the **type** attribute of the **<picker>** component. For example, set it to **date**. - +Set the **type** attribute of the **\** component. For example, set it to **date**. -``` - +```html +
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -63,8 +56,7 @@ Set the **type** attribute of the **<picker>** component. For example, set } ``` - -``` +```js // xxx.js export default { data: { @@ -77,27 +69,25 @@ export default { ![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** -> - When setting the value range of a common selector, you must use the data binding mode. +> **NOTE** > +> When setting the value range of a common selector, you must use the data binding mode. ## Setting the Time Format -Set the **hours** attribute to specify the time format used by the time selector. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively. - +Set the **hours** attribute to specify the time format used by the time picker. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively. -``` - +```html +
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -115,7 +105,7 @@ Set the **hours** attribute to specify the time format used by the time selector ![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** > - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m. > > - When **hours** is set to **24**, the time is displayed in 24-hour format. @@ -123,20 +113,18 @@ Set the **hours** attribute to specify the time format used by the time selector ## Adding Response Events -To confirm and cancel selection, add **change** and **cancel** events. +Add the **change** event to confirm selection and the **cancel** event to cancel selection. - -``` - +```html +
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -154,8 +142,7 @@ To confirm and cancel selection, add **change** and **cancel** events. } ``` - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -180,12 +167,11 @@ export default { ## Example Scenario -Implement a health check-in application by using the **<picker>** component. - +Implement a health check-in application by using the **\** component. -``` - +```html +
Health check-in
@@ -215,9 +201,8 @@ Implement a health check-in application by using the **<picker>** componen ``` - -``` -/* index.css */ +```css +/* xxx.css */ .doc-page { flex-direction: column; background-color: #F1F3F5; @@ -259,8 +244,7 @@ Implement a health check-in application by using the **<picker>** componen ``` - -``` +```js // xxx.js import pmt from '@system.prompt' export default {