| type | string | - | No | Button type. The value cannot be dynamically updated. If this attribute is not set, a capsule-like button is displayed. Different from the capsule button, the capsule-like button allows its corners to be configured using **border-radius**. Available button types are as follows:<br>- **capsule**: capsule button with fillets, background color, and text.<br>- **circle**: circle button that can accommodate icons.<br>- **text**: text button, which displays only text.<br>- **arc**: arc button. This value is applicable to wearables only.<br>- **download**: download button, with an extra download progress bar.|
| type | string | - | No | Button type. The value cannot be dynamically updated. If this attribute is not set, a capsule-like button is displayed. Unlike the capsule button, the capsule-like button allows its corners to be configured using **border-radius**. Available button types are as follows:<br>- **capsule**: capsule button with fillets, background color, and text.<br>- **circle**: circle button that can accommodate icons.<br>- **text**: text button, which displays only text.<br>- **arc**: arc button. This value is applicable to wearables only.<br>- **download**: download button, with an extra download progress bar.|
| value | string | - | No | Text value of the button. |
| icon | string | - | No | Path of the button icon. The supported icon formats are JPG, PNG, and SVG. |
| placement<sup>5+</sup> | string | end | No | Position of the button icon in text. This attribute is valid only when **type** is not set. Available values are as follows:<br>- **start**: The button icon is at the beginning of the text.<br>- **end**: The button icon is at the end of the text.<br>- **top**: The button icon is at the top of the text.<br>- **bottom**: The button icon is at the bottom of the text.|
...
...
@@ -34,27 +34,20 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| Name | Type | Default Value | Mandatory | Description |
| text-color | <color> | \#007dff<br>| No | Text color of the button. |
| font-size | <length> | 16px<br> | No | Font size of the button. |
| text-color | <color> | \#007dff| No | Text color of the button. |
| font-size | <length> | 16px | No | Font size of the button. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style | string | normal | No | Font style of the button. |
| font-weight | number \| string | normal | No | Font weight of the button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md#styles).|
| font-family | <string> | sans-serif | No | Font family, 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 font specified by [Custom Font Styles](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| font-weight | number\|string | normal | No | Font weight of the button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md#styles).|
| font-family | <string> | sans-serif | No | Font family, 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. |
| icon-width | <length> | - | No | Width of the internal icon of a circle button. The entire circle button is filled by default.<br>This style must be set when the icon uses the SVG image.|
| icon-height | <length> | - | No | Height of the internal icon of a circle button. The entire circle button is filled by default.<br>This style must be set when the icon uses the SVG image.|
| radius | <length> | - | No | Corner radius of the button. For a circle button, this style takes precedence over **width** and **height** in the universal styles.|
> **NOTE**
> - For capsule buttons, border-related styles are not supported.
>
> - For circle buttons, text-related styles are not supported.
>
> - For text buttons, the font size is automatically adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent.
### When the Button Type Is arc
In addition to the **background-color**, **opacity**, **display**, **visibility**, **position**, **[left|top|right|bottom]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
In addition to the **background-color**, **opacity**, **display**, **visibility**, **position**, and **[left|top|right|bottom]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
@@ -62,8 +55,8 @@ In addition to the **background-color**, **opacity**, **display**, **visibility*
| font-size | <length> | 37.5px | No | Font size of the arc button. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings. |
| font-style | string | normal | No | Font style of the arc button. |
| font-weight | number \| string | normal | No | Font weight of the arc button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md#styles).|
| font-family | <string> | sans-serif | No | Font family, 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 font specified by [Custom Font Styles](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| font-weight | number\|string | normal | No | Font weight of the arc button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md#styles).|
| font-family | <string> | sans-serif | No | Font family, 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
...
...
@@ -79,7 +72,7 @@ When the button type is **download**, the following methods are supported.
| setProgress | { progress:percent } | Progress bar of the download button. The value ranges from 0 to 100. The progress bar is displayed if the value is greater than 0. If the value is greater than or equal to 100, the progress bar is not displayed.<br>The text displayed on the progress bar is subject to the **value** settings.|
| setProgress | { progress:percent } | Progress bar of the download button. The value ranges from 0 to 100. The progress bar is displayed if the value is greater than 0. If the value is greater than or equal to 100, the progress bar is not displayed.<br>The text displayed on the progress bar is subject to the **value** settings.|
**<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 **<list-item-group\>** is equal to that of **<list\>**.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
- To use this component, you must set the **columns** attribute of the parent component **<list\>** to **1**. Otherwise, **<list-item-group\>** is not displayed.
- You can customize the width of each **<list-item-group\>**. However, if you retain the default value **stretch** of **align-items** for the parent component **<list\>**, the width of **<list-item-group\>** is equal to that of **<list\>**. You can set **align-items** to other values rather than **stretch** to make the customized **<list-item-group\>** width take effect.
**\<list-item-group>** is a child component of **[\<list>](../arkui-js/js-components-container-list.md)** and is used to group items in a list. By default, the width of **\<list-item-group>** is equal to that of **\<list>**.
- To use this component, you must set the **columns** attribute of the parent component **\<list>** to **1**. Otherwise, this component is not displayed.
- You can customize the width of each **\<list-item-group>**. However, if you retain the default value **stretch** of **align-items** for the parent component **\<list>**, the width of **\<list-item-group>** is equal to that of **\<list>**. To make the customized **\<list-item-group>** width take effect, set **align-items** to other values rather than **stretch**.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p139402451361"><aname="p139402451361"></a><aname="p139402451361"></a>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 <strongid="b263714289617"><aname="b263714289617"></a><aname="b263714289617"></a>if</strong> attribute with the <strongid="b5356231164"><aname="b5356231164"></a><aname="b5356231164"></a>show</strong> attribute to ensure that the view layout remains unchanged.</p>
>- **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.
## Styles<a name="section16337145611017"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p17906191012103"><aname="p17906191012103"></a><aname="p17906191012103"></a>Main axis direction of the container. Available values are as follows:</p>
<aname="ul19906161071012"></a><aname="ul19906161071012"></a><ulid="ul19906161071012"><li><strongid="b166702410642221"><aname="b166702410642221"></a><aname="b166702410642221"></a>column</strong>: Items are placed vertically from top to bottom.</li><li><strongid="b45570924842221"><aname="b45570924842221"></a><aname="b45570924842221"></a>row</strong>: Items are placed horizontally from left to right.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p5907171091012"><aname="p5907171091012"></a><aname="p5907171091012"></a>How items are aligned along the main axis of the current row in the container. Available values are as follows:</p>
<aname="ul39078107107"></a><aname="ul39078107107"></a><ulid="ul39078107107"><li><strongid="b38994401942221"><aname="b38994401942221"></a><aname="b38994401942221"></a>flex-start</strong>: Items are packed towards the start row.</li><li><strongid="b37986692242221"><aname="b37986692242221"></a><aname="b37986692242221"></a>flex-end</strong>: Items are packed towards the end row.</li><li><strongid="b156136190042221"><aname="b156136190042221"></a><aname="b156136190042221"></a>center</strong>: Items are centered along the row.</li><li><strongid="b42407860542221"><aname="b42407860542221"></a><aname="b42407860542221"></a>space-between</strong>: Items are positioned with space between the rows.</li><li><strongid="b182089689442221"><aname="b182089689442221"></a><aname="b182089689442221"></a>space-around</strong>: Items are positioned with space before, between, and after the rows.</li><li><strongid="b1452413538376"><aname="b1452413538376"></a><aname="b1452413538376"></a>space-evenly</strong><supid="sup109071710111017"><aname="sup109071710111017"></a><aname="sup109071710111017"></a>5+</sup>: Items are arranged with even space between each two.</li></ul>
</td>
</tr>
</tbody>
</table>
## Events<a name="section1052914819116"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="50.935093509350935%"headers="mcps1.1.4.1.3 "><pid="p65301486113"><aname="p65301486113"></a><aname="p65301486113"></a>Triggered when a group is clicked.</p>
<pid="p9530128111113"><aname="p9530128111113"></a><aname="p9530128111113"></a><strongid="b6723111191819"><aname="b6723111191819"></a><aname="b6723111191819"></a>groupid</strong>: ID of the group that is clicked.</p>
<tdclass="cellrowborder"valign="top"width="50.935093509350935%"headers="mcps1.1.4.1.3 "><pid="p65305861116"><aname="p65305861116"></a><aname="p65305861116"></a>Triggered when a group is collapsed.</p>
<pid="p1353016817113"><aname="p1353016817113"></a><aname="p1353016817113"></a><strongid="b171612547175"><aname="b171612547175"></a><aname="b171612547175"></a>groupid</strong>: ID of the group collapsed.</p>
<pid="p11530168201111"><aname="p11530168201111"></a><aname="p11530168201111"></a>If the parameter is not carried or <strongid="b033817189188"><aname="b033817189188"></a><aname="b033817189188"></a>groupid</strong> is left empty, all groups are collapsed.</p>
<tdclass="cellrowborder"valign="top"width="50.935093509350935%"headers="mcps1.1.4.1.3 "><pid="p175301087114"><aname="p175301087114"></a><aname="p175301087114"></a>Triggered when a group is expanded.</p>
<pid="p1653058181112"><aname="p1653058181112"></a><aname="p1653058181112"></a><strongid="b2662173016182"><aname="b2662173016182"></a><aname="b2662173016182"></a>groupid</strong>: ID of the group expanded.</p>
<pid="p1653078131118"><aname="p1653078131118"></a><aname="p1653078131118"></a>If the parameter is not carried or <strongid="b16727027389"><aname="b16727027389"></a><aname="b16727027389"></a>groupid</strong> is left empty, all groups are expanded.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section1159816598218"></a>
```
## Child Components
Only the [\<list-item>](../arkui-js/js-components-container-list-item.md) child component is 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 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.|
> **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.
## 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:<br>- **column**: Items are placed vertically from top to bottom.<br>- **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:<br>- **flex-start**: Items are packed toward the start edge of the container along the main axis.<br>- **flex-end**: Items are packed toward the end edge of the container along the main axis.<br>- **center**: Items are packed toward the center of the container along the main axis.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.<br>- **space-evenly**<sup>5+</sup>: Items are distributed within the container along the main axis, with even space between each two.|
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| 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.|
| groupexpand | { groupid: string } | Triggered when a group is expanded.<br>**groupid**: ID of the group that is expanded.<br>If the parameter is not carried or **groupid** is left empty, all groups are expanded.|
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example
```html
<!-- xxx.hml -->
<divclass="doc-page">
<liststyle="width: 100%;"id="mylist">
...
...
@@ -171,7 +94,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
</div>
```
```
```css
/* xxx.css */
.doc-page{
flex-direction:column;
...
...
@@ -199,13 +122,14 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
The **\<stepper>** component provides a step navigator. When multiple steps are required to complete a task, you can use the **\<stepper>** component to navigate your users through the whole process.
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<stepper>** component provides a step navigator. When multiple steps are required to complete a task, you can use the **\<stepper>** component to navigate your users through the whole process.
## Required Permissions
...
...
@@ -98,6 +98,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
| src | string \|[Resource](ts-types.md#resource) | No | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>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).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
| src | string \|[Resource](ts-types.md) | No | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>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).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: **1.0**\| PlaybackSpeed.Speed_Forward_1_00_X |
| previewUri | string \| PixelMap<sup>8+</sup>\|[Resource](ts-types.md#resource) | No | Path of the preview image. |
| previewUri | string \| PixelMap<sup>8+</sup>\|[Resource](ts-types.md) | No | Path of the preview image. |
| controller | [VideoController](#videocontroller) | No | Controller. |
The **\<button>** component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md).
The **<button>** component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md).
## Creating a \<button> Component
## Creating a <button> Component
Create a **<button>** component in the .hml file under **pages/index**.
Create a **\<button>** component in the .hml file under **pages/index**.
```html
<!-- xxx.hml -->
...
...
@@ -32,7 +31,7 @@ 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 **\<button>** component to **circle**, **text**, or any other supported value.
```html
...
...
@@ -75,19 +74,13 @@ Set the **type** attribute of the **<input>** component to **button**, **d
> **NOTE**
> - For capsule buttons, border-related styles are not supported.
>
> - For circle buttons, text-related styles are not supported.
>
> - 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 **\<button>** component is from the cloud, you must declare the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder.
Sample code for declaring the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder:
```
<!-- config.json -->
"module": {
...
...
@@ -100,7 +93,7 @@ Sample code for declaring the **ohos.permission.INTERNET** permission in the **c
## Showing the Download Progress
Add the **progress** method to the **<button>** component to display the download progress in real time.
Add the **progress** method to the **\<button>** component to display the download progress in real time.
The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
The **\<form>** component allows the content in [\<Input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
> **NOTE**
>
> This component is supported since API version 6.
> The APIs of this module are supported since API version 6.
## Creating a <form> Component
Create a **<form>** component in the .hml file under **pages/index**.
## Creating a \<form> Component
Create a **\<form>** component in the .hml file under **pages/index**.
```html
<!-- xxx.hml -->
<divclass="container">
...
...
@@ -39,8 +37,7 @@ Create a **<form>** component in the .hml file under **pages/index**.
## Zooming In or Out on a Form
To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **<form>** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **\<form>** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
```html
<!-- xxx.hml -->
<divclass="container">
...
...
@@ -51,7 +48,7 @@ To implement the zoom effect after a form is clicked, add the **click-effect** a
```
## Setting Form Styles
## Setting the Form Style
Add the **background-color** and **border** attributes.
...
...
@@ -147,14 +144,14 @@ export default{
Select an option and submit or reset the form data.
Create [<input>](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **<form>** component to submit and reset the form data.
Create two [\<Input>](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **\<form>** component to submit and reset the form data, respectively.
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.
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.
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**.
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).
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 \<picker> Component
## Creating a <picker> Component
Create a **<picker>** component in the .hml file under **pages/index**.
Create a **\<picker>** component in the .hml file under **pages/index**.
```html
<!-- xxx.hml -->
<divclass="container">
<picker> picker </picker>
<div>
</div>
```
```css
...
...
@@ -32,7 +31,7 @@ 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 **\<picker>** component. For example, set it to **date**.
>When setting the value range of a common selector, you must use the data binding mode.
>
>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
<!-- xxx.hml -->
...
...
@@ -115,7 +113,7 @@ 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
<!-- xxx.hml -->
...
...
@@ -169,7 +167,7 @@ export default {
## Example Scenario
Implement a health check-in application by using the **<picker>** component.
Implement a health check-in application by using the **\<picker>** component.
