| 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.|
| waiting | boolean | false | No | Waiting status. When this attribute is set to **true**, a loading animation is displayed on the left of the text. This attribute does not work for download buttons.|
| Name | Type | Default Value | Mandatory | Description |
| type | string | - | No | Dynamic modification is not supported. If this attribute is not set, capsule-like buttons are displayed. Different from the capsule button, the four rounded corners of a capsule-like button can be configured using **border-radius**. Available button types are as follows:<br>- **capsule**: a capsule button with fillets, background color, and text <br>- **circle**: a circle button which can be used to place icons <br>- **text**: a text button which displays the text only**arc**: an arc button. This value is applicable to wearables only.<br>- **download**: a download button. The download progress bar is added. |
| 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. |
| placement5+ | 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. |
| waiting | boolean | false | No | Waiting status. When **waiting** is set to **true**, the waiting transition is displayed on the left of the text. This attribute is unavailable for download buttons and wearables. |
## Styles
### When the Button Type Is Not **arc**
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
### When the Button Type Is Not arc
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Triggered when |
| text-color | \<color> | #ff007dff | 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.NOTE: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](../arkui-js/js-components-basic-text.md#section5775351116) component. |
| 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. |
| icon-width | \<length> | - | No | Width of the internal icon of a circle button. The entire circle button is filled by default.NOTE: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.NOTE:This style must be set when the icon uses the SVG image. |
| radius | \<length> | - | No | Button radius. For a circle button, this style takes precedence over **width** and **height** in the common styles. |
> - 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 automatically adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent.
| Name | Type | Default Value | Mandatory | Description |
| 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 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.|
### When the Button Type Is **arc**
In addition to the **background-color**, **opacity**, **display**, **visibility**, **position**, **[left|top****|right|bottom** styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
### When the Button Type Is arc
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 |
| text-color | <color> | \#de0000 | No | Text color of the arc button. |
| 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 specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. |
| Name | Type | Default Value | Mandatory | Triggered when |
| text-color | \<color> | #de0000 | No | Text color of the arc button. |
| 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](js-components-basic-text.md) of the **text** component. |
| 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](js-components-common-customizing-font.md) is used for the text. |
## Events
Events in [Universal Events](js-components-common-events.md) are supported.
The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Methods
Methods in [Universal Methods](js-components-common-methods.md) are supported.
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
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.NOTE:The text displayed on the progress bar is changed based on the value. |
| 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.
**\<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, **\<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.
- 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**.
## Required Permissions
None
## Child Components
Only **<[list-item](js-components-container-list-item.md)>** are supported.
## Child Components
## Attributes
Only the **[\<list-item>](../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.|
> **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:<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.|
| Name | Type | Default Value | Mandatory | Description |
| flex-direction | string | row | No | Main axis direction of 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 current row in the container. Available values are as follows:<br>- **flex-start**: Items are packed towards the start row.<br>- **flex-end**: Items are packed towards the end row.<br>- **center**: Items are centered along the row.<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 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.
| 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.|
| 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 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 expanded.<br>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
<!-- xxx.hml -->
<divclass="doc-page">
<liststyle="width: 100%;"id="mylist">
...
...
@@ -86,6 +92,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
</list-item-group>
</list>
</div>
```
```css
/* xxx.css */
.doc-page{
flex-direction:column;
...
...
@@ -111,12 +120,16 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
> 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
None
## Child Components
Only the **\<stepper-item>** component is supported.
>  **NOTE:** Steps in the **\<stepper>** are sorted according to the sequence of its **\<stepper-item>** child components.
> **NOTE**
>
> Steps in the **\<stepper>** are sorted according to the sequence of its **\<stepper-item>** 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.
| index | number | - | Index of the **\<stepper-item>** 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.
>  **NOTE:** By default, the **\<stepper>** 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 **\<stepper>** 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.
| 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 **\<stepper-item>** 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 **\<stepper-item>** child component as the previous step.|
| 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 **\<stepper-item>** 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 **\<stepper-item>** 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.
| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. Available **status** values are as follows:<br>- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.<br>- **disabled**: The next button is grayed out and unavailable.<br>- **waiting**: The next button is not displayed, and a process bar is displayed instead.<br>- **skip**: The skip button is displayed to allow users to skip all remaining steps.|
| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. Available **status** values are as follows: <br>- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked. <br>- **disabled**: The next button is grayed out and unavailable. <br>- **waiting**: The next button is not displayed, and a process bar is displayed instead. <br>- **skip**: The skip button is displayed to allow users to skip all remaining steps. |
| 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. |
| 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 |
| currentProgressRate | number \| 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. |
| 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**.
> - 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 **\<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": {
...
...
@@ -104,20 +93,20 @@ 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.
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
<!-- index.hml -->
<divclass="container">
<div>
...
...
@@ -89,8 +81,7 @@ When an image is successfully loaded, the **complete** event is triggered, and t
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -108,14 +99,13 @@ When an image is successfully loaded, the **complete** event is triggered, and t
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**.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<divclass="container">
<picker>
picker
</picker>
<div>
<picker> picker </picker>
</div>
```
```
/* 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 **\<picker>** component. For example, set it to **date**.
> - 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.
