Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“36f349e71e3b847cef4760db226fb9adb6299c0e”上不存在“...design/ops/git@gitcode.net:s920243400/PaddleDetection.git”
提交 75c6681c 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (10132) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 accb18c5
隐藏空白更改
内联 并排
Showing with 951 addition and 769 deletion
en/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ 75c6681c
# chart # chart
> **NOTE**
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<chart>** component displays line charts, gauge charts, and bar charts. The **\<chart>** component displays line charts, gauge charts, and bar charts.
...@@ -6,185 +9,163 @@ The **\<chart>** component displays line charts, gauge charts, and bar charts. ...@@ -6,185 +9,163 @@ The **\<chart>** component displays line charts, gauge charts, and bar charts.
None None
## Child Component
Not supported ## Child Components
## Attributes Not 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 | | Name | Type | Default Value | Mandatory | Description |
| ------------------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | | ------------------------------ | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| type | string | line | No | Chart type. Dynamic modification is not supported. Available values include:<br>-**bar**: bar chart<br>-**line**: line chart<br>-**gauge**: gauge chart<br>-**progress**5+: circle chart of progresses<br>-**loading**5+: circle chart of loading processes<br>-**rainbow**5+: circle chart of proportions | | type | string | line | No | Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>- **gauge**: gauge chart<br>- **progress**<sup>5+</sup>: circle chart of progresses<br>- **loading**<sup>5+</sup>: circle chart of loading processes<br>- **rainbow**<sup>5+</sup>: circle chart of proportions|
| options | [ChartOptions](js-components-basic-chart.md) | - | No | Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported. | | options | ChartOptions | - | No | Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.|
| datasets | Array\<[ChartDataset](js-components-basic-chart.md)> | - | No | Data set. You must set data sets for bar charts and line charts. Data set for a gauge chart does not take effect. You can set multiple datasets and their background colors. | | datasets | Array&lt;ChartDataset&gt; | - | No | Data sets. You must set data sets for bar charts and line charts. Data sets for a gauge chart do not take effect. You can set multiple datasets and their background colors.|
| segments5+ | [DataSegment](js-components-basic-chart.md) \| Array\<[DataSegment](js-components-basic-chart.md)> | - | No | Data structures used by **progress**, **loading**, and **rainbow** charts.**DataSegment** is available for **progress** and **loading** charts.**Array\<[DataSegment](js-components-basic-chart.md)>** is available for **rainbow** charts. A maximum of nine **DataSegment** are supported in the array. | | segments<sup>5+</sup> | DataSegment \| Array&lt;DataSegment&gt; | - | No | Data structures used by **progress**, **loading**, and **rainbow** charts.<br>**DataSegment** is available for **progress** and **loading** charts.<br>**Array&lt;DataSegment&gt;** is available for **rainbow** charts. A maximum of nine **DataSegment**s are supported in the array.|
| effects5+ | boolean | true | No | Whether to enable the effects for **progress** and **rainbow** charts. | | effects<sup>5+</sup> | boolean | true | No | Whether to enable the effects for **progress** and **rainbow** charts. |
| animationduration6+ | number | 3000 | No | Animation duration for expanding a **rainbow** chart, in milliseconds. | | animationduration<sup>6+</sup> | number | 3000 | No | Animation duration for expanding a **rainbow** chart, in milliseconds. |
**Table 1** ChartOptions **Table 1** ChartOptions
| Name | Type | Default Value | Mandatory | Description |
| ------ | ----------- | ---- | ---- | ---------------------------------------- |
| Name | Type | Default Value | Mandatory | Description | | xAxis | ChartAxis | - | Yes | X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis. |
| ------ | ------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | | yAxis | ChartAxis | - | Yes | Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis. |
| xAxis | [ChartAxis](js-components-basic-chart.md) | - | Yes | X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis. | | series | ChartSeries | - | No | Data sequence parameters. Only line charts support this attribute.<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.|
| yAxis | [ChartAxis](js-components-basic-chart.md) | - | Yes | Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis. |
| series | [ChartSeries](js-components-basic-chart.md) | - | No | Data sequence parameters.<br/>-Line style, such as the line width and whether the line is smooth.<br/>-Style and size of the white point at the start of the line.NOTE:Only line charts support this attribute. |
**Table 2** ChartDataset **Table 2** ChartDataset
| Name | Type | Default Value | Mandatory | Description |
| ----------- | ---------------------------------------- | -------- | ---- | ---------------------- |
| Name | Type | Default Value | Mandatory | Description | | strokeColor | &lt;color&gt; | \#ff6384 | No | Stroke color. Only line charts support this attribute. |
| ----------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | | fillColor | &lt;color&gt; | \#ff6384 | No | Fill color.<br>For line charts, the value indicates the gradient color to fill.|
| strokeColor | \<color> | #ff6384 | No | Line color.NOTE:Only line charts support this attribute. | | data | Array&lt;number&gt; \| Array&lt;Point&gt;<sup>5+</sup> | - | Yes | Data of the drawn line or bar. |
| fillColor | \<color> | #ff6384 | No | Fill color. For line charts, the value indicates the gradient color to fill. | | gradient | boolean | false | No | Whether to display the gradient color. Only line charts support this attribute. |
| data | Array\<number> \| Array\<[Point](js-components-basic-chart.md)>5+ | - | Yes | Data of the drawn line or bar. |
| gradient | boolean | false | No | Whether to display the gradient color.NOTE:Only line charts support this attribute. |
**Table 3** ChartAxis **Table 3** ChartAxis
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------------- | -------- | ---- | ---------------------------------------- |
| Name | Type | Default Value | Mandatory | Description | | min | number | 0 | No | Minimum value of the axis. Only line charts support negative numbers. |
| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ | | max | number | 100 | No | Maximum value of the axis. Only line charts support negative numbers. |
| min | number | 0 | No | Minimum value of the axis.NOTE:Only line charts support negative numbers. | | axisTick | number | 10 | No | Number of scales displayed on the axis. The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max** – **min**).<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.|
| max | number | 100 | No | Maximum value of the axis.NOTE:Only line charts support negative numbers. | | display | boolean | false | No | Whether to display the axis. |
| axisTick | number | 10 | No | Number of scales displayed on the axis.NOTE:The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max**-**min**).In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales. | | color | &lt;color&gt; | \#c0c0c0 | No | Axis color. |
| display | boolean | false | No | Whether to display the axis. |
| color | \<color> | #c0c0c0 | No | Axis color. |
**Table 4** ChartSeries **Table 4** ChartSeries
| Name | Type | Default Value | Mandatory | Description |
| ----------- | -------------- | ---- | ---- | -------------------- |
| Name | Type | Default Value | Mandatory | Description | | lineStyle | ChartLineStyle | - | No | Line style, such as the line width and whether the line is smooth. |
| ----------- | ---------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | | headPoint | PointStyle | - | No | Style and size of the white point at the start of the line. |
| lineStyle | [ChartLineStyle](js-components-basic-chart.md) | - | No | Line style, such as the line width and whether the line is smooth. | | topPoint | PointStyle | - | No | Style and size of the top point. |
| headPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the white point at the start of the line. | | bottomPoint | PointStyle | - | No | Style and size of the bottom point. |
| topPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the top point. | | loop | ChartLoop | - | No | Whether to start drawing again when the screen is looped.|
| bottomPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the bottom point. |
| loop | [ChartLoop](js-components-basic-chart.md) | - | No | Whether to start drawing again when the screen is looped. |
**Table 5** ChartLineStyle **Table 5** ChartLineStyle
| Name | Type | Default Value | Mandatory | Description |
| ------ | -------------- | ----- | ---- | ----- |
| Name | Type | Default Value | Mandatory | Description | | width | &lt;length&gt; | 1px | No | Line width.|
| ------ | -------- | ------------- | --------- | --------------------------- | | smooth | boolean | false | No | Whether the line is smooth.|
| width | \<length> | 1px | No | Line width. |
| smooth | boolean | false | No | Whether the line is smooth. |
**Table 6** PointStyle **Table 6** PointStyle
| Name | Type | Default Value | Mandatory | Description |
| ----------- | -------------- | -------- | ---- | ---------------------------------------- |
| Name | Type | Default Value | Mandatory | Description | | shape | string | circle | No | Shape of the highlight point. Available values are as follows:<br>- circle<br>- square<br>- triangle|
| ----------- | -------- | ------------- | --------- | ------------------------------------------------------------ | | size | &lt;length&gt; | 5px | No | Size of the highlight point. |
| shape | string | circle | No | Shape of the highlight point. Available values are as follows:<br/>-Circle<br/>-Square<br/>-Triangle | | strokeWidth | &lt;length&gt; | 1px | No | Stroke width. |
| size | \<length> | 5px | No | Size of the highlight point. | | strokeColor | &lt;color&gt; | \#ff0000 | No | Stroke color. |
| strokeWidth | \<length> | 1px | No | Stroke width. | | fillColor | &lt;color&gt; | \#ff0000 | No | Fill color. |
| strokeColor | \<color> | #ff0000 | No | Frame color. |
| fillColor | \<color> | #ff0000 | No | Fill color. |
**Table 7** ChartLoop **Table 7** ChartLoop
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------------- | ----- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 1 | No | Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.|
| gradient | boolean | false | No | Whether to perform gradient erase. |
**Table 8** Point<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description |
| ------------ | ------------- | -------- | ---- | ---------------------------------------- |
| value | number | 0 | Yes | Y coordinate of the point to draw. |
| pointStyle | PointStyle | - | No | Style of the point. |
| description | string | - | No | Description text of the point. |
| textLocation | string | - | No | Position of the description text relative to the point. Available values are as follows: **top**: above the point<br>**bottom**: below the point<br>**none**: not displayed|
| textColor | &lt;color&gt; | \#000000 | No | Color of the description text. |
| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes. - **"dashed, 5, 5"**: dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value **"solid"** indicates a solid line.|
| lineColor | &lt;color&gt; | \#000000 | No | Line color. If this attribute is not set, the value of **strokeColor** is used. |
**Table 9** DataSegment<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description |
| ---------- | ------ | ---- | ---- | ---------------------------------------- |
| startColor | Color | - | No | Color of the start position. If this attribute is set, **endColor** must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table.|
| endColor | Color | - | No | Color of the end position. If this attribute is set, **startColor** must be set.<br>If this attribute is not set, the default color array preset in the system is used.|
| value | number | 0 | Yes | Percentage for the data segment. The maximum value is **100**. |
| name | string | - | No | Name of the data segment. |
| Data Segment | Light Mode | Dark Mode |
| ---- | --------------------------- | --------------------------- |
| 0 | Start color: \#f7ce00; end color: \#f99b11| Start color: \#d1a738; end color: \#eb933d|
| 1 | Start color: \#f76223; end color: \#f2400a| Start color: \#e67d50; end color: \#d9542b|
| 2 | Start color: \#f772ac; end color: \#e65392| Start color: \#d5749e; end color: \#d6568d|
| 3 | Start color: \#a575eb; end color: \#a12df7| Start color: \#9973d1; end color: \#5552d9|
| 4 | Start color: \#7b79f7; end color: \#4b48f7| Start color: \#7977d9; end color: \#f99b11|
| 5 | Start color: \#4b8af3; end color: \#007dff| Start color: \#4c81d9; end color: \#217bd9|
| 6 | Start color: \#73c1e6; end color: \#4fb4e3| Start color: \#5ea6d1; end color: \#4895c2|
| 7 | Start color: \#a5d61d; end color: \#69d14f| Start color: \#91c23a; end color: \#70ba5d|
| 8 | Start color: \#a2a2b0; end color: \#8e8e93| Start color: \#8c8c99; end color: \#6b6b76|
For the **gauge** charts, the following attributes are also supported.
| Name | Type | Default Value | Mandatory | Description |
| ------- | ------ | ---- | ---- | ---------------------- |
| percent | number | 0 | No | Percentage of the current value to the total value. The value ranges from 0 to 100.|
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | ------------- | --------- | ------------------------------------------------------------ |
| margin | \<length> | 1 | No | Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for lite devices. If you do so, there is a possibility that the point is in the erase area and invisible. |
| gradient | boolean | false | No | Whether to perform gradient erase. |
**Table 8** Point5+
| Name | Type | Default Value | Mandatory | Description |
| ------------ | ------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ |
| value | number | 0 | Yes | Y coordinate of the point to draw. |
| pointStyle | [PointStyle](js-components-basic-chart.md) | - | No | Style of the point. |
| description | string | - | No | Description text of the point. |
| textLocation | string | - | No | Description text position relative to the point. Available values are as follows:**top**: above the point**bottom**: below the point**none**: not displayed |
| textColor | \<color> | #000000 | No | Color of the description text. |
| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes. For example, **"dashed, 5, 5"** indicates a dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value **"solid"** indicates a solid line. |
| lineColor | \<color> | #000000 | No | Line color. If this attribute is not set, the **strokeColor** is used by default. |
**Table 9** DataSegment5+
| Name | Type | Default Value | Mandatory | Description |
| ---------- | ------ | ------------- | --------- | ------------------------------------------------------------ |
| startColor | Color | - | No | Color of the start position. If this attribute is set, **endColor** must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table. |
| endColor | Color | - | No | Color of the end position. If this attribute is set, **startColor** must be set.If this attribute is not set, the default color array preset in the system is used. |
| value | number | 0 | Yes | Percentage for the current data segment. The maximum value is **100**. |
| name | string | - | No | Name of this data segment. |
| Data Segment | Light Mode | Dark Mode |
| ------------ | ---------------------------------------- | ---------------------------------------- |
| 0 | Start color: #f7ce00; end color: #f99b11 | Start color: #d1a738; end color: #eb933d |
| 1 | Start color: #f76223; end color: #f2400a | Start color: #e67d50; end color: #d9542b |
| 2 | Start color: #f772ac; end color: #e65392 | Start color: #d5749e; end color: #d6568d |
| 3 | Start color: #a575eb; end color: #a12df7 | Start color: #9973d1; end color: #5552d9 |
| 4 | Start color: #7b79f7; end color: #4b48f7 | Start color: #7977d9; end color: #f99b11 |
| 5 | Start color: #4b8af3; end color: #007dff | Start color: #4c81d9; end color: #217bd9 |
| 6 | Start color: #73c1e6; end color: #4fb4e3 | Start color: #5ea6d1; end color: #4895c2 |
| 7 | Start color: #a5d61d; end color: #69d14f | Start color: #91c23a; end color: #70ba5d |
| 8 | Start color: #a2a2b0; end color: #8e8e93 | Start color: #8c8c99; end color: #6b6b76 |
For gauge charts, the following attribute is supported.
| Name | Type | Default Value | Mandatory | Description |
| ------- | ------ | ------------- | --------- | ------------------------------------------------------------ |
| percent | number | 0 | No | Percentage of the current value to the total value. The value ranges from 0 to 100. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| ------------- | -------- | ------------------------------------------------ | --------- | ------------------------------------------------------------ | | ------------------------ | -------------- | -------------------------- | ---- | ---------------------------------------- |
| stroke-width | \<length> | 32px (**gauge** charts)24px (**rainbow** charts) | No | Width of the scale bar for **gauge**and **rainbow** charts. | | stroke-width | &lt;length&gt; | 32px (**gauge** charts)<br>24px (**rainbow** charts)| No | Width of the scale bar for **gauge** and **rainbow** charts. |
| start-angle | \<deg> | 240 (**gauge** charts)0 (**rainbow** charts) | No | Start angle of the scale bar for **gauge** and **rainbow** charts, which starts from the direction of zero o'clock. The value ranges from 0 to 360. | | start-angle | &lt;deg&gt; | 240 (**gauge** charts)<br>0 (**rainbow** charts) | No | Start angle of the scale bar for **gauge** and **rainbow** charts, which starts from zero o'clock. The value ranges from 0 to 360. |
| total-angle | \<deg> | 240 (**gauge** charts)360 (**rainbow** charts) | No | Total length of the scale bar for **gauge** and **rainbow** charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction. | | total-angle | &lt;deg&gt; | 240 (**gauge** charts)<br>360 (**rainbow** charts) | No | Total length of the scale bar for **gauge** and **rainbow** charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction.|
| center-x | \<length> | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-y** and **radius**. This style is supported by the gauge chart only. | | center-x | &lt;length&gt; | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-y** and **radius**. This style is supported by the gauge chart only.|
| center-y | \<length> | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-x** and **radius**. This style is supported by the gauge chart only. | | center-y | &lt;length&gt; | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-x** and **radius**. This style is supported by the gauge chart only.|
| radius | \<length> | - | No | Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **width** and **height** in the common styles, and must be used together with **center-x** and **center-y**. This style is supported by the gauge chart only. | | radius | &lt;length&gt; | - | No | Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **width** and **height** in the common styles, and must be used together with **center-x** and **center-y**. This style is supported by the gauge chart only.|
| colors | Array | - | No | Color of each section for the scale bar of the gauge component.For example, **colors: #ff0000, #00ff00**. This style is supported by the gauge chart only. | | colors | Array | - | No | Color of each section for the scale bar of the gauge component.<br>For example, **colors: \#ff0000, \#00ff00**. This style is supported by the gauge chart only.|
| weights | Array | - | No | Weight of each section for the scale bar of the gauge component.For example, weights: 2, 2. This style is supported by the gauge chart only. | | weights | Array | - | No | Weight of each section for the scale bar of the gauge component.<br>For example, **weights: 2, 2**. This style is supported by the gauge chart only.|
| font-family5+ | Array | - | No | Font style of the description text. You can use [Custom Font Styles](js-components-common-customizing-font.md). | | font-family<sup>5+</sup> | Array | - | No | Font style of the description text. You can use a [custom font](../arkui-js/js-components-common-customizing-font.md).|
| font-size5+ | \<length> | - | No | Font size of the description text. | | font-size<sup>5+</sup> | &lt;length&gt; | - | No | Font size of the description text. |
## Events
Events in [Universal Events](js-components-common-events.md) are supported. ## Events
## Methods The [universal events](../arkui-js/js-components-common-events.md) are supported.
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Method | Parameter | Description | | Name | Parameter | Description |
| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | ------ | ---------------------------------------- | ---------------------------------------- |
| append | {serial: number, // Set the data subscript of the line chart to be updated.data: Array\<number>, // Set the new data.} | Data is dynamically added to an existing data sequence. The target sequence is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting. | | append | {<br>serial: number, <br>data: Array&lt;number&gt;, <br>} | Data is dynamically added to an existing data sequence. The target sequence is specified based on **serial**, which is the subscript of the datasets array and starts from 0. For example, if the value of **serial** is **index**, use **data** to update **datasets[index].data**. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.|
## Example Code ## Example
1. Line chart 1. Line chart
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stack class="chart-region"> <stack class="chart-region">
...@@ -195,7 +176,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -195,7 +176,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -221,7 +202,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -221,7 +202,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -230,24 +211,24 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -230,24 +211,24 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
strokeColor: '#0081ff', strokeColor: '#0081ff',
fillColor: '#cce5ff', fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true, gradient: true
} }
], ],
lineOps: { lineOps: {
xAxis: { xAxis: {
min: 0, min: 0,
max: 20, max: 20,
display: false, display: false
}, },
yAxis: { yAxis: {
min: 0, min: 0,
max: 1000, max: 1000,
display: false, display: false
}, },
series: { series: {
lineStyle: { lineStyle: {
width: "5px", width: "5px",
smooth: true, smooth: true
}, },
headPoint: { headPoint: {
shape: "circle", shape: "circle",
...@@ -255,14 +236,14 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -255,14 +236,14 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
strokeWidth: 5, strokeWidth: 5,
fillColor: '#ffffff', fillColor: '#ffffff',
strokeColor: '#007aff', strokeColor: '#007aff',
display: true, display: true
}, },
loop: { loop: {
margin: 2, margin: 2,
gradient: true, gradient: true
} }
} }
}, }
}, },
addData() { addData() {
this.$refs.linechart.append({ this.$refs.linechart.append({
...@@ -273,11 +254,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -273,11 +254,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
![img](figures/en-us_image_0000001173324843.png) ![en-us_image_0000001173324843](figures/en-us_image_0000001173324843.png)
2. Bar chart 2. Bar chart
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stack class="data-region"> <stack class="data-region">
...@@ -287,7 +267,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -287,7 +267,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -307,22 +287,22 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -307,22 +287,22 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
barData: [ barData: [
{ {
fillColor: '#f07826', fillColor: '#f07826',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628]
}, },
{ {
fillColor: '#cce5ff', fillColor: '#cce5ff',
data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
}, },
{ {
fillColor: '#ff88bb', fillColor: '#ff88bb',
data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657]
}, },
], ],
barOps: { barOps: {
...@@ -330,23 +310,22 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -330,23 +310,22 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
min: 0, min: 0,
max: 20, max: 20,
display: false, display: false,
axisTick: 10, axisTick: 10
}, },
yAxis: { yAxis: {
min: 0, min: 0,
max: 1000, max: 1000,
display: false, display: false
}, }
}, }
} }
} }
``` ```
![img](figures/en-us_image_0000001173164929.png) ![en-us_image_0000001173164929](figures/en-us_image_0000001173164929.png)
3. Gauge chart 3. Gauge chart
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="gauge-region"> <div class="gauge-region">
...@@ -355,7 +334,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -355,7 +334,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -372,4 +351,77 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -372,4 +351,77 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
![img](figures/en-us_image_0000001127125264.png) ![en-us_image_0000001127125264](figures/en-us_image_0000001127125264.png)
\ No newline at end of file
4. Circle chart of progresses, loading progresses, or proportions
```html
<!-- xxx.hml -->
<div class="container">
<text class="text">progress Example</text>
<stack class="chart-region">
<chart class="" type="progress" segments="{{ progressdata }}"></chart>
</stack>
<text class="text">loading Example</text>
<stack class="chart-region">
<chart class="" type="loading" segments="{{ loadingdata }}"></chart>
</stack>
<text class="text">rainbow Example</text>
<stack class="chart-region">
<chart class="" type="rainbow" segments="{{ rainbowdata }}" effects="true" animationduration="5000"></chart>
</stack>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.chart-region {
height: 400px;
width: 700px;
margin-top: 10px;
}
.text {
margin-top: 30px;
}
```
```js
// xxx.js
export default {
data: {
progressdata: {
value: 50,
name: 'progress'
},
loadingdata: {
startColor: "#ffc0cb",
endColor: "#00bfff",
},
rainbowdata: [
{
value: 50,
name: 'item1'
},
{
value: 10,
name: 'item2'
},
{
value: 20,
name: 'item3'
},
{
value: 10,
name: 'item4'
},
{
value: 10,
name: 'item5'
}
]
}
}
```
![rainbow](figures/rainbow.gif)
en/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ 75c6681c
# image # image
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<image>** component is used to render and display images. The **\<image>** component is used to render and display images.
## Child Component
## Child Components
Not supported Not supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| src | string | - | No | Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.<br>- The Base64 string<sup>6+</sup> is supported in the following format: data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], where **[base64 data]** is a Base64 string.<br>- The path prefix of **dataability://** is supported, which allows access to the image path provided by the Data ability.<sup>6+</sup>|
| alt | string | - | No | Alternative information for the image, which is displayed during image loading. |
| Name | Type | Default Value | Mandatory | Description |
| ---- | ------ | ------------- | --------- | ------------------------------------------------------------ |
| src | string | - | No | Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.Base64 string6+ is supported. The format is data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data],, where [base64 data] is a Base64 string.The path prefix of **dataability://** is supported, which allows access to the image path provided by the Data ability. |
| alt | string | - | No | Placeholder image displayed during image loading. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following style attributes are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
| object-fit | string | cover | No | Image scale type. This style is not supported for SVG images. For details about available values, see **object-fit**.|
| match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. This style is not supported for SVG images. |
| fit-original-size | boolean | false | No | Whether the **\<image>** component adapts to the image source size when its width and height are not set. If this style is set to **true**, **object-fit** will not take effect. This style is not supported for SVG images.|
| object-position<sup>7+</sup> | string | 0px 0px | No | Position of an image in the component.<br>The options are as follows:<br>1. Pixels. For example, **15px 15px** indicates the moving position along the x-axis or y-axis.<br>2. Characters. Optional values are as follows:<br>- **left**: The image is displayed on the left of the component.<br>- **top** The image is displayed on the top of the component.<br>- **right** The image is displayed on the right of the component.<br>- **bottom** The image is displayed at the bottom of the component.|
| Name | Type | Default Value | Mandatory | Description | **Table 1** object-fit
| -------------------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| object-fit | string | cover | No | Image scale type. For details about available values, see [Types of the object-fit style](js-components-basic-image.md). The SVG format is not supported. |
| match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. The SVG format is not supported. |
| fit-original-size | boolean | false | No | Whether the **\<image>** component adapts to the image source size when the width and height are not set. If this attribute is set to **true**, the **object-fit** attribute does not take effect. SVG images do not support this attribute. |
| object-position7+ | string | 0px 0px | No | Position of an image in the component.There are two setting types:1. Pixels. For example, **15px 15px** indicates the moving position along the x-axis or y-axis.2. Characters. Optional values are as follows:<br>-**left**: The image is displayed on the left of the component.<br>-**top** The image is displayed on the top of the component.<br>-**right** The image is displayed on the right of the component.<br>-**bottom** The image is displayed at the bottom of the component. |
**Table 1** Types of the object-fit style | Type | Description |
| ---------- | ------------------------------------ |
| cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.|
| contain | The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle. |
| fill | The image is scaled to fill the display area, and its aspect ratio is not retained. |
| none | The image is displayed in the middle with its aspect ratio and size retained. |
| scale-down | The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size. |
> **NOTE**
| Type | Description |
| ---------- | ------------------------------------------------------------ |
| cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle. |
| contain | The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle. |
| fill | The image is resized to fill the display area and its aspect ratio is not retained. |
| none | The image is displayed in the middle with its aspect ratio and size retained. |
| scale-down | The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size. |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** When using an SVG image, note that:
> >
> - The SVG image will not be drawn if the length or width of the **\<image>** component is infinity. > When using an SVG image, note that:
> - If the image length and width are not specified in the SVG description, the SVG fills the **\<image>** component area.
> - If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect:
> >
> 1. If the **\<image>** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component. > - The SVG image will not be drawn if the length or width of the **\<image>** component is infinity.
> 2. If the **\<image>** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component. >
> - If the image length and width are not specified in the SVG description, the SVG image fills the **\<image>** component area.
## Events >
> - If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect:
>
> 1. If the **\<image>** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component.
>
> 2. If the **\<image>** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component.
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description | | Name | Parameter | Description |
| -------------- | -------------------------------- | ------------------------------------------------------------ | | -------------- | ---------------------------------------- | ------------------------- |
| complete(Rich) | { width: width, height: height } | Triggered when an image is successfully loaded. The loaded image is returned. | | complete(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an image is successfully loaded. The loaded image size is returned.|
| error(Rich) | { width: width, height: height } | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. | | error(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. |
## Methods ## 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 Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red; "> <image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
</image> </image>
<select class="selects" onchange="change_fit"> <select class="selects" onchange="change_fit"><option for="{{fits}}" value="{{$item}}">{{$item}}</option></select>
<option for="{{fits}}" value="{{$item}}">{{$item}}</option>
</select>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.selects{ .selects{
margin-top: 20px; margin-top: 20px;
...@@ -91,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -91,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
border:1px solid #808080; border:1px solid #808080;
border-radius: 10px; border-radius: 10px;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -103,4 +111,4 @@ export default { ...@@ -103,4 +111,4 @@ export default {
} }
``` ```
![img](figures/example.gif) ![example](figures/example.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ 75c6681c
...@@ -65,72 +65,77 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -65,72 +65,77 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="tutorial-page">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}" <div class="mymarquee">
onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee> <marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
<div class="content"> id="testmarquee" onfinish="setfinish">
<button class="controlButton" onclick="onStartClick">Start</button> Life is a journey, not the destination.
<button class="controlButton" onclick="onStopClick">Stop</button> </marquee>
</div>
<div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
<button onclick="makestart" value="start"></button>
<button onclick="makestop" value="stop"></button>
</div> </div>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .tutorial-page {
width: 750px;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
background-color: #ffffff; justify-content: center;
} }
.customMarquee { .marqueetext {
width: 100%; font-size: 37px;
height: 80px;
padding: 10px;
margin: 20px;
border: 4px solid #ff8888;
border-radius: 20px;
font-size: 40px;
color: #ff8888;
font-weight: bolder;
font-family: serif;
background-color: #ffdddd;
} }
.content { .mymarquee {
flex-direction: row; margin-top: 20px;
width:100%;
height: 100px;
margin-left: 50px;
margin-right: 50px;
border: 1px solid #dc0f27;
border-radius: 15px;
align-items: center;
} }
.controlButton { button{
flex-grow: 1; width: 200px;
background-color: #F2F2F2; height: 80px;
text-color: #0D81F2; margin-top: 100px;
} }
``` ```
```js ```js
// xxx.js // xxx.js
export default { export default {
data: { private: {
scrollAmount: 30, loopval: 1,
loop: 3, scroll: 8,
marqueeDir: 'left', color1: 'red'
marqueeCustomData: 'Custom marquee',
},
onMarqueeBounce: function() {
console.log("onMarqueeBounce");
}, },
onMarqueeStart: function() { onInit(){
console.log("onMarqueeStart");
}, },
onMarqueeFinish: function() { setfinish(e) {
console.log("onMarqueeFinish"); this.loopval= this.loopval + 1,
this.r = Math.floor(Math.random()*255),
this.g = Math.floor(Math.random()*255),
this.b = Math.floor(Math.random()*255),
this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)',
this.$element('testmarquee').start(),
this.loopval= this.loopval - 1
}, },
onStartClick (evt) { makestart(e) {
this.$element('customMarquee').start(); this.$element('testmarquee').start()
}, },
onStopClick (evt) { makestop(e) {
this.$element('customMarquee').stop(); this.$element('testmarquee').stop()
} }
} }
``` ```
![lite_bar](figures/lite_bar.gif) ![en-us_image_0000001176075554](figures/en-us_image_0000001176075554.gif)
en/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ 75c6681c
...@@ -166,52 +166,59 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -166,52 +166,59 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<select @change="selectChange"> <select @change="selectChange">
<option value="{{ item }}" for="item in selectList"> <option value="{{ item }}" for="item in selectList">
{{ item }} {{ item }}
</option> </option>
</select> </select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange" <picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
oncancel="textoncancel" class="pickertext"></picker> onchange="textonchange"
oncancel="textoncancel" class="pickertext" show="false"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker> <picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}"
lunarswitch="true"
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12" onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true" selected="{{ timeselect }}" hours="12"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker> onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}" <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker> lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
selected="{{ multitextselect }}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
picker{
width:60%; picker {
height:80px; width: 60%;
border-radius:20px; height: 80px;
text-color:white; border-radius: 20px;
font-size:15px; text-color: white;
background-color:#4747e3; font-size: 15px;
margin-left:20%; background-color: #4747e3;
margin-left: 20%;
} }
select{
background-color: #efecec; select {
height: 50px; background-color: #efecec;
width: 60%; height: 50px;
margin-left: 20%; width: 60%;
margin-top: 300px; margin-left: 20%;
margin-bottom: 50px; margin-top: 300px;
font-size: 22px; margin-bottom: 50px;
font-size: 22px;
} }
``` ```
...@@ -219,72 +226,96 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -219,72 +226,96 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
// xxx.js // xxx.js
import router from '@system.router'; import router from '@system.router';
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
selectList:["text","data","time","datetime","multitext"], selectList: ["text", "data", "time", "datetime", "multitext"],
rangetext:['15', "20", "25"], rangetext: ['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue', textvalue: 'default textvalue',
datevalue:'default datevalue', datevalue: 'default datevalue',
timevalue:'default timevalue', timevalue: 'default timevalue',
datetimevalue:'default datetimevalue', datetimevalue: 'default datetimevalue',
multitextvalue:'default multitextvalue', multitextvalue: 'default multitextvalue',
containsecond:true, containsecond: true,
multitextselect:[1,2,0], multitextselect: [1, 2, 0],
datetimeselect:'2012-5-6-11-25', datetimeselect: '2012-5-6-11-25',
timeselect:'11:22:30', timeselect: '11:22:30',
dateselect:'2021-3-2', dateselect: '2021-3-2',
textselect:'2' textselect: '2'
}, },
selectChange(e){ selectChange(e) {
for(let i = 0;i<this.selectList.length;i++){ for (let i = 0;i < this.selectList.length; i++) {
if(e.newValue == this.selectList[i]){ if (e.newValue == this.selectList[i]) {
this.$element("picker"+i).show(); this.$element("picker" + i).show();
} }
} }
}, },
textonchange(e) { textonchange(e) {
this.textvalue = e.newValue; this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected }) prompt.showToast({
}, message: "text:" + e.newValue + ",newSelected:" + e.newSelected
textoncancel(e) { })
prompt.showToast({ message:"text: textoncancel" }) },
}, textoncancel(e) {
dateonchange(e) { prompt.showToast({
this.datevalue = e.year + "-" + e.month + "-" + e.day; message: "text: textoncancel"
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day }) })
}, },
dateoncancel() { dateonchange(e) {
prompt.showToast({ message:"date: dateoncancel" }) this.datevalue = e.year + "-" + e.month + "-" + e.day;
}, prompt.showToast({
timeonchange(e) { message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
if(this.containsecond){ })
this.timevalue=e.hour+":"+e.minute+":"+e.second; },
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second }) dateoncancel() {
} else { prompt.showToast({
this.timevalue=e.hour+":"+e.minute; message: "date: dateoncancel"
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute }) })
}}, },
timeoncancel() { timeonchange(e) {
prompt.showToast({ message:"timeoncancel" }) if (this.containsecond) {
}, this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
datetimeonchange(e) { prompt.showToast({
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute }) })
}, } else {
datetimeoncancel() { this.timevalue = e.hour + ":" + e.minute;
prompt.showToast({ message:"datetimeoncancel" }) prompt.showToast({
}, message: "Time:" + e.hour + ":" + e.minute
multitextonchange(e) { })
this.multitextvalue=e.newValue; }
prompt.showToast({ message:"Multi-column text change" + e.newValue }) },
}, timeoncancel() {
multitextoncancel() { prompt.showToast({
prompt.showToast({ message:"multitextoncancel" }) message: "timeoncancel"
}, })
popup_picker() { },
this.$element("picker_text").show(); datetimeonchange(e) {
}, this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
prompt.showToast({
message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
})
},
datetimeoncancel() {
prompt.showToast({
message: "datetimeoncancel"
})
},
multitextonchange(e) {
this.multitextvalue = e.newValue;
prompt.showToast({
message: "Multi-column text change" + e.newValue
})
},
multitextoncancel() {
prompt.showToast({
message: "multitextoncancel"
})
},
popup_picker() {
this.$element("picker_text").show();
},
} }
``` ```
......
en/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ 75c6681c
# search # search
The **\<search>** component provides an input area for users to search. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components The **\<Search>** component provides an input area for users to search.
Not supported
## Attributes ## Child Components
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. Not supported
## Attributes
| Name | Type | Default Value | Mandatory | Description | In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| -------------- | --------------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ |
| icon | string | - | No | Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG. |
| hint | string | - | No | Hint text. |
| value | string | - | No | Text in the search box. |
| searchbutton5+ | string | - | No | Text on the search button at the end of the search box. |
| menuoptions5+ | Array\<[MenuOption](js-components-basic-search.md)> | - | No | Menu options displayed after users click the **More** button in the pop menu. |
**Table 1** MenuOption5+ | Name | Type | Default Value | Mandatory | Description |
| ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
| icon | string | - | No | Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG.|
| hint | string | - | No | Hint text. |
| value | string | - | No | Text in the search box. |
| searchbutton<sup>5+</sup> | string | - | No | Text on the search button at the end of the search box. |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | No | Menu options displayed after users click the **More** button. |
**Table 1** MenuOption<sup>5+</sup>
| Name | Type | Description |
| ------- | ------ | ----------- |
| icon | string | Path of the icon for a menu option.|
| content | string | Text content of a menu option.|
| Name | Type | Description |
| ------- | ------ | ----------------------------------- |
| icon | string | Path of the icon for a menu option. |
| content | string | Text content in a menu option. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | No | Font color of the search box. |
| font-size | &lt;length&gt; | 16px | No | Font size of the search box. |
| 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.|
| placeholder-color | &lt;color&gt; | \#99000000<br>| No | Color of the hint text. |
| font-weight | number \| string | normal | No | Font weight. For details, see **font-weight** of the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** 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 specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| caret-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the caret. |
| Name | Type | Default Value | Mandatory | Description |
| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
| color | \<color> | #e6000000 | No | Font color of the search box. |
| font-size | \<length> | 16px | No | Font size of the search box. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. |
| placeholder-color | \<color> | #99000000 | No | Color of the hint text. |
| font-weight | number \| string | normal | No | Font weight. 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 that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. |
| caret-color6+ | \<color> | - | No | Color of the input cursor. |
## Events ## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | { text:newText } | Triggered when the content entered in the text box changes.<br>If you change the **value** attribute directly, this event will not be triggered. |
| submit | { text:submitText } | Triggered when users click the search icon or the search button<sup>5+</sup>, or tap the search button on a soft keyboard. |
| translate<sup>5+</sup> | { value: selectedText } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
| share<sup>5+</sup> | { value: selectedText } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
| search<sup>5+</sup> | { value: selectedText } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
| optionselect<sup>5+</sup> | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
| Name | Parameter | Description |
| -------------- | ------------------------------------------ | ------------------------------------------------------------ |
| change | { text:newText } | Triggered when the content entered in the text box changes.<br/>NOTE:<br/>If you change the **value** attribute directly, this event will not be triggered. |
| submit | { text:submitText } | Triggered when users click the search icon or the search button5+, or tap the search button on a soft keyboard. |
| translate5+ | { value: selectedText } | Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned. |
| share5+ | { value: selectedText } | Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned. |
| search5+ | { value: selectedText } | Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned. |
| optionselect5+ | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned. |
## Methods ## 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 Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<search hint="Enter keywords" searchbutton="Search" @search="search"> <search hint="Enter keywords" searchbutton="Search" @search="search">
</search> </search>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -80,4 +85,4 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -80,4 +85,4 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
} }
``` ```
![img](figures/en-us_image_0000001153427082.png) ![en-us_image_0000001153427082](figures/en-us_image_0000001153427082.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ 75c6681c
# slider # slider
The **\<slider>** component is used to quickly adjust settings, such as volume and brightness. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
## Child Components ## Child Components
Not supported Not supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| min | number | 0 | No| Minimum value of the slider.|
| max | number | 100 | No| Maximum value of the slider.|
| step | number | 1 | No| Step of each slide.|
| value | number | 0 | No| Initial value of the slider.|
| mode<sup>5+</sup> | string | outset | No| Slider style. Available values are as follows:<br>- **outset**: The slider is on the sliding bar.<br>- **inset**: The slider is inside the sliding bar.|
| showsteps<sup>5+</sup> | boolean | false | No| Whether to display slider scales.|
| showtips<sup>5+</sup> | boolean | false | No| Whether a tooltip is displayed to show the percentage value on the slider.|
| Name | Type | Default Value | Mandatory | Description |
| ----------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| min | number | 0 | No | Minimum value of the slider. |
| max | number | 100 | No | Maximum value of the slider. |
| step | number | 1 | No | Step of each slide. |
| value | number | 0 | No | Initial value of the slider. |
| mode5+ | string | outset | No | Slider style. Available values are as follows:<br/>-**outset**: The slider is on the sliding bar.<br/>-**inset**: The slider is inside the sliding bar. |
| showsteps5+ | boolean | false | No | Whether to display slider scales. |
| showtips5+ | boolean | false | No | Whether a pop-up is displayed to show the percentage value on the slider. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | #19000000 | No| Background color of the slider.|
| selected-color | &lt;color&gt; | #ff007dff | No| Selected color of the slider.|
| block-color | &lt;color&gt; | \#ffffff | No| Slider color.|
| Name | Type | Default Value | Mandatory | Description |
| -------------- | ------- | ------------- | --------- | ------------------------------- |
| color | \<color> | #19000000 | No | Background color of the slider. |
| selected-color | \<color> | #ff007dff | No | Selected color of the slider. |
| block-color | \<color> | #ffffff | No | Slider color. |
## Events ## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description | | Name| Parameter| Description|
| ------ | -------------------------------------------- | --------------------------------- | | -------- | -------- | -------- |
| change | [ChangeEvent](js-components-basic-slider.md) | Triggered when the value changes. | | change | ChangeEvent | Triggered when the value changes.|
**Table 1** ChangeEvent **Table 1** ChangeEvent
| Attribute| Type| Description|
| -------- | -------- | -------- |
| value<sup>5+</sup> | number | Current value of the slider.|
| mode<sup>5+</sup> | string | Type of the change event. Available values are as follows:<br>- **start**: The **value** starts to change.<br>- **move**: The **value** is changing with users' dragging.<br>- **end**: The **value** stops changing.|
| Attribute | Type | Description |
| ---------------------- | ------ | ------------------------------------------------------------ |
| progress(deprecated5+) | string | Current value of the slider. |
| isEnd(deprecated5+) | string | Whether the dragging operation ends. Available values are as follows:<br/>-**true**: The dragging ends.<br/>-**false**: The dragging is in progress. |
| value5+ | number | Current value of the slider. |
| mode5+ | string | Type of the change event. Available values are as follows:<br/>-**start**: The **value** starts to change.<br/>-**move**: The **value** is changing with users' dragging.<br/>-**end**: The **value** stops changing. |
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text>slider start value is {{startValue}}</text> <slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
<text>slider current value is {{currentValue}}</text> <slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset" showtips="true"></slider>
<text>slider end value is {{endValue}}</text> <slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset" showtips="false"></slider>
<slider min="0" max="100" value="{{value}}" onchange="setvalue" ></slider>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
// xxx.js slider{
export default { margin-top: 100px;
data: {
value: 0,
startValue: 0,
currentValue: 0,
endValue: 0,
},
setvalue(e) {
if (e.mode == "start") {
this.value = e.value;
this.startValue = e.value;
} else if (e.mode == "move") {
this.value = e.value;
this.currentValue = e.value;
} else if (e.mode == "end") {
this.value = e.value;
this.endValue = e.value;
}
}
} }
``` ```
![img](figures/slider.png)
\ No newline at end of file ![en-us_image_0000001173324709](figures/slider.png)
en/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 75c6681c
# text # text
The **\<text>** component is used to display a piece of textual information. > **NOTE**
>
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
> >
> - The text content must be written in the content area. > - The text content must be written in the content area.
The **\<text>** component is used to display a piece of textual information.
## Required Permissions ## Required Permissions
None None
## Child Component
**\<[span](js-components-basic-span.md)>** is supported. ## Child Components
Only the **[\<span>](../arkui-js/js-components-basic-span.md)** component is supported.
## Attributes ## Attributes
Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| Name | Type | Default Value | Mandatory | Description | | color | &lt;color&gt; | #e5000000 | No | Font color. |
| ----------------------- | ---------------------------------------- | -------------- | --------- | ------------------------------------------------------------ | | font-size | &lt;length&gt; | 30px | No | Font size. |
| color | \<color> | #e5000000 | No | Text color. | | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
| font-size | \<length> | 30px | No | Font size (px). | | letter-spacing | &lt;length&gt; | 0px | No | Character spacing (px). |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br/>NOTE:<br/>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file. | | word-spacing<sup>7+</sup> | &lt;length&gt; \| &lt;percentage&gt; \| string | normal | No | Spacing between texts. If the input is a string, the options are as follows:<br>**normal**: default spacing.|
| letter-spacing | \<length> | 0 px | No | Character spacing (px). | | font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style|
| word-spacing7+ | \<length> \| \<percentage> \| string | normal | No | Spacing between texts. The options are as follows:**normal**: default spacing. | | font-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width. The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
| font-style | string | normal | No | Font style. Available values are as follows:<br/>-**normal**: standard font style<br/>-**italic**: italic font style | | text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| font-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.NOTE:The value must be an integer multiple of 100.The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**. | | text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | No | Color of the text decoration. |
| text-decoration | string | none | No | Text decoration. Available values are as follows:<br/>-**underline**: An underline is used.<br/>-**line-through**: A strikethrough is used.<br/>-**none**: The standard text is used. | | text-align | string | start<br> | No | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.|
| text-decoration-color7+ | \<color> | - | No | Color of the text decoration. | | line-height | &lt;length&gt; \| &lt;percentage&gt;<sup>7+</sup> \| string<sup>7+</sup> | 0px<sup>1-6</sup><br>normal<sup>7+</sup> | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. The value of the string type is as follows:<br>**normal**<sup>7+</sup>: default line height |
| text-align | string | start | No | Text alignment mode. Available values are as follows:<br/>-**left**: The text is left-aligned.<br/>-**center**: The text is center-aligned.<br/>-**right**: The text is right-aligned.<br/>-**start**: The text is aligned with the direction in which the text is written.<br/>-**end**: The text is aligned with the opposite direction in which the text is written.<br/>NOTE:<br/>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container. | | text-overflow | string | clip | No | Display mode when the text is too long. This style takes effect when the maximum number of lines is specified. Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**.|
| line-height | \<length> \| \<percentage>7+ \| string7+ | 0px1-6normal7+ | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. The **string** values are as follows:**normal**7+: default line height | | 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.|
| text-overflow | string | clip | No | Takes effect when the maximum number of lines is specified. Available values are as follows:<br/>-**clip**: The text is clipped and displayed based on the size of the parent container.<br/>-**ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**. | | max-lines | number \| string<sup>7+</sup> | - | No | Maximum number of text lines. The value of the string type is as follows:<br>- **auto**<sup>7+</sup>: The number of text lines adapts to the container height. |
| 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 that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. | | min-font-size | &lt;length&gt; | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| max-lines | number \| string7+ | - | No | Maximum number of text lines. The **string** values are as follows:<br/>-**auto**7+: The number of text lines adapts to the container height. | | max-font-size | &lt;length&gt; | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| min-font-size | \<length> | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect. | | font-size-step | &lt;length&gt; | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. |
| max-font-size | \<length> | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect. | | prefer-font-sizes | &lt;array&gt; | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example values: **12px,14px,16px**|
| font-size-step | \<length> | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. | | word-break<sup>6+</sup> | string | normal | No | Text line breaking mode. The options are as follows:<br>- **normal**: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.<br>- **break-all**: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.<br>- **break-word**: Works in the same way as **break-all**, except that it does not break unbreakable words.|
| prefer-font-sizes | \<array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.Example values: **12px,14px,16px** | | text-indent<sup>7+</sup> | &lt;length&gt; | - | No | Indentation of the first line. |
| word-break6+ | string | normal | No | Text line breaking mode. The options are as follows:<br/>-**normal**: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.<br/>-**break-all**: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.<br/>-**break-word**: Has the same effect as **break-all**, except that it does not break unbreakable words. | | white-space<sup>7+</sup> | string | pre | No | Mode for processing blanks in the component. The options are as follows:<br>- **normal**: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.<br>- **nowrap**: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.<br>- **pre**: All contents are output as-is.<br>- **pre-wrap**: All contents are output as-is with line breaks.<br>- **pre-line**: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped.|
| text-indent7+ | \<length> | - | No | Indentation of the first line. | | adapt-height<sup>7+</sup> | boolean | false | No | Whether the text size adapts to the container height.<br>The settings take effect after font size auto-adaptation is configured. |
| white-space7+ | string | pre | No | Mode for processing blanks in the component. The options are as follows:<br/>-**normal**: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.<br/>-**nowrap**: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.<br/>-**pre**: All contents are output as-is.<br/>-**pre-wrap**: All contents are output as-is with line breaks.<br/>-**pre-line**: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped. |
| adapt-height7+ | boolean | false | No | Whether the text size adapts to the container height.NOTE:The settings take effect after font size auto-adaptation is configured. | > **NOTE**
> - In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement.
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** >
> - Use the escape character **\r\n** for newline.
>
> - The following escape characters are supported: **\a**, **\b**, **\f**, **\n**, **\r**, **\t**, **\v**, **\'**, **\"**, and **\0**.
>
> - When you use **\<span>** as a child component to form a text paragraph, note that if a **\<span>** style is abnormal, the text paragraph cannot be displayed.
> >
> - In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement. > - The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **\<text>** component and its child components (**\<span>**).
> - Use the escape character **\r\n** for newline. >
> - The following escape characters are supported: **\a**, **\b**, **\f**, **\n**, **\r**, **\t**, **\v**, **\'**, **\"**, and **\0**. > - The **\<text>** component cannot contain both the text and the child component **\<span>**. If both of them exist, only the content in **\<span>** is displayed.
> - When you use **\<span>** as a child component to form a text paragraph, note that if a **\<span>** style is abnormal, the text paragraph cannot be displayed.
> - The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **\<text>** component and its child components (**\<span>**).
> - The **\<text>** component does not support the coexistence of the text content and **\<span>** subcomponents. (If both of them exist, only the content in **\<span>** is displayed.)
## Events ## Events
Events in [Universal Events](js-components-common-events.md) are supported. The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Method ## 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 Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -77,6 +86,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -77,6 +86,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
</text> </text>
</div> </div>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -94,6 +106,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -94,6 +106,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
width: 400px; width: 400px;
height: 400px; height: 400px;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -102,9 +117,9 @@ export default { ...@@ -102,9 +117,9 @@ export default {
} }
``` ```
![img](figures/3.png) ![3](figures/3.png)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="text1"> <text class="text1">
...@@ -114,6 +129,9 @@ export default { ...@@ -114,6 +129,9 @@ export default {
This is a passage This is a passage
</text> </text>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -138,4 +156,4 @@ export default { ...@@ -138,4 +156,4 @@ export default {
} }
``` ```
![img](figures/2.png) ![2](figures/2.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-list.md
浏览文件 @ 75c6681c
# list # list
The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
## Required Permissions ## Required Permissions
N/A None
## Child Components ## Child Components
\<[list-item](js-components-container-list-item-group.md)> and \<[list-item-group](js-components-container-list-item.md)> The **[\<list-item-group>](../arkui-js/js-components-container-list-item-group.md)** and **[\<list-item>](../arkui-js/js-components-container-list-item.md)** components are supported.
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| --------------------------- | ---------------------------------------- | ------- | ---- | ---------------------------------------- |
| scrollpage | boolean | false | No | Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be **true** (scrolls the non-list part out) or **false** (does not scroll the non-list part out). This attribute is not available when the direction is **row**.|
| cachedcount | number | 0 | No | Minimum number of cached list items when a long list is loaded with delay.<br>When the number of list items cached outside the visible area is less than the value of this attribute, a **requestitem** event is triggered.|
| scrollbar | string | off | No | Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.)<br>- **off**: no display.<br>- **auto**: displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.).<br>- **on**: always displayed.|
| scrolleffect | string | spring | No | Scroll effect. Available values are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.<br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **no**: No effect after the scrollbar is moved to the edge.|
| indexer | boolean \| Array&lt;string&gt; | false | No | Whether to display the alphabetical index bar on the sidebar. If this attribute is set to **true** or a customized indexer, the index bar is displayed at the right boundary of the list. Example:<br>**"indexer" : "true"** indicates the default alphabetical indexer.<br>**"indexer" : "false"** indicates no indexer.<br>"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include **"#"** when using a customized indexer.<br>This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.<br>This attribute must be used together with the **[section](../arkui-js/js-components-container-list-item.md#attributes)** attribute of **\<list-item>**.|
| indexercircle<sup>5+</sup> | boolean | - | No | Whether to use a circle indexer.<br>The default value is **true** for wearables and **false** for other device types. This attribute is invalid if **indexer** is set to **false**.|
| indexermulti<sup>5+</sup> | boolean | false | No | Whether to use a multi-language indexer.<br>This attribute is invalid if **indexer** is set to **false**. |
| indexerbubble<sup>5+</sup> | boolean | true | No | Whether to display the bubble effect when switching among indexes.<br>This attribute is invalid if **indexer** is set to **false**. |
| divider<sup>5+</sup> | boolean | false | No | Whether list items are separated by dividers.<br>For details about divider styles, see **divider-color**, **divider-height**, **divider-length**, and **divider-origin** in the **Styles** table.|
| shapemode | string | default | No | Shape of the side scrollbar.<br>- **default**: not specified (following the theme).<br>- **rect**: rectangle.<br>- **round**: circle.|
| updateeffect | boolean | false | No | Whether a dynamic effect is displayed when an item in the list is deleted or added.<br>- **false**: No dynamic effect is displayed.<br>- **true**: A dynamic effect is displayed when an item is added or deleted.|
| chainanimation<sup>5+</sup> | boolean | false | No | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>- **false**: Chained animations are displayed.<br>- **true**: No chained animation is displayed.<br>Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>This attribute does not take effect if an indexer is used.<br>If this attribute is **true**, the **sticky** attributes set for **\<list-item>** components do not take effect.|
| initialindex | number | 0 | No | Item displayed at the start position of the viewport when the current list is loaded for the first time. The default value is **0**, indicating that the first item is displayed. If the number you set is greater than the index of the last item, the setting does not take effect. When the **initialoffset** attribute is set, this attribute does not take effect. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**.|
| initialoffset | &lt;length&gt; | 0 | No | Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**.|
| selected<sup>5+</sup> | string | - | No | Selected item in the current list. The value can be a **section** value of any list items.|
| Name | Type | Default Value | Mandatory | Description |
| ---------------- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ |
| scrollpage | boolean | false | No | Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be **true** (scrolls the non-list part out) or **false** (does not scroll the non-list part out). This attribute is not available when the direction is **row**. |
| cachedcount | number | 0 | No | Minimum number of cached list items when the long list is loaded with delay.When the number of list items cached outside the visible area is less than the value of this attribute, a **requestitem** event is triggered. |
| scrollbar | string | off | No | Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.) <br>- **off**: No display <br>- **auto**: Displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.) <br>- **on**: Always displayed |
| scrolleffect | string | spring | No | Scroll effect. Available values are as follows: <br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. <br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance. <br>- **no**: No effect after the scrollbar is moved to the edge. |
| indexer | boolean \| Array\<string> | false | No | Whether to display the alphabetical index bar on the sidebar. If this attribute is set to **true** or a customized indexer, the index bar is displayed at the right boundary of the list. Example:<br>**"indexer" : "true"** indicates the default alphabetical indexer.<br>**"indexer" : "false"** indicates no indexer.<br>"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include **"#"** when using a customized indexer.<br>NOTE:<br>- This attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.<br>- This attribute must be used together with the [section](js-components-container-list-item.md#section2907183951110) attribute of **\<list-item>**. |
| indexercircle<sup>5+</sup> | boolean | - | No | Whether to use a circle indexer.<br>The default value is **true** for wearables and **false** for other device types. This attribute is invalid if **indexer** is set to **false**. |
| indexermulti<sup>5+</sup> | boolean | false | No | Whether to use a multi-language indexer.<br>This attribute is invalid if **indexer** is set to **false**. |
| indexerbubble<sup>5+</sup> | boolean | true | No | Whether to display the bubble effect when switching among indexes.<br>This attribute is invalid if **indexer** is set to **false**. |
| divider<sup>5+</sup> | boolean | false | No | Whether list items are separated by dividers.<br>For details about divider styles, see **divider-color**, **divider-height**, **divider-length**, and **divider-origin** in the [Styles](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/en/application-dev/nottoctopics/en-us_topic_0000001131154746.md#section1071433432218) table. |
| shapemode | string | default | No | Shape of the side scrollbar. <br>- **default**: not specified (following the theme) <br>- **rect**: rectangle <br>- **round**: circle |
| updateeffect | boolean | false | No | Whether a dynamic effect is displayed when an item in the list is deleted or added. <br>- **false**: No dynamic effect is displayed. <br>- **true**: A dynamic effect is displayed when an item is added or deleted. |
| chainanimation<sup>5+</sup> | boolean | false | No | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics. <br>- **false**: Chained animations are displayed. <br>- **true**: No chained animation is displayed.<br>NOTE:<br> - Dynamic modification is not supported.<br> - This attribute does not take effect if an indexer is used.<br> - If this attribute is **true**, the **sticky** attributes set for **\<list-item>** components do not take effect. |
| initialindex | number | 0 | No | Item to be displayed at the start position of the viewport when the current list is loaded for the first time. The default value is **0**, indicating that the first item is displayed.<br> The setting does not take effect in any of the following cases:<br>- The value you set is greater than the index of the last item.<br>- The **initialoffset** attribute is set. <br>- **indexer** or **scrollpage** is set to **true**. |
| initialoffset | \<length> | 0 | No | Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**. |
| selected<sup>5+</sup> | string | - | No | Selected item in the current list. The value can be a **section** value of any list items. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
| divider-color<sup>5+</sup> | &lt;color&gt; | transparent | No | Item divider color. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-height<sup>5+</sup> | &lt;length&gt; | 1 | No | Item divider height. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-length<sup>5+</sup> | &lt;length&gt; | Main axis width | No | Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the **divider-origin** parameter. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
| divider-origin<sup>5+</sup> | &lt;length&gt; | 0 | No | Item divider offset relative to the start point of the main axis. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
| flex-direction | string | column | No | Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: The y-axis is the main axis.<br>- **row**: The x-axis is the main axis.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**.|
| columns | number | 1 | No | Number of columns displayed in the cross axis direction of the list. The default value is **1**.<br>When multiple columns are set, the columns are evenly distributed on the cross axis of the **\<list>** component. The size of each column is the same.|
| align-items | string | stretch | No | Alignment of items in each column on the cross axis. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>This style takes effect only on items of each column. Columns are evenly distributed.|
| item-extent | &lt;length&gt; \| &lt;percentage&gt; | - | No | Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint.|
| fade-color | &lt;color&gt; | grey | No | Color of the physical dynamic effect. This attribute is valid only when **scrolleffect** is set to **fade**. |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the scrollbar. |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | No | Width of the scrollbar. |
| scrollbar-offset<sup>6+</sup> | &lt;length&gt; | 0 | No | Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped.|
| Name | Type | Default Value | Mandatory | Description |
| ------------------ | ------------------------ | ------------------- | --------- | ------------------------------------------------------------ |
| divider-color<sup>5+</sup> | \<color> | transparent | No | Item divider color. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-height<sup>5+</sup> | \<length> | 1 | No | Item divider height. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-length<sup>5+</sup> | \<length> | The main axis width | No | Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the **divider-origin** parameter. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-origin<sup>5+</sup> | \<length> | 0 | No | Item divider offset relative to the start point of the main axis. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| flex-direction | string | column | No | Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: The y-axis is the maim axis.<br>- **row**: The x-axis is the main axis.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**. |
| columns | number | 1 | No | Number of columns displayed in the cross axis direction of the list. The default value is **1**.<br>NOTE:<br>When multiple columns are set, the columns are evenly distributed on the cross axis of the **\<list>** component. The size of each column is the same. |
| align-items | string | stretch | No | Alignment of items in each column on the cross axis. Available values are as follows: <br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction. <br>- **flex-start**: Items are aligned to the start of the cross axis. <br>- **flex-end**: Items are aligned to the end of the cross axis. <br>- **center**: Items are aligned in the middle of the cross axis.NOTE:This style takes effect only on items of each column. Columns are evenly distributed. |
| item-extent | \<length> \| \<percentage> | - | No | Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint. |
| fade-color | \<color> | grey | No | Color of the physical dynamic effect. This attribute is valid only when **scrolleffect** is set to **fade**. |
| scrollbar-color<sup>6+</sup> | \<color> | - | No | Color of the scrollbar. |
| scrollbar-width<sup>6+</sup> | \<length> | - | No | Width of the scrollbar. |
| scrollbar-offset<sup>6+</sup> | \<length> | 0 | No | Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped. |
## Events ## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| -------------------------- | ---------------------------------------- | ---------------------------------------- |
| indexerchange<sup>5+</sup> | { local: booleanValue } | Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both **indexer** and **indexermulti** are set to **true**. The values of **booleanValue** can be:<br>- **true**: The local index is displayed.<br>- **false**: The alphabetic index is displayed.|
| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | Triggered to indicate the offset and status of list scrolling.<br>**stateValue: 0**: The list is not scrolling.<br>**stateValue: 1**: The list is scrolling along with user's touches.<br>**stateValue: 2**: The list is scrolling after the touches stop.|
| scrollbottom | - | Triggered when the list is scrolled to the bottom. |
| scrolltop | - | Triggered when the list is scrolled to the top. |
| scrollend | - | Triggered when the list stops scrolling. |
| scrolltouchup | - | Triggered when the list continues scrolling after the user lifts their fingers. |
| requestitem | - | Triggered for a request to create a list-item.<br>This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay.|
| rotate<sup>7+</sup> | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. |
| Name | Parameter | Description |
| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| indexerchange<sup>5+</sup> | { local: booleanValue } | Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both **indexer** and **indexermulti** are set to **true**. The value of **booleanValue** can be: <br>- **true**: The local index is displayed. <br>- **false**: The alphabetic index is displayed. |
| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | Triggered to indicate the offset and status of list scrolling. <br>- **stateValue: 0**: The list is not scrolling.<br>- **stateValue: 1**: The list is scrolling along with user's touches. <br>- **stateValue: 2**: The list is scrolling after the touches stop. |
| scrollbottom | - | Triggered when the list is scrolled to the bottom. |
| scrolltop | - | Triggered when the list is scrolled to the top. |
| scrollend | - | Triggered when the list stops scrolling. |
| scrolltouchup | - | Triggered when the list continues scrolling after the user lifts their fingers. |
| requestitem | - | Triggered for a request to create a list-item.This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay. |
| rotate<sup>7+</sup> | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. |
## Methods ## Methods
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name | Parameter | Description |
| ------------- | ---------------------------------------- | ---------------------------------------- |
| Name | Parameter | Description | | scrollTo | { index: number(specified position) } | Scrolls the list to the position of the item at the specified index. |
| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | scrollTop | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the top.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the top.|
| scrollTo | { index: number(specified position) } | Scrolls the list to the position of the item at the specified index. | | scrollBottom | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the bottom.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the bottom.|
| scrollBy | [ScrollParam](js-components-container-list.md#t54327f53ea104788bc430b9047ecb47b) | Scrolls the list for a certain distance.<br>This method applies only to smart TVs. | | scrollPage | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.<br>If **reverse** is set to **true**, the previous page is displayed. If there is no previous page, the list scrolls to the top.<br>If **smooth** is set to **false** (default value), the list is directly scrolled to another page.<br>If **smooth** is set to **true**, the list is smoothly scrolled to another page.|
| scrollTop | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the top.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the top. | | scrollArrow | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.<br>If **reverse** is set to **true**, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.<br>If **smooth** is set to **false** (default value), the list is directly scrolled.<br>If **smooth** is set to **true**, the list is smoothly scrolled.|
| scrollBottom | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the bottom.<br/>If **smooth** is set to **true**, the list is smoothly scrolled to the bottom. | | collapseGroup | { groupid: string } | Collapses a group.<br>**groupid**: ID of the group to collapse.<br>All groups are collapsed when **groupid** is not specified.|
| scrollPage | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the next page is displayed.If there is no next page, the list scrolls to the bottom.<br/>If **reverse** is set to **true**, the previous page is displayed. If there is no previous page, the list scrolls to the top.<br/>If **smooth** is set to **false** (default value), the list is directly scrolled to another page.<br/>If **smooth** is set to **true**, the list is smoothly scrolled to another page. | | expandGroup | { groupid: string } | Expands a group.<br>**groupid**: ID of the group to expand.<br>All groups are expanded when **groupid** is not specified.|
| scrollArrow | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.<br/>If **reverse** is set to **true**, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.<br/>If **smooth** is set to **false** (default value), the list is directly scrolled.<br/>If **smooth** is set to **true**, the list is smoothly scrolled. | | currentOffset | - | Returns the offset of the current scrolling. The return value type is Object. For details, see **currentOffset**.|
| collapseGroup | { groupid: string } | Collapses a group.<br/>**groupid**: ID of the group to collapse.<br/>All groups are collapsed when **groupid** is not specified. |
| expandGroup | { groupid: string } | Expands a group.<br/>**groupid**: ID of the group to expand.<br/>All groups are expanded when **groupid** is not specified. | **Table 1** currentOffset
| currentOffset | - | Returns the offset of the current scrolling. The return value type is **Object**. For details, see [Table 2](js-components-container-list.md). |
| Name | Type | Remarks |
**Table 1** ScrollParam | ---- | ------ | ---------------- |
| x | number | Scrolling offset in the x-axis, in px|
| y | number | Scrolling offset in the y-axis, in px|
| Name | Type | Mandatory | Default Value | Remarks | ## Example
| ------ | ------- | --------- | ------------- | ------------------------------------------------------------ |
| dx | number | No | 0 | Offset for scrolling the list in the horizontal direction, in px. | ```html
| dy | number | No | 0 | Offset for scrolling the list in the vertical direction, in px. | <!-- index.hml -->
| smooth | boolean | No | true | Whether a sliding animation is displayed when the list position is changed. | <div class="container">
<list class="todo-wrapper">
**Table 2** Attributes of the currentOffset return object <list-item for="{{todolist}}" class="todo-item">
<div style="flex-direction: column;align-items: center;justify-content: center;">
<text class="todo-title">{{$item.title}}</text>
<text class="todo-title">{{$item.date}}</text>
| Name | Type | Remarks | </div>
| ---- | ------ | ------------------------------------- | </list-item>
| x | number | Scrolling offset in the x-axis, in px | </list>
| y | number | Scrolling offset in the y-axis, in px | </div>
\ No newline at end of file ```
```css
/* index.css */
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.todo-wrapper {
width: 100%;
height: 300px;
}
.todo-item {
width: 100%;
height: 120px;
justify-content:center;
}
.todo-title {
width: 100%;
height: 80px;
text-align: center;
}
```
```js
// index.js
export default {
data: {
todolist: [{
title: 'Prepare for the interview',
date: '2021-12-31 10:00:00'
}, {
title: 'Watch the movie',
date: '2021-12-31 20:00:00'
}],
},
}
```
![en-us_image_0000001185033226](figures/en-us_image_0000001185033226.png)
en/application-dev/reference/arkui-js/js-components-container-panel.md
浏览文件 @ 75c6681c
# panel # panel
The **\<panel>** component is a slidable panel. It provides a lightweight content display window with flexible sizes. The **\<panel>** component pops up when it is displayed. > **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components The **\<panel>** component is a slidable, pop-up component that provides a lightweight content display window with flexible sizes.
Yes
## Attributes ## Child Components
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 | Triggered when | | Name | Type | Default Value | Mandatory | Description |
| ---------- | --------- | ------------- | --------- | ------------------------------------------------------------ | | ---------- | -------------- | -------- | ---- | ---------------------------------------- |
| type | string | foldable | Yes | Type of the slidable panel. This attribute cannot be dynamically changed. Available values are as follows: <br>- **minibar**: A minibar panel displays content in the minibar area or a large (fullscreen-like) area. <br>- **foldable**: A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area. <br>- **temporary**: A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area. | | type | string | foldable | Yes | Type of the slidable panel. This attribute cannot be dynamically changed. Available values are as follows:<br>- **minibar**: A minibar panel displays content in the minibar area or a large (fullscreen-like) area.<br>- **foldable**: A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.<br>- **temporary**: A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.|
| mode | string | full | No | Initial status of the slidable panel. Available values are as follows: <br>- **mini**: Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels. <br>- **half**: Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels. <br>- **full**: Displays a panel in a large (fullscreen-like) area. | | mode | string | full | No | Initial status of the slidable panel. Available values are as follows:<br>1. **mini**: Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels.<br>2. **half**: Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels.<br>3. **full**: Displays a panel in a large (fullscreen-like) area.|
| dragbar | boolean | true | No | Whether to enable a drag bar. The value **true** indicates that the drag bar will be displayed, and **false** indicates the opposite. | | dragbar | boolean | true | No | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite. |
| fullheight | \<length> | - | No | Panel height in the **full** mode. The default value is the screen height minus 8 px. | | fullheight | &lt;length&gt; | - | No | Panel height in the **full** mode. The default value is the screen height minus 8 px. |
| halfheight | \<length> | - | No | Panel height in the **half** mode. The default value is half of the screen height. | | halfheight | &lt;length&gt; | - | No | Panel height in the **half** mode. The default value is half of the screen height. |
| miniheight | \<length> | - | No | Panel height in the **mini** mode. The default value is **48px**. | | miniheight | &lt;length&gt; | - | No | Panel height in the **mini** mode. The default value is **48px**. |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> - Rendering attributes, including **for**, **if**, and **show**, are not supported.
> >
> - Rendering attributes, including **for**, **if**, and **show**, are not supported. > - The **focusable** and **disabled** attributes are not supported.
> - The **focusable** and **disabled** attributes are not supported.
## Styles ## Styles
Only the following style attributes are supported. Only the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| ---------------------------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- |
| Name | Type | Default Value | Mandatory | Triggered when | | padding | &lt;length&gt; | 0 | No | The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| ----------------------------------------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No | Left, top, right, and bottom padding. |
| padding | \<length> | 0 | No | The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order). | | padding-[start\|end] | &lt;length&gt; | 0 | No | Start and end padding. |
| padding-[left\|top\|right\|bottom] | \<length> | 0 | No | Left, top, right, and bottom padding. | | margin | &lt;length&gt; | 0 | No | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| padding-[start\|end] | \<length> | 0 | No | Start and end padding. | | margin-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No | Left, top, right, and bottom margins. |
| margin | \<length> | 0 | No | Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.<br>- If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.<br>- If you set four values, they are margins for top, right, bottom, and left sides, respectively. | | margin-[start\|end] | &lt;length&gt; | 0 | No | Start and end margins. |
| margin-[left\|top\|right\|bottom] | \<length> | 0 | No | Left, top, right, and bottom margins. | | border | - | 0 | No | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| margin-[start\|end] | \<length> | 0 | No | Start and end margins. | | border-style | string | solid | No | Shorthand attribute to set the style for all borders. Available values are as follows:<br>- **dotted**: dotted border. The radius of a dot is half of **border-width**.<br>- **dashed**: dashed border.<br>- **solid**: solid border.|
| border | - | 0 | No | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set. | | border-[left\|top\|right\|bottom]-style | string | solid | No | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**.|
| border-style | string | solid | No | Shorthand attribute to set the style for all borders. Available values are as follows: <br>- **dotted**: dotted border. The radius of a dot is half of **border-width**. <br>- **dashed**: dashed border <br>- **solid**: solid border | | border-[left\|top\|right\|bottom] | - | - | No | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-[left\|top\|right\|bottom]-style | string | solid | No | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**. | | border-width | &lt;length&gt; | 0 | No | Shorthand attribute to set the width for all borders, or separately set the width for each border. |
| border-[left\|top\|right\|bottom] | - | - | No | Shorthand attribute to set the borders for every side respectively. You set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set. | | border-[left\|top\|right\|bottom]-width | &lt;length&gt; | 0 | No | Attribute to set widths of left, top, right, and bottom borders. |
| border-width | \<length> | 0 | No | Shorthand attribute to set the width of all borders, or separately set the width of each border. | | border-color | &lt;color&gt; | black | No | Shorthand attribute to set the color for all borders, or separately set the color for each border. |
| border-[left\|top\|right\|bottom]-width | \<length> | 0 | No | Attribute to set widths of left, top, right, and bottom borders. | | border-[left\|top\|right\|bottom]-color | &lt;color&gt; | black | No | Attribute to set colors for left, top, right, and bottom borders. |
| border-color | \<color> | black | No | Shorthand attribute to set the color of all borders, or separately set the color of each border. | | border-radius | &lt;length&gt; | - | No | Attribute to set the radius of round-corner borders. This attribute cannot be used to set the width or color of a specific border. To set the width or color, you must set **border-width** or **border-color** for all the borders at the same time. |
| border-[left\|top\|right\|bottom]-color | \<color> | black | No | Attribute to set colors of left, top, right, and bottom borders. | | border-[top\|bottom]-[left\|right]-radius | &lt;length&gt; | - | No | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
| border-radius | \<length> | - | No | Attribute to set the radius of round-corner borders. This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set **border-width** or **border-color** for all the borders at the same time. | | background | &lt;linear-gradient&gt; | - | No | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
| border-[top\|bottom]-[left\|right]-radius | \<length> | - | No | Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners | | background-color | &lt;color&gt; | - | No | Background color. |
| background | \<linear-gradient> | - | No | This attribute supports [Gradient Styles](js-components-common-gradient.md) only but is not compatible with **background-color** or **background-image**. | | background-image | string | - | No | Background image. This attribute is not compatible with **background-color** or **background**. Local image resources are supported. |
| background-color | \<color> | - | No | Background color. | | background-size | - string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | auto | No | Background image size.<br>- The **string** values are as follows:<br> - **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: Retains the original aspect ratio of the image.<br>- The two **length** values are width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- The two **percentage** values are width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
| background-image | string | - | No | Background image. Currently, this attribute is not compatible with **background-color** or **background**. Local image resources are supported. | | background-repeat | string | repeat | No | Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along the x-axis and y-axis at the same time.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
| background-size | - string<br>- \<length> \<length><br>- \<percentage> \<percentage> | auto | No | Background image size.<br>- The **string** values are as follows: <br> - **contain**: Expands the image to the maximum size so that the height and width of the image are applicable to the content area. <br> - **cover**: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area. <br> - **auto**: The original image width-height ratio is retained.<br>- The two **\<length>** values are as follows:Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- The two **\<percentage>** values are as follows:Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. | | background-position | - string string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | 0px 0px | No | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center position.<br>- Using **length** values: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>- Using **percentage** values: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>- Using both **percentage** and **length** values.|
| background-repeat | string | repeat | No | Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically. <br>- **repeat**: Repeatedly draws images along the x-axis and y-axis at the same time. <br>- **repeat-x**: Repeatedly draws images along the x-axis. <br>- **repeat-y**: Repeatedly draws images along the y-axis. <br>- **no-repeat**: The image is not drawn repeatedly. | | opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| background-position | - string string<br/>- \<length> \<length><br/>- \<percentage> \<percentage> | 0px 0px | No | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction<br> - **right**: rightmost in the horizontal direction<br> - **top**: top in the vertical direction<br> - **bottom**: bottom in the vertical direction<br> - **center**: center position<br>- Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0 0** indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is **50%**.<br>- Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>- Using both **\<percentage>** and **\<length>**. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
## Events ## Events
The following events are supported. The following events are supported.
| Name | Parameter | Description |
| ---------- | ---------------------------------------- | ---------------------------------------- |
| sizechange | { size: { height: heightLength, width: widthLength }, mode: modeStr } | Triggered when the status of the slidable panel changes. Available **mode** values are as follows:<br>- **mini**: Displays a **minibar** or **foldable** panel in its minimum size.<br>- **half**: Displays a **foldable** panel in a medium-sized (halfscreen-like) area.<br>- **full**: Displays a panel in a large (fullscreen-like) area.<br>The returned **height** value indicates the content area height. However, when the **dragbar** attribute is **true**, the **height** value is the height of the drag bar plus that of the content area.|
| Name | Parameter | Triggered when |
| ---------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| sizechange | { size: { height: heightLength, width: widthLength }, mode: modeStr } | Triggered when the status of the slidable panel changes. Available **mode** values are as follows: <br>- **mini**: Displays a **minibar** or **foldable** panel in its minimum size. <br>- **half**: Displays a **foldable** panel in a medium-sized (halfscreen-like) area. <br>- **full**: Displays a panel in a large (fullscreen-like) area.NOTE:The returned **height** value indicates the content area height. However, when the **dragbar** attribute is **true**, the **height** value is the height of the drag bar plus that of the content area. |
## Methods ## Methods
Only the following methods are supported. The following methods are supported.
| Name | Parameter | Description |
| ----- | ---- | ------------- |
| show | - | Pops the slidable panel up.|
| close | - | Closes the slidable panel that has been popped up.|
| Name | Parameter | Triggered when |
| ----- | --------- | -------------------------------------------------- |
| show | - | Pops the slidable panel up. |
| close | - | Closes the slidable panel that has been popped up. |
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<div class="btn-div"> <div class="btn-div">
<button type="capsule" value="Click here" onclick="showPanel"></button> <button type="capsule" value="Click here" onclick="showPanel"></button>
</div>
<panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button>
</div>
</div> </div>
</panel> <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{ modeFlag }} mode</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button>
</div>
</div>
</panel>
</div> </div>
```
```js
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.btn-div { .btn-div {
width: 100%; width: 100%;
height: 200px; height: 200px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.txt { .txt {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
font-size: 39px; font-size: 39px;
} }
.panel-div { .panel-div {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.inner-txt { .inner-txt {
width: 100%; width: 100%;
height: 160px; height: 160px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.inner-btn { .inner-btn {
width: 100%; width: 100%;
height: 120px; height: 120px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -151,4 +164,4 @@ export default { ...@@ -151,4 +164,4 @@ export default {
} }
``` ```
![img](figures/panel6.gif) ![panel6](figures/panel6.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-popup.md
浏览文件 @ 75c6681c
# popup # popup
The **\<popup>** component is used to display a pop-up to offer instructions after a user clicks a bound control. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
Bubble indication. The **\<popup>** component is used to display a pop-up to offer instructions after a user clicks a bound control.
## Required Permissions ## Required Permissions
None None
## Child Components
All child components are supported. Each **\<popup>** can have only one child component<sup>5+</sup>. ## Child Components
## Attributes This component supports only one child component.<sup>5+</sup>
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 | | Name| Type| Default Value| Mandatory| Description|
| ------------- | -------- | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| target | string | - | Yes | ID of the target element. Dynamic switch is not supported. | | target | string | - | Yes| ID of the target element. Dynamic switch is not supported.|
| placement | string | bottom | No | Position of the pop-up. Available values are as follows: <br>- **left**: The pop-up is displayed on the left of the target item. <br>- **right**: The pop-up is displayed on the right of the target item. <br>- **top**: The pop-up is displayed at the top of the target item. <br>- **bottom**: The pop-up is displayed at the bottom of the target item. <br>- **topLeft**: The pop-up is displayed on the upper left of the target item. <br>- **topRight**: The pop-up is displayed on the upper right of the target item. <br>- **bottomLeft**: The pop-up is displayed on the bottom left of the target item. <br>- **bottomRight**: The pop-up is displayed on the bottom right of the target item. | | placement | string | bottom | No| Position of the pop-up. Available values are as follows:<br>- **left**: The pop-up is displayed on the left of the target item.<br>- **right**: The pop-up is displayed on the right of the target item.<br>- **top**: The pop-up is displayed at the top of the target item.<br>- **bottom**: The pop-up is displayed at the bottom of the target item.<br>- **topLeft**: The pop-up is displayed on the upper left of the target item.<br>- **topRight**: The pop-up is displayed on the upper right of the target item.<br>- **bottomLeft**: The pop-up is displayed on the bottom left of the target item.<br>- **bottomRight**: The pop-up is displayed on the bottom right of the target item.|
| keepalive<sup>5+</sup> | boolean | false | No | Whether to retain this pop-up. <br>- **true**: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, you need to call the **hide** method. <br>- **false**: The pop-up disappears when users tap other areas or switch the page. | | keepalive<sup>5+</sup> | boolean | false | No| Whether to retain this pop-up. **true**: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, call the **hide** method.<br>**false**: The pop-up disappears when users tap other areas or switch the page.|
| clickable<sup>5+</sup> | boolean | true | No | Whether to display the pop-up when users click the bound control. If this parameter is set to **false**, the pop-up can be triggered only by a method call. | | clickable<sup>5+</sup> | boolean | true | No| Whether to display the pop-up when users click the bound control. If this parameter is set to **false**, the pop-up can be triggered only by a method call.|
| arrowoffset<sup>5+</sup> | \<length> | 0 | No | Offset of the pop-up arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction. | | arrowoffset<sup>5+</sup> | &lt;length&gt; | 0 | No| Offset of the pop-up arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction.|
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> >
> - The **focusable** attribute is not supported. > The **focusable** attribute is not supported.
## 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 | | Name| Type| Default Value| Mandatory| Description|
| ---------- | -------- | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| mask-color | \<color> | - | No | Color configuration of the mask layer. By default, the mask layer is completely transparent. | | mask-color | &lt;color&gt; | - | No| Color configuration of the mask layer. By default, the mask layer is completely transparent.|
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> >
> - Position-related styles are not supported. > Position-related styles are not supported.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. ## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| visibilitychange | { visibility: boolean } | Triggered when a pop-up appears or disappears.|
| Name | Parameters | Description |
| ---------------- | ----------------------- | ---------------------------------------------- |
| visibilitychange | { visibility: boolean } | Triggered when a pop-up appears or disappears. |
## Methods ## Methods
Only the following methods are supported. The following methods are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| show<sup>5+</sup> | - | Shows the pop-up.|
| hide<sup>5+</sup> | - | Hides the pop-up.|
> **NOTE**
| Name | Parameters | Description |
| ------ | ---------- | ------------------ |
| show<sup>5+</sup> | - | Pops up a message. |
| hide<sup>5+</sup> | - | Hides a pop-up. |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
>
> 1. Attributes and styles of a **\<popup>** component cannot be dynamically updated. > 1. Attributes and styles of a **\<popup>** component cannot be dynamically updated.
>
> 2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect. > 2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect.
>
> 3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style (in the sequence of left, top, right, and bottom) takes effect. Otherwise, the **border** attribute does not take effect. > 3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style (in the sequence of left, top, right, and bottom) takes effect. Otherwise, the **border** attribute does not take effect.
>
> 4. The click event bound to the target element of a pop-up does not take effect. > 4. The click event bound to the target element of a pop-up does not take effect.
## Example Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text id="text">Click to show the pop-up</text> <text id="text">Click to show the pop-up</text>
<!-- popup supports single child of any type<sup>5+</sup> --> <!-- popup supports single child of any type5+ -->
<popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true" <popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true"
arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup"> arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup">
<text class="text">Text content of the pop-up</text> <text class="text">Text content of the pop-up</text>
</popup> </popup>
<button class="button" onclick="showpopup">Click to show the pop-up</button> <button class="button" onclick="showpopup">Click to show the pop-up</button>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -100,13 +107,16 @@ Only the following methods are supported. ...@@ -100,13 +107,16 @@ Only the following methods are supported.
height: 70px; height: 70px;
margin-top: 50px; margin-top: 50px;
} }
```
```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
visibilitychange(e) { visibilitychange(e) {
prompt.showToast({ prompt.showToast({
message: 'visibility change visibility: ' + e.visibility, message: 'visibility change visibility: ' + e.visibility,
duration: 3000, duration: 3000
}); });
}, },
showpopup() { showpopup() {
...@@ -114,8 +124,8 @@ export default { ...@@ -114,8 +124,8 @@ export default {
}, },
hidepopup() { hidepopup() {
this.$element("popup").hide(); this.$element("popup").hide();
}, }
} }
``` ```
![img](figures/en-us_image_0000001178886129.png) ![en-us_image_0000001178886129](figures/en-us_image_0000001178886129.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-refresh.md
浏览文件 @ 75c6681c
# refresh # refresh
The **\<refresh>** component is used to pull down to refresh the page. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **<Refresh\>** component is used to refresh a page through a pull-down gesture.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Supported Supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| offset | &lt;length&gt; | - | No| Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
| refreshing | boolean | false | No| Whether the **\<refresh>** component is being used for refreshing.|
| type | string | auto | No| Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically.<br>- **auto**: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed.<br>- **pulldown**: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set **scrolleffect** of the list to **no** to prevent drop-down effect conflicts.|
| lasttime | boolean | false | No| Whether to display the last update time. The character string format is **last update time: XXXX**, where **XXXX** is displayed based on the certain time and date formats and cannot be dynamically modified. (It is recommended that this attribute be used when **type** is set to **pulldown**. The fixed distance is at the bottom of the content drop-down area. Pay attention to the **offset** attribute setting to prevent overlapping.)|
| timeoffset<sup>6+</sup> | &lt;length&gt; | - | No| Distance between the update time and the top of the parent component.|
| friction | number | 42 | No| Pull-down friction coefficient. The value ranges from 0 to 100. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * **friction**% px.|
| Name | Type | Default Value | Mandatory | Description |
| ------------ | -------- | ------------- | --------- | ------------------------------------------------------------ |
| offset | \<length> | - | No | Distance to the top of the parent component from the **\<refresh>** component that comes to rest after a successful swipe gesture. |
| refreshing | boolean | false | No | Whether the **\<refresh>** component is being used for refreshing. |
| type | string | auto | No | Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically. <br>- **auto**: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed. <br>- **pulldown**: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set **scrolleffect** of the list to **no** to prevent drop-down effect conflicts. |
| lasttime | boolean | false | No | Whether to display the last update time. The character string format is **last update time: XXXX**, where **XXXX** is displayed based on the time and date display specifications and cannot be dynamically modified. (It is recommended that this attribute be used when **type** is set to **pulldown**. The fixed distance is at the bottom of the content drop-down area. Pay attention to the **offset** attribute setting to prevent overlapping.) |
| timeoffset<sup>6+</sup> | \<length> | - | No | Sets the distance between the update time and the top of the parent component. |
| friction | number | 42 | No | Pull-down friction coefficient. The value ranges from **0** to **100**. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * **friction**% px. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| background-color | &lt;color&gt; | white | No| Background color of the **\<refresh>** component.|
| progress-color | &lt;color&gt; | black | No| Loading color of the **\<refresh>** component.|
| Name | Type | Default Value | Mandatory | Description |
| ---------------- | -------- | ------------- | --------- | ------------------------------------------------- |
| background-color | \<color> | white | No | Background color of the **\<refresh>** component. |
| progress-color | \<color> | black | No | Loading color of the **\<refresh>** component. |
## Events ## Events
The following events are supported. The following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| refresh | { refreshing: refreshingValue } | Triggered when the **\<refresh>** component is pulled down and the refresh status changes. Available values are as follows:<br>- **false**: The **\<refresh>** component is being pulled down.<br>- **true**: The **\<refresh>** component is not being pulled down.|
| pulldown | { state: string } | Triggered when a user starts or stops pulling down the **\<refresh>** component. Available values are as follows:<br>- **start**: The pull-down starts.<br>- **end**: The pull-down ends.|
| Name | Parameter | Description |
| -------- | ------------------------------- | ------------------------------------------------------------ |
| refresh | { refreshing: refreshingValue } | Triggered when the **\<refresh>** component is pulled down and the refresh status changes. Available values are as follows: <br>- **false**: The **\<refresh>** component is being pulled down. <br>- **true**: The **\<refresh>** component is not being pulled down. |
| pulldown | { state: string } | Triggered when a user starts or stops pulling down the **\<refresh>** component. Available values are as follows: <br>- **start**: The pull-down starts. <br>- **end**: The pull-down ends. |
## Methods ## Methods
Methods in [Universal Methods](js-components-common-methods.md) are not supported. The [universal methods](../arkui-js/js-components-common-methods.md) are not supported.
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh"> <refresh refreshing="{{fresh}}" onrefresh="refresh">
...@@ -66,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte ...@@ -66,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
</list> </list>
</refresh> </refresh>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -96,6 +103,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte ...@@ -96,6 +103,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
font-size: 35px; font-size: 35px;
font-weight: bold; font-weight: bold;
} }
```
```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -106,7 +116,7 @@ export default { ...@@ -106,7 +116,7 @@ export default {
onInit() { onInit() {
this.list = []; this.list = [];
for (var i = 0; i <= 3; i++) { for (var i = 0; i <= 3; i++) {
var item ='List element' + i; var item ='List element' + i;
this.list.push(item); this.list.push(item);
} }
}, },
...@@ -128,4 +138,4 @@ export default { ...@@ -128,4 +138,4 @@ export default {
} }
``` ```
![img](figures/en-us_image_0000001150719520.gif) ![en-us_image_0000001150719520](figures/en-us_image_0000001150719520.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 75c6681c
...@@ -19,9 +19,9 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb ...@@ -19,9 +19,9 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**| | fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**| | direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.| | distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. |
## PanDirection enums ## PanDirection
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
......
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 75c6681c
...@@ -428,7 +428,7 @@ struct LineDashOffset { ...@@ -428,7 +428,7 @@ struct LineDashOffset {
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0 this.context.lineDashOffset = 10.0
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas. ...@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas.
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -802,6 +802,7 @@ Draws filled text on the canvas. ...@@ -802,6 +802,7 @@ Draws filled text on the canvas.
| text | string | Yes | '' | Text to draw. | | text | string | Yes | '' | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width allowed for the text. |
**Example** **Example**
...@@ -2268,7 +2269,7 @@ struct CanvasGetLineDash { ...@@ -2268,7 +2269,7 @@ struct CanvasGetLineDash {
.onReady(() => { .onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.stroke(); this.context.stroke()
let res = this.context.getLineDash() let res = this.context.getLineDash()
}) })
} }
...@@ -2407,8 +2408,7 @@ Restores the saved drawing context. ...@@ -2407,8 +2408,7 @@ Restores the saved drawing context.
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
......
en/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 75c6681c
# Combined Gestures # Combined Gestures
Continuous recognition, parallel recognition, and exclusive recognition are supported for A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures.
> **NOTE** > **NOTE**
> >
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 75c6681c
...@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse ...@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- | | ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.| | offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. | | color | string | Yes | '#ffffff' | Gradient color to set. |
**Example** **Example**
......
en/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 75c6681c
...@@ -41,7 +41,7 @@ Use the following attributes to bind gesture recognition to a component. When a ...@@ -41,7 +41,7 @@ Use the following attributes to bind gesture recognition to a component. When a
## Gesture Response Event ## Gesture Response Event
The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definitions of other gestures, see the corresponding gesture sections. The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definitions of other gestures, see the corresponding gesture sections. To bind multiple gestures, use [combined gestures](ts-combined-gestures.md).
- TapGesture - TapGesture
| Name| Description| | Name| Description|
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或