Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 8e42f079 编写于 作者: E ester.zhou 提交者： Gitee
浏览文件
操作

Merge branch 'OpenHarmony-3.1-Release' of gitee.com:openharmony/docs into C1-1215 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 47d9c930 9944c243
显示空白变更内容
内联 并排
Showing with 820 addition and 684 deletion
en/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ 8e42f079
# 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.
## Required Permissions ## Required Permissions
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](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. | | 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](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. | | 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. |
| 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. | | 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.|
**Table 2** ChartDataset **Table 2** ChartDataset
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| ----------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | | ----------- | ---------------------------------------- | -------- | ---- | ---------------------- |
| strokeColor | \<color> | #ff6384 | No | Line color.NOTE:Only line charts support this attribute. | | strokeColor | &lt;color&gt; | \#ff6384 | No | Stroke color. Only line charts support this attribute. |
| fillColor | \<color> | #ff6384 | No | Fill color. For line charts, the value indicates the gradient color to fill. | | fillColor | &lt;color&gt; | \#ff6384 | No | Fill color.<br>For line charts, the value indicates the gradient color to fill.|
| data | Array\<number> \| Array\<[Point](js-components-basic-chart.md)>5+ | - | Yes | Data of the drawn line or bar. | | data | Array&lt;number&gt; \| Array&lt;Point&gt;<sup>5+</sup> | - | 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. | | gradient | boolean | false | No | Whether to display the gradient color. 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.NOTE:Only line charts support negative numbers. | | min | number | 0 | No | Minimum value of the axis. Only line charts support negative numbers. |
| max | number | 100 | No | Maximum value of the axis.NOTE:Only line charts support negative numbers. | | max | number | 100 | No | Maximum value of the axis. Only line charts support negative numbers. |
| 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. | | 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.|
| display | boolean | false | No | Whether to display the axis. | | display | boolean | false | No | Whether to display the axis. |
| color | \<color> | #c0c0c0 | No | Axis color. | | color | &lt;color&gt; | \#c0c0c0 | No | Axis color. |
**Table 4** ChartSeries **Table 4** ChartSeries
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| ----------- | ---------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | | ----------- | -------------- | ---- | ---- | -------------------- |
| lineStyle | [ChartLineStyle](js-components-basic-chart.md) | - | No | Line style, such as the line width and whether the line is smooth. | | lineStyle | ChartLineStyle | - | No | Line style, such as the line width and whether the line is smooth. |
| headPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the white point at the start of the line. | | headPoint | PointStyle | - | No | Style and size of the white point at the start of the line. |
| topPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the top point. | | topPoint | PointStyle | - | No | Style and size of the top point. |
| bottomPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the bottom point. | | bottomPoint | PointStyle | - | 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. | | loop | ChartLoop | - | 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 | \<length> | 1px | No | Line width. | | width | &lt;length&gt; | 1px | No | Line width.|
| smooth | boolean | false | No | Whether the line is smooth. | | 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 | | shape | string | circle | No | Shape of the highlight point. Available values are as follows:<br>- circle<br>- square<br>- triangle|
| size | \<length> | 5px | No | Size of the highlight point. | | size | &lt;length&gt; | 5px | No | Size of the highlight point. |
| strokeWidth | \<length> | 1px | No | Stroke width. | | strokeWidth | &lt;length&gt; | 1px | No | Stroke width. |
| strokeColor | \<color> | #ff0000 | No | Frame color. | | strokeColor | &lt;color&gt; | \#ff0000 | No | Stroke color. |
| fillColor | \<color> | #ff0000 | No | Fill color. | | fillColor | &lt;color&gt; | \#ff0000 | No | Fill color. |
**Table 7** ChartLoop **Table 7** ChartLoop
| Name | Type | Default Value | Mandatory | Description | | 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. | | 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. | | gradient | boolean | false | No | Whether to perform gradient erase. |
**Table 8** Point5+ **Table 8** Point<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| ------------ | ------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | | ------------ | ------------- | -------- | ---- | ---------------------------------------- |
| value | number | 0 | Yes | Y coordinate of the point to draw. | | value | number | 0 | Yes | Y coordinate of the point to draw. |
| pointStyle | [PointStyle](js-components-basic-chart.md) | - | No | Style of the point. | | pointStyle | PointStyle | - | No | Style of the point. |
| description | string | - | No | Description text 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 | | 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 | \<color> | #000000 | No | Color of the description text. | | 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. 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. | | 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 | \<color> | #000000 | No | Line color. If this attribute is not set, the **strokeColor** is used by default. | | lineColor | &lt;color&gt; | \#000000 | No | Line color. If this attribute is not set, the value of **strokeColor** is used. |
**Table 9** DataSegment5+
**Table 9** DataSegment<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description | | 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. | | 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. | | 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 current data segment. The maximum value is **100**. | | value | number | 0 | Yes | Percentage for the data segment. The maximum value is **100**. |
| name | string | - | No | Name of this data segment. | | name | string | - | No | Name of the data segment. |
| Data Segment | Light Mode | Dark Mode | | Data Segment | Light Mode | Dark Mode |
| ------------ | ---------------------------------------- | ---------------------------------------- | | ---- | --------------------------- | --------------------------- |
| 0 | Start color: #f7ce00; end color: #f99b11 | Start color: #d1a738; end color: #eb933d | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 8 | Start color: \#a2a2b0; end color: \#8e8e93| Start color: \#8c8c99; end color: \#6b6b76|
For gauge charts, the following attribute is supported. For the **gauge** charts, the following attributes are also supported.
| Name | Type | Default Value | Mandatory | Description | | 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. | | 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
浏览文件 @ 8e42f079
# 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
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 |
| ---- | ------ | ------------- | --------- | ------------------------------------------------------------ | | ---- | ------ | ---- | ---- | ---------------------------------------- |
| 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. | | 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 | Placeholder image displayed during image loading. | | alt | string | - | No | Alternative information for the image, which is displayed during image loading. |
## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following style attributes 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 |
| -------------------- | ------- | ------------- | --------- | ------------------------------------------------------------ | | ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
| 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. | | 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. The SVG format is not supported. | | 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 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. | | 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-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. | | 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.|
**Table 1** Types of the object-fit style
**Table 1** object-fit
| Type | Description | | 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. | | 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. | | 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. | | 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. | | 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. | | 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: > **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. > - The SVG image will not be drawn if the length or width of the **\<image>** component is infinity.
> - 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 not specified in the SVG description, the SVG image 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: > - 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. > 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. > 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.
## 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 | | 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
浏览文件 @ 8e42f079
...@@ -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
浏览文件 @ 8e42f079
...@@ -171,19 +171,24 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -171,19 +171,24 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
{{ 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" <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> onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12" <picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
selected="{{ timeselect }}" hours="12"
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker> onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true" <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker> onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}" <picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
selected="{{ multitextselect }}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker> onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</div> </div>
``` ```
...@@ -195,16 +200,18 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -195,16 +200,18 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
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{
select {
background-color: #efecec; background-color: #efecec;
height: 50px; height: 50px;
width: 60%; width: 60%;
...@@ -219,68 +226,92 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -219,68 +226,92 @@ 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) { textoncancel(e) {
prompt.showToast({ message:"text: textoncancel" }) prompt.showToast({
message: "text: textoncancel"
})
}, },
dateonchange(e) { dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day; this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day }) prompt.showToast({
message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
})
}, },
dateoncancel() { dateoncancel() {
prompt.showToast({ message:"date: dateoncancel" }) prompt.showToast({
message: "date: dateoncancel"
})
}, },
timeonchange(e) { timeonchange(e) {
if(this.containsecond){ if (this.containsecond) {
this.timevalue=e.hour+":"+e.minute+":"+e.second; this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second }) prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
})
} else { } else {
this.timevalue=e.hour+":"+e.minute; this.timevalue = e.hour + ":" + e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute }) prompt.showToast({
}}, message: "Time:" + e.hour + ":" + e.minute
})
}
},
timeoncancel() { timeoncancel() {
prompt.showToast({ message:"timeoncancel" }) prompt.showToast({
message: "timeoncancel"
})
}, },
datetimeonchange(e) { datetimeonchange(e) {
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; 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 }) prompt.showToast({
message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
})
}, },
datetimeoncancel() { datetimeoncancel() {
prompt.showToast({ message:"datetimeoncancel" }) prompt.showToast({
message: "datetimeoncancel"
})
}, },
multitextonchange(e) { multitextonchange(e) {
this.multitextvalue=e.newValue; this.multitextvalue = e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue }) prompt.showToast({
message: "Multi-column text change" + e.newValue
})
}, },
multitextoncancel() { multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" }) prompt.showToast({
message: "multitextoncancel"
})
}, },
popup_picker() { popup_picker() {
this.$element("picker_text").show(); this.$element("picker_text").show();
......
en/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ 8e42f079
# 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.
The **\<Search>** component provides an input area for users to search.
## 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 | | 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. | | 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. | | hint | string | - | No | Hint text. |
| value | string | - | No | Text in the search box. | | value | string | - | No | Text in the search box. |
| searchbutton5+ | string | - | No | Text on the search button at the end of the search box. | | searchbutton<sup>5+</sup> | 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. | | menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | No | Menu options displayed after users click the **More** button. |
**Table 1** MenuOption5+
**Table 1** MenuOption<sup>5+</sup>
| Name | Type | Description | | Name | Type | Description |
| ------- | ------ | ----------------------------------- | | ------- | ------ | ----------- |
| icon | string | Path of the icon for a menu option. | | icon | string | Path of the icon for a menu option.|
| content | string | Text content in a menu option. | | content | string | Text content of a menu option.|
## 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 |
| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ | | ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
| color | \<color> | #e6000000 | No | Font color of the search box. | | color | &lt;color&gt; | \#e6000000 | No | Font color of the search box. |
| font-size | \<length> | 16px | No | Font size 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/>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. | | 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 | \<color> | #99000000 | No | Color of the hint text. | | 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](js-components-basic-text.md) of the **text** component. | | 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 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. | | 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-color6+ | \<color> | - | No | Color of the input cursor. | | caret-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the caret. |
## 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 | | 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. | | 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 button5+, or tap the search button on a soft keyboard. | | 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. |
| 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. | | 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.|
| 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. | | 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.|
| 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. | | 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.|
| 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. | | 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.|
## 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
浏览文件 @ 8e42f079
# 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 | Triggered when the value changes.|
| change | [ChangeEvent](js-components-basic-slider.md) | 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
浏览文件 @ 8e42f079
# 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
## Attributes Only the **[\<span>](../arkui-js/js-components-basic-span.md)** component is supported.
Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
## Styles ## Attributes
The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
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 |
| ----------------------- | ---------------------------------------- | -------------- | --------- | ------------------------------------------------------------ | | ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| color | \<color> | #e5000000 | No | Text color. | | color | &lt;color&gt; | #e5000000 | No | Font color. |
| font-size | \<length> | 30px | No | Font size (px). | | font-size | &lt;length&gt; | 30px | No | Font size. |
| 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. | | 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.|
| letter-spacing | \<length> | 0 px | No | Character spacing (px). | | letter-spacing | &lt;length&gt; | 0px | No | Character spacing (px). |
| word-spacing7+ | \<length> \| \<percentage> \| string | normal | No | Spacing between texts. The options are as follows:**normal**: default spacing. | | 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.|
| font-style | string | normal | No | Font style. Available values are as follows:<br/>-**normal**: standard font style<br/>-**italic**: italic font style | | font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style|
| 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**. | | 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**.|
| 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-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-decoration-color7+ | \<color> | - | No | Color of the text decoration. | | text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | No | Color of the text decoration. |
| 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-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.|
| 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 | | 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-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**. | | 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**.|
| 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. | | 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.|
| 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-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. |
| 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. | | 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-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. | | 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.|
| 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. | | 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. |
| 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** | | 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**|
| 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. | | 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.|
| text-indent7+ | \<length> | - | No | Indentation of the first line. | | text-indent<sup>7+</sup> | &lt;length&gt; | - | No | Indentation of the first line. |
| 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. | | 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.|
| 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. | | 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. |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > **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. > - 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.
>
> - Use the escape character **\r\n** for newline. > - Use the escape character **\r\n** for newline.
>
> - The following escape characters are supported: **\a**, **\b**, **\f**, **\n**, **\r**, **\t**, **\v**, **\'**, **\"**, and **\0**. > - 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. > - 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 **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.) >
> - 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.
## 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-panel.md
浏览文件 @ 8e42f079
# 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
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. Supported
## Attributes
| Name | Type | Default Value | Mandatory | Triggered when | In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| ---------- | --------- | ------------- | --------- | ------------------------------------------------------------ |
| 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. |
| 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. |
| fullheight | \<length> | - | 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. |
| miniheight | \<length> | - | 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:** | 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.|
| 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** means that the drag bar will be displayed, and **false** means the opposite. |
| fullheight | &lt;length&gt; | - | No | Panel height in the **full** mode. The default value is the screen height minus 8 px. |
| halfheight | &lt;length&gt; | - | No | Panel height in the **half** mode. The default value is half of the screen height. |
| miniheight | &lt;length&gt; | - | No | Panel height in the **mini** mode. The default value is **48px**. |
> **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. |
| 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. | | 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">
...@@ -90,7 +92,7 @@ Only the following methods are supported. ...@@ -90,7 +92,7 @@ Only the following methods are supported.
<panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px"> <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div"> <div class="panel-div">
<div class="inner-txt"> <div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text> <text class="txt">Simple panel in {{ modeFlag }} mode</text>
</div> </div>
<div class="inner-btn"> <div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button> <button type="capsule" value="Close" onclick="closePanel"></button>
...@@ -98,12 +100,16 @@ Only the following methods are supported. ...@@ -98,12 +100,16 @@ Only the following methods are supported.
</div> </div>
</panel> </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;
...@@ -111,16 +117,19 @@ Only the following methods are supported. ...@@ -111,16 +117,19 @@ Only the following methods are supported.
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;
...@@ -128,12 +137,16 @@ Only the following methods are supported. ...@@ -128,12 +137,16 @@ Only the following methods are supported.
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
浏览文件 @ 8e42f079
# 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.|
| Name | Parameters | Description | > **NOTE**
| ------ | ---------- | ------------------ |
| 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
浏览文件 @ 8e42f079
# 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 {
...@@ -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
浏览文件 @ 8e42f079
...@@ -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
浏览文件 @ 8e42f079
...@@ -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,7 +2408,6 @@ Restores the saved drawing context. ...@@ -2407,7 +2408,6 @@ 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 }) {
......
en/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 8e42f079
# 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
浏览文件 @ 8e42f079
...@@ -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
浏览文件 @ 8e42f079
...@@ -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.
先完成此消息的编辑！
想要评论请 注册 或