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

Update docs (9759)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 cad2d2b2
......@@ -18,7 +18,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| Name | Type | Default Value | Mandatory | Description |
| ---------------------- | ------- | ----- | ---- | ---------------------------------------- |
| 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 | &lt;color&gt; | \#007dff<br>| No | Text color of the button. |
| font-size | &lt;length&gt; | 16px<br> | No | Font size of the button. |
| text-color | &lt;color&gt; | \#007dff | No | Text color of the button. |
| font-size | &lt;length&gt; | 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&nbsp;\|&nbsp;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 | &lt;string&gt; | 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 | &lt;string&gt; | 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 | &lt;length&gt; | - | 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 | &lt;length&gt; | - | 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 | &lt;length&gt; | - | 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 | &lt;length&gt; | 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&nbsp;\|&nbsp;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 | &lt;string&gt; | 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 | &lt;string&gt; | 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.
| Name | Parameters | Description |
| ----------- | ------------------------------ | ---------------------------------------- |
| setProgress | {&nbsp;progress:percent&nbsp;} | 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.|
## Example
......
# list-item-group<a name="EN-US_TOPIC_0000001127284878"></a>
# list-item-group
**<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>**.
## Required Permissions<a name="section11257113618419"></a>
- 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<a name="section9288143101012"></a>
Only **<[list-item](js-components-container-list-item.md)\>** are supported.
## Attributes<a name="section2907183951110"></a>
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
<a name="table20633101642315"></a>
<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="aa872998ac2d84843a3c5161889afffef"><a name="aa872998ac2d84843a3c5161889afffef"></a><a name="aa872998ac2d84843a3c5161889afffef"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="ab2111648ee0e4f6d881be8954e7acaab"><a name="ab2111648ee0e4f6d881be8954e7acaab"></a><a name="ab2111648ee0e4f6d881be8954e7acaab"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="ab377d1c90900478ea4ecab51e9a058af"><a name="ab377d1c90900478ea4ecab51e9a058af"></a><a name="ab377d1c90900478ea4ecab51e9a058af"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="a1d574a0044ed42ec8a2603bc82734232"><a name="a1d574a0044ed42ec8a2603bc82734232"></a><a name="a1d574a0044ed42ec8a2603bc82734232"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row527211401068"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p6939184510610"><a name="p6939184510610"></a><a name="p6939184510610"></a>type</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p69393453620"><a name="p69393453620"></a><a name="p69393453620"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p193911451767"><a name="p193911451767"></a><a name="p193911451767"></a>default</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p119391458611"><a name="p119391458611"></a><a name="p119391458611"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p139402451361"><a name="p139402451361"></a><a name="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 <strong id="b263714289617"><a name="b263714289617"></a><a name="b263714289617"></a>if</strong> attribute with the <strong id="b5356231164"><a name="b5356231164"></a><a name="b5356231164"></a>show</strong> attribute to ensure that the view layout remains unchanged.</p>
</td>
</tr>
</tbody>
</table>
>![](../../public_sys-resources/icon-note.gif) **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.
## Styles<a name="section16337145611017"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<a name="table9906310171012"></a>
<table><thead align="left"><tr id="row6906101041013"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="p1890611016103"><a name="p1890611016103"></a><a name="p1890611016103"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="p1990610101108"><a name="p1990610101108"></a><a name="p1990610101108"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="p159061109106"><a name="p159061109106"></a><a name="p159061109106"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="p7906810181014"><a name="p7906810181014"></a><a name="p7906810181014"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="p109068103102"><a name="p109068103102"></a><a name="p109068103102"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1490613102106"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p7906161013101"><a name="p7906161013101"></a><a name="p7906161013101"></a>flex-direction</p>
</td>
<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="p7906161061013"><a name="p7906161061013"></a><a name="p7906161061013"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="p16906110121010"><a name="p16906110121010"></a><a name="p16906110121010"></a>row</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p7906181014108"><a name="p7906181014108"></a><a name="p7906181014108"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p17906191012103"><a name="p17906191012103"></a><a name="p17906191012103"></a>Main axis direction of the container. Available values are as follows:</p>
<a name="ul19906161071012"></a><a name="ul19906161071012"></a><ul id="ul19906161071012"><li><strong id="b166702410642221"><a name="b166702410642221"></a><a name="b166702410642221"></a>column</strong>: Items are placed vertically from top to bottom.</li><li><strong id="b45570924842221"><a name="b45570924842221"></a><a name="b45570924842221"></a>row</strong>: Items are placed horizontally from left to right.</li></ul>
</td>
</tr>
<tr id="row17907410111012"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p20907510121020"><a name="p20907510121020"></a><a name="p20907510121020"></a>justify-content</p>
</td>
<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="p1907510191019"><a name="p1907510191019"></a><a name="p1907510191019"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="p39071110141015"><a name="p39071110141015"></a><a name="p39071110141015"></a>flex-start</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p1690711091015"><a name="p1690711091015"></a><a name="p1690711091015"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p5907171091012"><a name="p5907171091012"></a><a name="p5907171091012"></a>How items are aligned along the main axis of the current row in the container. Available values are as follows:</p>
<a name="ul39078107107"></a><a name="ul39078107107"></a><ul id="ul39078107107"><li><strong id="b38994401942221"><a name="b38994401942221"></a><a name="b38994401942221"></a>flex-start</strong>: Items are packed towards the start row.</li><li><strong id="b37986692242221"><a name="b37986692242221"></a><a name="b37986692242221"></a>flex-end</strong>: Items are packed towards the end row.</li><li><strong id="b156136190042221"><a name="b156136190042221"></a><a name="b156136190042221"></a>center</strong>: Items are centered along the row.</li><li><strong id="b42407860542221"><a name="b42407860542221"></a><a name="b42407860542221"></a>space-between</strong>: Items are positioned with space between the rows.</li><li><strong id="b182089689442221"><a name="b182089689442221"></a><a name="b182089689442221"></a>space-around</strong>: Items are positioned with space before, between, and after the rows.</li><li><strong id="b1452413538376"><a name="b1452413538376"></a><a name="b1452413538376"></a>space-evenly</strong><sup id="sup109071710111017"><a name="sup109071710111017"></a><a name="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.
<a name="table185296841112"></a>
<table><thead align="left"><tr id="row0529118181119"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="p105291481111"><a name="p105291481111"></a><a name="p105291481111"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="24.21242124212421%" id="mcps1.1.4.1.2"><p id="p75291381118"><a name="p75291381118"></a><a name="p75291381118"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="50.935093509350935%" id="mcps1.1.4.1.3"><p id="p17529108181117"><a name="p17529108181117"></a><a name="p17529108181117"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row853019819112"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p25301383111"><a name="p25301383111"></a><a name="p25301383111"></a>groupclick</p>
</td>
<td class="cellrowborder" valign="top" width="24.21242124212421%" headers="mcps1.1.4.1.2 "><p id="p953038201119"><a name="p953038201119"></a><a name="p953038201119"></a>{ groupid: string }</p>
</td>
<td class="cellrowborder" valign="top" width="50.935093509350935%" headers="mcps1.1.4.1.3 "><p id="p65301486113"><a name="p65301486113"></a><a name="p65301486113"></a>Triggered when a group is clicked.</p>
<p id="p9530128111113"><a name="p9530128111113"></a><a name="p9530128111113"></a><strong id="b6723111191819"><a name="b6723111191819"></a><a name="b6723111191819"></a>groupid</strong>: ID of the group that is clicked.</p>
</td>
</tr>
<tr id="row155301861119"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p1853015818117"><a name="p1853015818117"></a><a name="p1853015818117"></a>groupcollapse</p>
</td>
<td class="cellrowborder" valign="top" width="24.21242124212421%" headers="mcps1.1.4.1.2 "><p id="p353011810115"><a name="p353011810115"></a><a name="p353011810115"></a>{ groupid: string }</p>
</td>
<td class="cellrowborder" valign="top" width="50.935093509350935%" headers="mcps1.1.4.1.3 "><p id="p65305861116"><a name="p65305861116"></a><a name="p65305861116"></a>Triggered when a group is collapsed.</p>
<p id="p1353016817113"><a name="p1353016817113"></a><a name="p1353016817113"></a><strong id="b171612547175"><a name="b171612547175"></a><a name="b171612547175"></a>groupid</strong>: ID of the group collapsed.</p>
<p id="p11530168201111"><a name="p11530168201111"></a><a name="p11530168201111"></a>If the parameter is not carried or <strong id="b033817189188"><a name="b033817189188"></a><a name="b033817189188"></a>groupid</strong> is left empty, all groups are collapsed.</p>
</td>
</tr>
<tr id="row1453014801111"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p18530383117"><a name="p18530383117"></a><a name="p18530383117"></a>groupexpand</p>
</td>
<td class="cellrowborder" valign="top" width="24.21242124212421%" headers="mcps1.1.4.1.2 "><p id="p753068161115"><a name="p753068161115"></a><a name="p753068161115"></a>{ groupid: string }</p>
</td>
<td class="cellrowborder" valign="top" width="50.935093509350935%" headers="mcps1.1.4.1.3 "><p id="p175301087114"><a name="p175301087114"></a><a name="p175301087114"></a>Triggered when a group is expanded.</p>
<p id="p1653058181112"><a name="p1653058181112"></a><a name="p1653058181112"></a><strong id="b2662173016182"><a name="b2662173016182"></a><a name="b2662173016182"></a>groupid</strong>: ID of the group expanded.</p>
<p id="p1653078131118"><a name="p1653078131118"></a><a name="p1653078131118"></a>If the parameter is not carried or <strong id="b16727027389"><a name="b16727027389"></a><a name="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.
| Name | Name | Description |
| ------------- | ---------------------------------- | ---------------------------------------- |
| 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 -->
<div class="doc-page">
<list style="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.
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data: {
direction: 'column',
list: []
list: [],
listAdd: []
},
onInit() {
this.list = []
......@@ -246,5 +170,4 @@ export default {
}
```
![](figures/list6.gif)
![list6](figures/list6.gif)
# stepper
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.
height: 300px;
}
.stepperItem {
width: 100%;
flex-direction: column;
align-items: center;
}
......
......@@ -24,9 +24,9 @@ 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.<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. |
## PlaybackSpeed<sup>8+</sup>
......
# &lt;button&gt; Development
# \<button> Development
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 **&lt;button&gt;** 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 &lt;button&gt; Component
Create a **&lt;button&gt;** 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 **&lt;button&gt;** component in the .hml file under **pages/index**.
## Setting the Button Type
Set the **type** attribute of the **&lt;input&gt;** 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 **&lt;input&gt;** 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 **&lt;button&gt;** 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 **&lt;button&gt;** 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.
```html
<!-- xxx.hml -->
......
# &lt;form&gt; Development
# \<form> Development
The &lt;form&gt; component allows the content in [&lt;input&gt;](../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 &lt;form&gt; Component
Create a **&lt;form&gt;** 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 -->
<div class="container">
......@@ -39,8 +37,7 @@ Create a **&lt;form&gt;** 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 **&lt;form&gt;** 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 -->
<div class="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 [&lt;input&gt;](../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 **&lt;form&gt;** 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.
```html
<!-- xxx.hml -->
<div class="container">
<form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
<span > form </span>
<span > Form </span>
</text>
<div style="flex-direction: column;width: 90%;padding: 30px 0px;">
<text class="txt">Select 1 or more options</text>
......
# &lt;image&gt; Development
# \<image> Development
The **\<image>** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
The **&lt;image&gt;** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
## Creating an \<image> Component
## Creating an &lt;image&gt; Component
Create an **&lt;image&gt;** component in the .hml file under **pages/index**.
Create an **\<image>** component in the .hml file under **pages/index**.
```html
<!-- index.hml -->
<div class="container">
......@@ -32,7 +30,7 @@ Create an **&lt;image&gt;** component in the .hml file under **pages/index**.
## 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
......@@ -60,18 +58,16 @@ image{
border-radius: 20px;
object-fit: contain;
match-text-direction:true;
}
```
![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png)
## Loading Images
## Loading the Image
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.
```html
<!-- index.hml -->
......@@ -124,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
<!-- index.hml -->
<div class="page-container">
<div class="content">
<div class="image-container">
<image class="testimage" src="{{testuri}}" style="display:{{displaytype}};opacity:{{imageopacity}};" onclick="changedisplaytype" onlongpress="changeopacity"> </image>
<image class="testimage" src="{{testuri}}" style="opacity:{{imageopacity}};" onlongpress="changeopacity"> </image>
</div>
<div class="text-container">
<text style="font-size: 37px;font-weight:bold;color:orange;text-align: center;width: 100%;">Touch and hold the image</text>
......
# &lt;picker&gt; Development
# \<picker> Development
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 **&lt;picker&gt;** 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 &lt;picker&gt; Component
Create a **&lt;picker&gt;** component in the .hml file under **pages/index**.
Create a **\<picker>** component in the .hml file under **pages/index**.
```html
<!-- xxx.hml -->
<div class="container">
<picker> picker </picker>
<div>
</div>
```
```css
......@@ -32,7 +31,7 @@ Create a **&lt;picker&gt;** component in the .hml file under **pages/index**.
## Setting the Picker Type
Set the **type** attribute of the **&lt;picker&gt;** component. For example, set it to **date**.
Set the **type** attribute of the **\<picker>** component. For example, set it to **date**.
```html
<!-- xxx.hml -->
......@@ -71,14 +70,13 @@ export default {
![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif)
> **NOTE**
>
>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 **&lt;picker&gt;** component.
Implement a health check-in application by using the **\<picker>** component.
```html
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册