Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 7da99f56 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!13756 Monthly EN更新：application-dev下references下除apsi以外的文件夹 

Merge pull request !13756 from wusongqing/E0118-reference-folder
上级 cac7355d 87d7254c
展开全部 隐藏空白更改
内联 并排
Showing with 11992 addition and 5870 deletion
en/application-dev/reference/Readme-EN.md
浏览文件 @ 7da99f56
# Development References
- [SysCap List](syscap-list.md)
- [SystemCapability](syscap.md)
- [SystemCapability List](syscap-list.md)
- [Component Reference (ArkTS-based Declarative Development Paradigm)](arkui-ts/Readme-EN.md)
- [Component Reference (JavaScript-compatible Web-like Development Paradigm)](arkui-js/Readme-EN.md)
- [API Reference (JS and TS APIs)](apis/Readme-EN.md)
- [JS Service Widget UI Component Reference](js-service-widget-ui/Readme-EN.md)
- [API Reference (ArkTS and JS APIs)](apis/Readme-EN.md)
- [Error Codes](errorcodes/Readme-EN.md)
- API Reference (Native APIs)
- [Standard Libraries Supported by Native APIs](native-lib/Readme-EN.md)
en/application-dev/reference/arkui-js/Readme-EN.md
浏览文件 @ 7da99f56
......@@ -93,13 +93,11 @@
- [animateMotion](js-components-svg-animatemotion.md)
- [animateTransform](js-components-svg-animatetransform.md)
- Custom Components
- [Basic Usage](js-components-custom-basic-usage.md)
- [Style Inheritance](js-components-custom-style.md)
- [Custom Events](js-components-custom-events.md)
- [props](js-components-custom-props.md)
- [Event Parameter](js-components-custom-event-parameter.md)
- [Style Inheritance](js-components-custom-style.md)
- [slot](js-components-custom-slot.md)
- [Lifecycle Definition](js-components-custom-lifecycle.md)
- [Data Type Attributes](js-appendix-types.md)
- [Dynamic Component Creation](js-components-create-elements.md)
- [Data Type Attributes](js-appendix-types.md)
en/application-dev/reference/arkui-js/js-components-basic-button.md
浏览文件 @ 7da99f56
......@@ -18,7 +18,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| Name | Type | Default Value | Mandatory | Description |
| ---------------------- | ------- | ----- | ---- | ---------------------------------------- |
| type | string | - | No | Button type. The value cannot be dynamically updated. If this attribute is not set, a capsule-like button is displayed. Unlike the capsule button, the capsule-like button allows its corners to be configured using **border-radius**. Available button types are as follows:<br>- **capsule**: capsule button with fillets, background color, and text.<br>- **circle**: circle button that can accommodate icons.<br>- **text**: text button, which displays only text.<br>- **arc**: arc button. This value is applicable to wearables only.<br>- **download**: download button, with an extra download progress bar.|
| type | string | - | No | Button type. The value cannot be dynamically updated. By default, a capsule-like button is displayed. Unlike the capsule button, the capsule-like button allows its corners to be configured using **border-radius**. The options are as follows:<br>- **capsule**: capsule button with fillets, background color, and text.<br>- **circle**: circle button that can accommodate icons.<br>- **text**: text button, which displays only text.<br>- **arc**: arc button. This value is applicable to wearables only.<br>- **download**: download button, with an extra download progress bar.|
| value | string | - | No | Text value of the button. |
| icon | string | - | No | Path of the button icon. The supported icon formats are JPG, PNG, and SVG. |
| placement<sup>5+</sup> | string | end | No | Position of the button icon in text. This attribute is valid only when **type** is not set. Available values are as follows:<br>- **start**: The button icon is at the beginning of the text.<br>- **end**: The button icon is at the end of the text.<br>- **top**: The button icon is at the top of the text.<br>- **bottom**: The button icon is at the bottom of the text.|
......@@ -39,7 +39,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style | string | normal | No | Font style of the button. |
| font-weight | number \| string | normal | No | Font weight of the button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md#styles).|
| font-family | &lt;string&gt; | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. |
| font-family | &lt;string&gt; | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| icon-width | &lt;length&gt; | - | No | Width of the internal icon of a circle button. The entire circle button is filled by default.<br>This style must be set when the icon uses the SVG image.|
| icon-height | &lt;length&gt; | - | No | Height of the internal icon of a circle button. The entire circle button is filled by default.<br>This style must be set when the icon uses the SVG image.|
| radius | &lt;length&gt; | - | No | Corner radius of the button. For a circle button, this style takes precedence over **width** and **height** in the universal styles.|
......@@ -55,8 +55,8 @@ In addition to the **background-color**, **opacity**, **display**, **visibility*
| font-size | &lt;length&gt; | 37.5px | No | Font size of the arc button. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings. |
| font-style | string | normal | No | Font style of the arc button. |
| font-weight | number \| string | normal | No | Font weight of the arc button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md#styles).|
| font-family | &lt;string&gt; | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. |
| font-weight | number \| string | normal | No | Font weight of the arc button. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component. |
| font-family | &lt;string&gt; | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
## Events
......
en/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ 7da99f56
......@@ -22,7 +22,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| 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**<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.|
| 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 | - | 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&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.|
| 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.|
......@@ -99,7 +99,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| description | string | - | No | Description text of the point. |
| textLocation | string | - | No | Position of the description text relative to the point. Available values are as follows: **top**: above the point<br>**bottom**: below the point<br>**none**: not displayed|
| textColor | &lt;color&gt; | \#000000 | No | Color of the description text. |
| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes. 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 | &lt;color&gt; | \#000000 | No | Line color. If this attribute is not set, the value of **strokeColor** is used. |
**Table 9** DataSegment<sup>5+</sup>
......@@ -144,7 +144,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| 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 | &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 | &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.<br>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.<br>For example, **weights: 2, 2**. This style is supported by the gauge chart only.|
| 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-size<sup>5+</sup> | &lt;length&gt; | - | No | Font size of the description text. |
......@@ -161,7 +161,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
| Name | Parameter | Description |
| ------ | ---------------------------------------- | ---------------------------------------- |
| append | {<br>serial: number, // Set the data subscript of the line chart to be updated.<br>data: Array&lt;number&gt;, // Set the new data.<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. **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
......@@ -212,24 +212,24 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
strokeColor: '#0081ff',
fillColor: '#cce5ff',
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: {
xAxis: {
min: 0,
max: 20,
display: false,
display: false
},
yAxis: {
min: 0,
max: 1000,
display: false,
display: false
},
series: {
lineStyle: {
width: "5px",
smooth: true,
smooth: true
},
headPoint: {
shape: "circle",
......@@ -237,14 +237,14 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#007aff',
display: true,
display: true
},
loop: {
margin: 2,
gradient: true,
gradient: true
}
}
},
}
},
addData() {
this.$refs.linechart.append({
......@@ -295,15 +295,15 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
barData: [
{
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',
data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
},
{
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: {
......@@ -311,14 +311,14 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
min: 0,
max: 20,
display: false,
axisTick: 10,
axisTick: 10
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
},
display: false
}
}
}
}
```
......@@ -353,3 +353,76 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```
![en-us_image_0000001127125264](figures/en-us_image_0000001127125264.png)
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
浏览文件 @ 7da99f56
......@@ -31,7 +31,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| object-fit | string | cover | No | Image scale type. This style is not supported for SVG images. For details about available values, see **object-fit**.|
| match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. This style is not supported for SVG images. |
| fit-original-size | boolean | false | No | Whether the **\<image>** component adapts to the image source size when its width and height are not set. If this style is set to **true**, **object-fit** will not take effect. This style is not supported for SVG images.|
| object-position<sup>7+</sup> | string | 0px 0px | No | Position of an image in the component.<br>The options are as follows:<br>1. Pixels. For example, **15px 15px** indicates the moving position along the x-axis or y-axis.<br>2. Characters. Optional values are as follows:<br>- **left**: The image is displayed on the left of the component.<br>- **top** The image is displayed on the top of the component.<br>- **right** The image is displayed on the right of the component.<br>- **bottom** The image is displayed at the bottom of the component.|
| object-position<sup>7+</sup> | string | 0px 0px | No | Position of the image in the component.<br>The options are as follows:<br>1. Pixels, in px. For example, **15px 15px** indicates the position to move 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** object-fit
......@@ -56,16 +56,18 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
> 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.
>
> - For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, **animate**, **animateMotion**, and **animateTransform**.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| -------------- | ---------------------------------------- | ------------------------- |
| complete(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an image is successfully loaded. The loaded image size is returned.|
| 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**. |
| Name | Parameter | Description |
| -------- | ---------------------------------------- | ------------------------- |
| complete | {<br> width: width,<br> height: height<br> } | Triggered when an image is successfully loaded. The loaded image size is returned.|
| error | {<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
......
en/application-dev/reference/arkui-js/js-components-basic-label.md
浏览文件 @ 7da99f56
......@@ -35,8 +35,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| 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>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
| letter-spacing | &lt;length&gt; | 0px | No | Character spacing (px). |
| font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style|
| 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.<br>The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
| font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style.<br>- **italic**: italic font style.|
| font-weight | number \| string | normal | No | Font weight. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a heavier font weight.<br>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-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 | &lt;length&gt; | 0px | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. |
......@@ -46,7 +46,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| 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 | &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 | &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 | &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**|
| 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: prefer-font-sizes: 12px,14px,16px|
## Events
......@@ -83,7 +83,7 @@ Not supported
/*xxx.css */
.container {
flex-direction: column;
align-items: center;
margin-left: 20px;
}
.row {
flex-direction: row;
......
en/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ 7da99f56
......@@ -37,7 +37,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| color | &lt;color&gt; | \#e5000000 | No | Font color of the scrolling text. |
| font-size | &lt;length&gt; | 37.5 | No | Font size of the scrolling text. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-weight | number&nbsp;\|&nbsp;string | normal | No | Font weight of the scrolling text. For details, see **font-weight** of the **[\<text> component](../arkui-js/js-components-basic-text.md#styles)**.|
| font-weight | number \| string | normal | No | Font weight of the scrolling text. For details, see **font-weight** of the **[\<text> component](../arkui-js/js-components-basic-text.md#styles)**.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
......@@ -45,17 +45,17 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| ------------ | ---- | ---------------------------------------- |
| bounce(Rich) | - | Triggered when the marquee scrolls to the end. |
| finish(Rich) | - | Triggered when the marquee finishes the specified number of scrollings (value of the **loop** attribute). It can be triggered only when the **loop** attribute is set to a number greater than 0.|
| start(Rich) | - | Triggered when the marquee starts to scroll. |
| Name | Parameter | Description |
| ------ | ---- | ---------------------------------------- |
| bounce | - | Triggered when the marquee scrolls to the end. |
| finish | - | Triggered when the marquee finishes the specified number of scrollings (value of the **loop** attribute). It can be triggered only when the **loop** attribute is set to a number greater than 0.|
| start | - | Triggered when the marquee starts to scroll. |
## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name | Parameter | Description |
| Name | Parameter | Description |
| ----- | ---- | ----- |
| start | - | Starts scrolling.|
| stop | - | Stops scrolling.|
......@@ -65,72 +65,75 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```html
<!-- xxx.hml -->
<div class="container">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}"
onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee>
<div class="content">
<button class="controlButton" onclick="onStartClick">Start</button>
<button class="controlButton" onclick="onStopClick">Stop</button>
<div class="tutorial-page">
<div class="mymarquee">
<marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
id="testmarquee" onfinish="setfinish">
Life is a journey, not the destination.
</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>
```
```css
/* xxx.css */
.container {
.tutorial-page {
width: 750px;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #ffffff;
justify-content: center;
}
.customMarquee {
width: 100%;
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;
.marqueetext {
font-size: 37px;
}
.content {
flex-direction: row;
.mymarquee {
margin-top: 20px;
width:100%;
height: 100px;
margin-left: 50px;
margin-right: 50px;
border: 1px solid #dc0f27;
border-radius: 15px;
align-items: center;
}
.controlButton {
flex-grow: 1;
background-color: #F2F2F2;
text-color: #0D81F2;
button{
width: 200px;
height: 80px;
margin-top: 100px;
}
```
```js
// xxx.js
export default {
data: {
scrollAmount: 30,
loop: 3,
marqueeDir: 'left',
marqueeCustomData: 'Custom marquee',
},
onMarqueeBounce: function() {
console.log("onMarqueeBounce");
private: {
loopval: 1,
scroll: 8,
color1: 'red'
},
onMarqueeStart: function() {
console.log("onMarqueeStart");
onInit(){
},
onMarqueeFinish: function() {
console.log("onMarqueeFinish");
setfinish(e) {
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) {
this.$element('customMarquee').start();
makestart(e) {
this.$element('testmarquee').start()
},
onStopClick (evt) {
this.$element('customMarquee').stop();
makestop(e) {
this.$element('testmarquee').stop()
}
}
```
![lite_bar](figures/lite_bar.gif)
![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif)
en/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ 7da99f56
......@@ -20,7 +20,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| type | string | text | No | Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows:<br>- **text**: text selector.<br>- **time**: time selector.<br>- **date**: date selector.<br>- **datetime**: date and time selector.<br>- **multi-text**: multi-column text selector.|
Text selector (**type** is **text**)
### Text Selector
| Name | Type | Default Value | Mandatory | Description |
| --------------- | ------ | ---- | ---- | ---------------------------------------- |
......@@ -29,15 +29,15 @@ Text selector (**type** is **text**)
| indicatorprefix | string | - | No | Prefix field added when a value is specified for the text selector. |
| indicatorsuffix | string | - | No | Suffix field added when a value is specified for the text selector. |
Time selector (**type** is **time**)
### Time Selector
| Name | Type | Default Value | Mandatory | Description |
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| containsecond | boolean | false | No | Whether seconds are contained. |
| selected | string | Current time | No | Default value of the time selector, in the format of HH:mm.<br>If seconds are contained, the format is HH:mm:ss.|
| hours | number | 24<sup>1-4</sup> | No | Time format used by the time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
Date selector (**type** is **date**)
### Date Selector
| Name | Type | Default Value | Mandatory | Description |
| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- |
......@@ -47,16 +47,16 @@ Date selector (**type** is **date**)
| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. |
| lunarswitch | boolean | false | No | Whether to display the lunar calendar switch in the date selector. When this switch is displayed, the user can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar.|
Date and time selector (**type** is **datetime**)
### Date and Time Selector
| Name | Type | Default Value | Mandatory | Description |
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| selected | string | Current date and time | No | Default value of the date and time selector. The value can be in the format of MM-DD-HH-mm or YYYY-MM-DD-HH-mm. If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.|
| hours | number | 24<sup>1-4</sup> | No | Time format used by the date and time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the date and time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. |
| lunarswitch | boolean | false | No | Whether to display the lunar calendar switch in the date and time selector. When this switch is displayed, the user can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar.|
Multi-column text selector (**type** is **multi-text**)
### Multi-Column Text Selector
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | --------- | ---- | ---------------------------------------- |
......@@ -77,42 +77,42 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| selected-font-size | &lt;length&gt; | 20px | No | Font size of the selected item. The value is of the length type, in pixels. |
| disappear-color<sup>5+</sup> | &lt;color&gt; | \#ffffff | No | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. |
| disappear-font-size<sup>5+</sup> | &lt;length&gt; | 14px | No | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. |
| font-family | string | sans-serif | No | Font family of the selector, 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.|
| font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. |
## Events
The following events are supported.
Text selector (**type** is **text**)
### Text Selector
| Name | Parameter | Description |
| ------ | ---------------------------------------- | --------------- |
| change | {&nbsp;newValue:&nbsp;newValue,&nbsp;newSelected:&nbsp;newSelected&nbsp;} | Triggered when a value is specified for the text selector.|
| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is specified for the text selector.|
Time selector (**type** is **time**)
### Time Selector
| Name | Parameter | Description |
| ------ | ---------------------------------------- | ------------------------------- |
| change | {&nbsp;hour:&nbsp;hour,&nbsp;minute:&nbsp;minute,&nbsp;[second:second]} | Triggered when a value is specified for the time selector.<br>If seconds are contained, the value contains hour, minute, and second.|
| change | { hour: hour, minute: minute, [second:second]} | Triggered when a value is specified for the time selector.<br>If seconds are contained, the value contains hour, minute, and second.|
Date selector (**type** is **date**)
### Date Selector
| Name | Parameter | Description |
| ------ | ---------------------------------------- | --------------- |
| change | {&nbsp;year:year,&nbsp;month:month,&nbsp;day:day&nbsp;} | Triggered when a value is specified for the date selector.|
| change | { year:year, month:month, day:day } | Triggered when a value is specified for the date selector.|
Date and time selector (**type** is **datetime**)
### Date and Time Selector
| Name | Parameter | Description |
| ------ | ---------------------------------------- | ----------------- |
| change | {&nbsp;year:year,&nbsp;month:month,&nbsp;day:day,&nbsp;&nbsp;hour:hour,&nbsp;minute:minute&nbsp;} | Triggered when a value is specified for the date and time selector.|
| change | { year:year, month:month, day:day, hour:hour, minute:minute } | Triggered when a value is specified for the date and time selector.|
Multi-text selector (**type** is **multi-text**)
### Multi-Column Text Selector
| Name | Parameter | Description |
| ------------ | ---------------------------------------- | ---------------------------------------- |
| columnchange | {&nbsp;column:column,&nbsp;newValue:newValue,&nbsp;newSelected:newSelected&nbsp;} | Triggered when the value of a column in the multi-column selector changes. <br>**column**: column whose value has changed. <br>**newValue**: selected value. <br>**newSelected**: index of the selected value.|
| columnchange | { column:column, newValue:newValue, newSelected:newSelected } | Triggered when the value of a column in the multi-column selector changes. <br>**column**: column whose value has changed. <br>**newValue**: selected value. <br>**newSelected**: index of the selected value.|
## Methods
......@@ -121,67 +121,252 @@ Not supported
## Example
```html
<!-- xxx.hml -->
<div class="container" @swipe="handleSwipe">
<text class="title">
Selected: {{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
}
.time-picker {
width: 500px;
height: 400px;
margin-top: 20px;
}
```
```js
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
```
![lite_bar-4](figures/lite_bar-4.png)
1. Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected value: {{value}} Selected index: {{index}}
</text>
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
```
```js
/* xxx.js */
export default {
data: {
options: ['Option 1','Option 2','Option 3'],
value: "Option 1",
index: 0
},
handleChange(data) {
this.value = data.newValue;
this.index = data.newSelected;
},
}
```
![](figures/pickerview1.gif)
2. Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
}
.time-picker {
width: 500px;
height: 400px;
margin-top: 20px;
}
```
```js
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
```
![](figures/pickerview2.gif)
3. Date Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
.date-picker {
width: 500px;
height: 400px;
margin-top: 50px;
}
```
```js
/* xxx.js */
export default {
data: {
date: "",
},
handleChange(data) {
this.date = data.year + "" + data.month + "" + data.day + "";
},
}
```
4. Date and Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{datetime}}
</text>
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 500px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
.date-picker {
width: 500px;
height: 400px;
margin-top: 50px;
}
```
```js
/* xxx.js */
export default {
data: {
datetime: "",
},
handleChange(data) {
this.datetime = data.year + "" + data.month + "" + data.day + "" + data.hour + "" + data.minute + "";
},
}
```
5. Multi-Column Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{ value }}
</text>
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 500px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
```
```js
/* xxx.js */
export default {
data: {
multitext: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
],
value: ""
},
handleChange(data) {
this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected;
},
}
```
![](figures/pickerview5.gif)
en/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ 7da99f56
......@@ -58,7 +58,7 @@ When **type** is set to **time**, a time selector is used.
| Name | Type | Default Value | Mandatory | Description |
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| containsecond | boolean | false | No | Whether seconds are contained. |
| selected | string | Current time | No | Default value of the time selector, in format of HH:mm. If seconds are contained, the format is HH:mm:ss. |
| selected | string | Current time | No | Default value of the time selector, in format of HH:mm. If seconds are contained, the format is HH:mm:ss.<br> |
| value | string | - | No | Value of the time selector. |
| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
......@@ -166,52 +166,59 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```html
<!-- xxx.hml -->
<div class="container">
<select @change="selectChange">
<select @change="selectChange">
<option value="{{ item }}" for="item in selectList">
{{ item }}
</option>
</select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12"
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</select>
<picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
onchange="textonchange"
oncancel="textoncancel" class="pickertext" show="false"></picker>
<picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}"
lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
<picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
selected="{{ timeselect }}" hours="12"
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
selected="{{ multitextselect }}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
picker{
width:60%;
height:80px;
border-radius:20px;
text-color:white;
font-size:15px;
background-color:#4747e3;
margin-left:20%;
picker {
width: 60%;
height: 80px;
border-radius: 20px;
text-color: white;
font-size: 15px;
background-color: #4747e3;
margin-left: 20%;
}
select{
background-color: #efecec;
height: 50px;
width: 60%;
margin-left: 20%;
margin-top: 300px;
margin-bottom: 50px;
font-size: 22px;
select {
background-color: #efecec;
height: 50px;
width: 60%;
margin-left: 20%;
margin-top: 300px;
margin-bottom: 50px;
font-size: 22px;
}
```
......@@ -219,72 +226,96 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
// xxx.js
import router from '@system.router';
import prompt from '@system.prompt';
export default {
data: {
selectList:["text","data","time","datetime","multitext"],
rangetext:['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue',
datevalue:'default datevalue',
timevalue:'default timevalue',
datetimevalue:'default datetimevalue',
multitextvalue:'default multitextvalue',
containsecond:true,
multitextselect:[1,2,0],
datetimeselect:'2012-5-6-11-25',
timeselect:'11:22:30',
dateselect:'2021-3-2',
textselect:'2'
},
selectChange(e){
for(let i = 0;i<this.selectList.length;i++){
if(e.newValue == this.selectList[i]){
this.$element("picker"+i).show();
data: {
selectList: ["text", "data", "time", "datetime", "multitext"],
rangetext: ['15', "20", "25"],
multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue: 'default textvalue',
datevalue: 'default datevalue',
timevalue: 'default timevalue',
datetimevalue: 'default datetimevalue',
multitextvalue: 'default multitextvalue',
containsecond: true,
multitextselect: [1, 2, 0],
datetimeselect: '2012-5-6-11-25',
timeselect: '11:22:30',
dateselect: '2021-3-2',
textselect: '2'
},
selectChange(e) {
for (let i = 0;i < this.selectList.length; i++) {
if (e.newValue == this.selectList[i]) {
this.$element("picker" + i).show();
}
}
},
textonchange(e) {
this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
},
textoncancel(e) {
prompt.showToast({ message:"text: textoncancel" })
},
dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day })
},
dateoncancel() {
prompt.showToast({ message:"date: dateoncancel" })
},
timeonchange(e) {
if(this.containsecond){
this.timevalue=e.hour+":"+e.minute+":"+e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second })
} else {
this.timevalue=e.hour+":"+e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute })
}},
timeoncancel() {
prompt.showToast({ message:"timeoncancel" })
},
datetimeonchange(e) {
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute;
prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute })
},
datetimeoncancel() {
prompt.showToast({ message:"datetimeoncancel" })
},
multitextonchange(e) {
this.multitextvalue=e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue })
},
multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" })
},
popup_picker() {
this.$element("picker_text").show();
},
textonchange(e) {
this.textvalue = e.newValue;
prompt.showToast({
message: "text:" + e.newValue + ",newSelected:" + e.newSelected
})
},
textoncancel(e) {
prompt.showToast({
message: "text: textoncancel"
})
},
dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({
message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
})
},
dateoncancel() {
prompt.showToast({
message: "date: dateoncancel"
})
},
timeonchange(e) {
if (this.containsecond) {
this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
})
} else {
this.timevalue = e.hour + ":" + e.minute;
prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute
})
}
},
timeoncancel() {
prompt.showToast({
message: "timeoncancel"
})
},
datetimeonchange(e) {
this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
prompt.showToast({
message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
})
},
datetimeoncancel() {
prompt.showToast({
message: "datetimeoncancel"
})
},
multitextonchange(e) {
this.multitextvalue = e.newValue;
prompt.showToast({
message: "Multi-column text change" + e.newValue
})
},
multitextoncancel() {
prompt.showToast({
message: "multitextoncancel"
})
},
popup_picker() {
this.$element("picker_text").show();
},
}
```
......
en/application-dev/reference/arkui-js/js-components-basic-qrcode.md
浏览文件 @ 7da99f56
# qrcode
The **\<qrcode>** component is used to generate and display a QR code.
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<qrcode>** component is used to generate and display a QR code.
## Required Permissions
......@@ -24,7 +23,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| Name | Type | Default Value | Mandatory | Description |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | string | - | Yes | Content used to generate the QR code. |
| type | string | rect | No | QR code type. Available values are as follows:<br>- **rect**: rectangular QR code<br>- **circle**: round QR code|
| type | string | rect | No | QR code type. Available values are as follows:<br>- **rect**: rectangular QR code.<br>- **circle**: round QR code.|
## Styles
......@@ -60,8 +59,6 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
<div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}"
style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
<text class="txt">Value</text>
<input onChange="setValue">123</input>
<text class="txt">Type</text>
<switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch>
<text class="txt">Color</text>
......@@ -98,7 +95,6 @@ select{
/* index.js */
export default {
data: {
qr_value:'',
qr_type: 'rect',
qr_size: '300px',
qr_col: '#87ceeb',
......@@ -113,9 +109,6 @@ export default {
this.qr_type = 'circle'
}
},
setvalue(e) {
this.qr_value = e.newValue
},
setcol(e) {
this.qr_col = e.newValue
},
......
en/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ 7da99f56
# 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.
The **\<search>** component provides an input area for users to search.
## Child Components
......@@ -42,7 +41,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| font-size | &lt;length&gt; | 16px | No | Font size of the search box. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| placeholder-color | &lt;color&gt; | \#99000000<br>| No | Color of the hint text. |
| font-weight | number \| string | normal | No | Font weight. For details, see **font-weight** of the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| font-weight | number \| string | normal | No | Font weight. For details, see [font-weight](../arkui-js/js-components-basic-text.md#styles) of the **\<text>** component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| caret-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the caret. |
......
en/application-dev/reference/arkui-js/js-components-basic-select.md
浏览文件 @ 7da99f56
......@@ -9,7 +9,7 @@ The **<select\>** component provides a drop-down list that allows users to selec
## Child Components
The **<[option](js-components-basic-option.md)\>** child component is supported.
The **[<option\>](js-components-basic-option.md)** child component is supported.
## Attributes
......@@ -49,36 +49,65 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
```html
<!-- xxx.hml -->
<div class="container">
<select @change="changeFruit">
<option value="bananaValue">
Banana
</option>
<option value="appleValue" selected="true">
Apple
</option>
<option value="pearValue">
Pear
</option>
</select>
<select @change="onChange">
<option for="{{ array }}" value="{{ $item.value }}">
{{ $item.name }}
</option>
</select>
</div>
```
```css
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
```
```js
// ×××.js
// xxx.js
export default {
changeFruit(e){
console.log("newValue:" + e.newValue)
}
data: {
array: [
{
"value": "Option 0", "name": "Option 0"
},
{
"value": "Option 1", "name": "Option 1"
},
{
"value": "Option 2", "name": "Option 2"
},
{
"value": "Option 3", "name": "Option 3"
},
]
},
getData() {
let other = [
{
"value": "Option A", "name": "Option A"
},
{
"value": "Option B", "name": "Option B"
},
{
"value": "Option C", "name": "Option C"
},
{
"value": "Option D", "name": "Option D"
},
]
return other
},
onChange() {
this.array = this.getData()
}
}
```
![en-us_image_0000001152588538](figures/en-us_image_0000001152588538.png)
![en-us_image_0000001152588538](figures/en-us_image_0000001152588538.gif)
en/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ 7da99f56
......@@ -2,9 +2,9 @@
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
> 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.
The **\<slider>** component is used to quickly adjust settings, such as the volume and brightness.
## Child Components
......@@ -22,7 +22,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| 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.|
| mode<sup>5+</sup> | string | outset | No| Slider style. Available values are as follows:<br>- **outset**: The slider is on the slider track.<br>- **inset**: The slider is in the slider track.|
| 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.|
......@@ -51,7 +51,7 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
| 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.|
| 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.<br>- **click**: The **value** changes upon a touch on the slider.|
## Example
......@@ -59,48 +59,23 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
```html
<!-- xxx.hml -->
<div class="container">
<text>slider start value is {{startValue}}</text>
<text>slider current value is {{currentValue}}</text>
<text>slider end value is {{endValue}}</text>
<slider min="0" max="100" value="{{value}}" onchange="setvalue" ></slider>
<slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
<slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset" showtips="true"></slider>
<slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset" showtips="false"></slider>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
align-items: center;
}
```
```js
// xxx.js
export default {
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;
} else if (e.mode == "click) {
this.value = e.value;
this.currentValue = e.value;
}
}
slider{
margin-top: 100px;
}
```
![slider](figures/slider.png)
en/application-dev/reference/arkui-js/js-components-basic-switch.md
浏览文件 @ 7da99f56
......@@ -30,18 +30,20 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
## 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 |
| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| texton-color(Rich) | &lt;color&gt; | \#000000 | No | Text color displayed when the component is checked. |
| textoff-color(Rich) | &lt;color&gt; | \#000000 | No | Text color displayed when the component is not checked. |
| text-padding(Rich) | number | 0px | No | Distance between the two sides of the longest text in **texton** and **textoff** and the border of the slider. |
| font-size(Rich) | &lt;length&gt; | - | No | Font size. This attribute is available only when **texton** and **textoff** are set. |
| allow-scale(Rich) | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style(Rich) | string | normal | No | Font style. This attribute is available only when **texton** and **textoff** are set. For details, see **font-style** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-weight(Rich) | number \| string | normal | No | Font weight. This attribute is available only when **texton** and **textoff** are set. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-family(Rich) | 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. This attribute is available only when **texton** and **textoff** are set.|
| Name | Type | Default Value | Mandatory | Description |
| ------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| texton-color | &lt;color&gt; | \#000000 | No | Text color displayed when the component is checked. This attribute is available only when **texton** and **textoff** are set. |
| textoff-color | &lt;color&gt; | \#000000 | No | Text color displayed when the component is not checked. This attribute is available only when **texton** and **textoff** are set. |
| text-padding | number | 0px | No | Distance between the two sides of the longest text in **texton** and **textoff** and the border of the slider. |
| font-size | &lt;length&gt; | - | No | Font size. This attribute is available only when **texton** and **textoff** are set. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style | string | normal | No | Font style. This attribute is available only when **texton** and **textoff** are set. For details, see [font-style](../arkui-js/js-components-basic-text.md#styles) of the **\<text>** component.|
| font-weight | number \| string | normal | No | Font weight. This attribute is available only when **texton** and **textoff** are set. For details, see [font-weight](../arkui-js/js-components-basic-text.md#styles) of the **\<text>** component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. This attribute is available only when **texton** and **textoff** are set.|
## Events
......@@ -61,45 +63,63 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
```html
<!-- xxx.hml -->
<div class="container">
<switch showtext="true" texton="On" textoff="Off" checked="true" @change="switchChange">
</switch>
<switch @change="normalswitchChange">
</switch>
<switch class="switch" showtext="true" texton="On" textoff="Off" @change="switchChange">
</switch>
<switch class="switch text" showtext="true" texton="Switch on" textoff="Switch off" checked="true" @change="switchChange">
</switch>
</div>
```
```css
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.switch {
texton-color: red;
textoff-color: forestgreen;
}
switch{
texton-color:#002aff;
textoff-color:silver;
text-padding:20px;
.text {
text-padding: 20px;
font-size: 30px;
font-weight: 700;
}
```
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
title: 'World'
},
switchChange(e){
console.log(e.checked);
if(e.checked){
prompt.showToast({
message: "Switch on."
});
}else{
prompt.showToast({
message: "Switch off."
});
data: {
title: 'World'
},
switchChange(e) {
if (e.checked) {
promptAction.showToast({
message: "Switch on."
});
} else {
promptAction.showToast({
message: "Switch off."
});
}
},
normalswitchChange(e) {
if (e.checked) {
promptAction.showToast({
message: "switch on"
});
} else {
promptAction.showToast({
message: "switch off"
});
}
}
}
}
```
![en-us_image_0000001152862510](figures/en-us_image_0000001152862510.gif)
![en-us_image_0000001152862510](figures/switch.gif)
en/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 7da99f56
......@@ -15,7 +15,7 @@ None
## Child Components
Only the **[\<span>](../arkui-js/js-components-basic-span.md)** component is supported.
The **[\<span>](../arkui-js/js-components-basic-span.md)** child component is supported.
## Attributes
......@@ -34,19 +34,19 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| 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 | &lt;length&gt; | 0px | No | Character spacing (px). |
| 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-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width. The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
| font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style.<br>- **italic**: italic font style.|
| font-weight | number \| string | normal | No | Font weight. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a heavier font weight. 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-color<sup>7+</sup> | &lt;color&gt; | - | No | Color of the text decoration. |
| 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 | &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 |
| 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 | 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 in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| 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. |
| 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 | &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 | &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 | &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 | &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**|
| 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: prefer-font-sizes: 12px,14px,16px|
| 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-indent<sup>7+</sup> | &lt;length&gt; | - | No | Indentation of the first line. |
| 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.|
......@@ -76,84 +76,65 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
## Example
1.
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="title">
Hello {{ title }}
</text>
</div>
<text class="title">default text</text>
<text class="title textcolor">hello world with color</text>
<text class="title textsize">hello world with font-size</text>
<text class="title textletterspacing">hello world with letter-spacing</text>
<text class="title textwordspacing">hello world with word-spacing</text>
<text class="title textstyle">hello world with italic</text>
<text class="title textweight">hello world with font-weight</text>
<text class="title textdecoration1">hello world with underline</text>
<text class="title textdecoration2">hello world with line-through</text>
<text class="title textalign">hello world with text-align:right</text>
</div>
```
```css
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 400px;
height: 400px;
border: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.title {
font-size: 80px;
text-align: center;
width: 400px;
height: 400px;
text-align: center;
width: 800px;
height: 60px;
}
```
```js
// xxx.js
export default {
data: {
title: 'World'
}
.textcolor {
color: indianred;
}
```
![3](figures/3.png)
```html
<!-- xxx.hml -->
<div class="container">
<text class="text1">
This is a passage
</text>
<text class="text2">
This is a passage
</text>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
.textsize {
font-size: 40px;
}
.textletterspacing {
letter-spacing: -3px;
}
.text1{
word-spacing: 10px;
adapt-height: true;
.textwordspacing {
word-spacing: 20px;
}
.text2{
width: 200px;
max-lines: 1;
text-overflow: ellipsis;
text-valign: middle;
line-height: 40px;
text-decoration: underline;
text-decoration-color: red;
text-indent: 20px;
white-space: pre;
.textstyle {
font-style: italic;
}
.textweight {
font-weight: 700;
}
.textdecoration1 {
text-decoration: underline;
}
.textdecoration2 {
text-decoration: line-through;
text-decoration-color: red;
}
.textalign {
text-align: right;
}
```
![2](figures/2.png)
![en-us_image_0000001167823076](figures/text.png)
en/application-dev/reference/arkui-js/js-components-basic-xcomponent.md
浏览文件 @ 7da99f56
# xcomponent
> **NOTE**
>
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<xcomponent>** displays the components to which the EGL/OpenGLES or media data is written.
The **\<xcomponent>** displays the components to which the EGL/OpenGLES or media data is written.
## Required Permissions
None
None
## Child Components
Not supported
Not supported
## Attributes
......
en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
浏览文件 @ 7da99f56
......@@ -11,7 +11,7 @@ The **\<canvas>** component is used for customizing drawings.
None
## Child Component
## Child Components
Not supported
......@@ -38,7 +38,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
### getContext
getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
getContext(type: '2d', options?: ContextAttrOptions): CanvasRenderingContext2D
Obtains the canvas drawing context. This API cannot be called in **onInit** or **onReady**.
......@@ -49,7 +49,7 @@ Obtains the canvas drawing context. This API cannot be called in **onInit** or *
| type | string | Yes | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.|
| options<sup>6+</sup> | ContextAttrOptions | No | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. |
**Table 1** ContextAttrOptions
**Table 1** ContextAttrOptions
| Name | Type | Description |
| --------- | ------- | ------------------- |
......@@ -59,7 +59,7 @@ Obtains the canvas drawing context. This API cannot be called in **onInit** or *
| Type | Description |
| ---------------------------------------- | -------------------- |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the canvas component. |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component.|
### toDataURL<sup>6+</sup>
......
en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
浏览文件 @ 7da99f56
......@@ -17,7 +17,7 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
| Name | Type | Description |
| ------ | ------ | ------------------------------------------------------------ |
| offset | number | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. |
| color | string | Gradient color to set. |
| color | string | Gradient color to set. |
**Example**
......@@ -25,19 +25,21 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle"onclick="handleClick" />
</div>
```
```js
// xxx.js
export default {
handleClick() {
onShow() {
const el =this.$refs.canvas;
const ctx =el.getContext('2d');
const gradient = ctx.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,'#00ffff');
gradient.addColorStop(1,'#ffff00');
const ctx = el.getContext('2d');
const gradient = ctx.createLinearGradient(50,0,300,100);
gradient.addColorStop(0.0, '#ff0000')
gradient.addColorStop(0.5, '#ffffff')
gradient.addColorStop(1.0, '#00ff00')
ctx.fillStyle = gradient
ctx.fillRect(0, 0, 300, 300)
}
}
```
......
en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 7da99f56
......@@ -2,7 +2,7 @@
> **NOTE**
>
> Supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on a canvas.
......@@ -426,9 +426,9 @@ export default {
}
```
![en-us_image_0000001213192781](figures/en-us_image_0000001213192781.png)
![en-us_image_0000001213192781](figures/en-us_image_0000001213192781.png)
In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing.
In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing.
### shadowBlur
......@@ -585,7 +585,7 @@ Fills a rectangle on the canvas.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
```
......@@ -621,7 +621,7 @@ Clears the content in a rectangle on the canvas.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
<canvas ref="canvas" style="width: 500px; height: 500px;"></canvas>
</div>
```
......@@ -984,7 +984,7 @@ Creates a pattern for image filling based on a specified source image and repeti
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
<canvas ref="canvas" style="width: 1000px; height: 1000px;"></canvas>
</div>
```
......@@ -998,7 +998,7 @@ Creates a pattern for image filling based on a specified source image and repeti
img.src = 'common/images/example.jpg';
var pat = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pat;
ctx.fillRect(0, 0, 20, 20);
ctx.fillRect(0, 0, 500, 500);
}
}
```
......@@ -1429,7 +1429,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.
Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** API.
**Parameters**
......@@ -1574,7 +1574,7 @@ Draws an image on the canvas.
```html
<!-- xxx.hml -->
<div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -1582,11 +1582,11 @@ Draws an image on the canvas.
//xxx.js
export default {
onShow() {
var test = this.$element('drawImage');
var test = this.$refs.canvas;
var ctx = test.getContext('2d');
var img = new Image();
img.src = 'common/image/test.jpg';
ctx.drawImage(img, 50, 80, 80, 80);
ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 200);
}
}
```
......@@ -1682,9 +1682,9 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details,
// Linear gradient: start(50,0) end(300,100)
var gradient = ctx.createLinearGradient(50,0, 300,100);
// Add three color stops
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1.0, 'green');
gradient.addColorStop(0.0, '#ff0000');
gradient.addColorStop(0.5, '#ffffff');
gradient.addColorStop(1.0, '#00ff00');
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);
......
en/application-dev/reference/arkui-js/js-components-canvas-path2d.md
浏览文件 @ 7da99f56
......@@ -65,7 +65,7 @@ Sets the path transformation matrix.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -95,7 +95,7 @@ Moves the current point of the path back to the start point of the path, and dra
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -223,7 +223,7 @@ Draws a cubic bezier curve on the canvas.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -264,7 +264,7 @@ Draws a quadratic curve on the canvas.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -307,7 +307,7 @@ Draws an arc on the canvas.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -348,7 +348,7 @@ Draws an arc based on the radius and points on the arc.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
</div>
```
......
en/application-dev/reference/arkui-js/js-components-common-attributes.md
浏览文件 @ 7da99f56
......@@ -31,5 +31,114 @@ Rendering attributes are used to set whether a component is rendered.
| if | boolean | - | Whether the element is added or removed.|
| show | boolean | - | Whether the element is displayed or hidden.|
> **NOTE**<br>
> **NOTE**
>
> Do not set styles in attribute fields.
## Example
### Example 1
```html
<!-- xxx.hml -->
<div id="container">
<button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
<list class="list">
<list-item for="{{ array }}" class="listItem">
<text class="text" onclick="toggleShow" show="{{ visible }}"
if="{{ display }}">{{ $item.value }}</text>
</list-item>
</list>
</div>
```
```css
/* xxx.css */
#container {
flex-direction: column;
width: 100%;
margin-top: 10px;
}
.text {
font-size: 50px;
font-weight: 500;
margin-left: 12px;
}
.listItem {
width: 100%;
height: 100px;
line-height: 60px;
border-bottom: 1px solid #DEDEDE;
font-size: 20px;
}
.btn{
width: 280px;
font-size: 26px;
margin: 10px 0;
}
```
```js
// xxx.js
export default {
data: {
visible: true,
display: true,
title: "",
i: 4,
array: [
{"value": "Item 0"},
{"value": "Item 1"},
{"value": "Item 2"},
{"value": "Item 3"},
],
},
toggleShow: function() {
this.array.push ({"value": "Item" + this.i })
this.i++
},
toggleDisplay: function() {
this.display = !this.display
},
}
```
![en-us-attributes](figures/en-us-attributes.gif)
### Example 2
```html
<!-- xxx.hml -->
<div class="container">
<div>
<text class="text1" dir='rtl' >hello world</text>
</div>
<div>
<text class="text2" dir='ltr' >hello world</text>
</div>
</div>
```
```css
/* xxx.css */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.text1{
width: 90%;
height: 100px;
background-color: aqua;
}
.text2{
width: 90%;
height: 100px;
background-color: blue;
}
```
![en-us_image1](figures/en-us_image1.png)
en/application-dev/reference/arkui-js/js-components-common-customizing-font.md
浏览文件 @ 7da99f56
......@@ -11,8 +11,8 @@ The custom font can be loaded from the font file in a project. The font file mus
```
@font-face {
font-family: HWfont;
src: url('/common/HWfont.ttf');
font-family: font;
src: url('/common/font.ttf');
}
```
......@@ -48,10 +48,10 @@ Page style:
```css
/*xxx.css*/
@font-face {
font-family: HWfont;
src: url("/common/HWfont.ttf");
font-family: font;
src: url("/common/font.ttf");
}
.demo-text {
font-family: HWfont;
font-family: font;
}
```
en/application-dev/reference/arkui-js/js-components-common-methods.md
浏览文件 @ 7da99f56
......@@ -32,7 +32,7 @@ animate( keyframes: Keyframes, options: Options): void
| height | number | - | Height set for the component during playback of the animation. |
| backgroundColor | &lt;color&gt; | none | Background color set for the component during playback of the animation. |
| opacity | number | 1 | Opacity set for the component. The value ranges from 0 to 1. |
| backgroundPosition | string | - | The value format is **x y**, in percentage or pixels.<br>The first value indicates the horizontal position, and the second value indicates the vertical position.<br>If only one value is specified, the other value is **50%**.|
| backgroundPosition | string | - | The value format is **"x y"**, in percentage or pixels.<br>The first value indicates the horizontal position, and the second value indicates the vertical position.<br>If only one value is specified, the other value is **50%**.|
| transformOrigin | string | 'center center' | Origin position of the transformed element.<br>The first value indicates the x-axis position. The value can be **left**, **center**, **right**, a length, or a percentage.<br>The second value indicates the y-axis position. The value can be **top**, **center**, **bottom**, a length, or a percentage.|
| transform | [Transform](../arkui-js/js-components-common-animation.md) | - | Transformation type set for a transformed element. |
| offset | number | - | - The value of **offset** must be within (0.0, 1.0] and sorted in ascending order if it is provided.<br>- If there are only two frames, **offset** can be left empty.<br>- If there are more than two frames, **offset** is mandatory.|
......@@ -53,10 +53,10 @@ animate( keyframes: Keyframes, options: Options): void
| Value | Description |
| ---------------------------------------- | ---------------------------------------- |
| linear | The animation speed keeps unchanged. |
| ease-in | The animation starts at a low speed. **cubic-bezier(0.42, 0.0, 1.0, 1.0)**.|
| ease-out | The animation ends at a low speed. **cubic-bezier(0.0, 0.0, 0.58, 1.0)**.|
| ease-in-out | The animation starts and ends at a low speed. **cubic-bezier(0.42, 0.0, 0.58, 1.0)**.|
| friction | The animation uses the damping curve, **cubic-bezier(0.2, 0.0, 0.2, 1.0)**.|
| ease-in | The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.|
| ease-out | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.|
| ease-in-out | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
| friction | The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).|
| extreme-deceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).|
| sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).|
| rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).|
......@@ -71,7 +71,7 @@ animate( keyframes: Keyframes, options: Options): void
| --------- | ------- | ---------------------------------------- |
| finished | boolean | Read-only attribute, which indicates whether the animation playback is complete. |
| pending | boolean | Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay).|
| playState | string | Read-write attribute, which indicates the playback status of the animation:<br>- **idle**: The animation is not running (playback ended or not started).<br>- **running**: The animation is running.<br>- **paused**: The animation is paused.<br>- **finished**: Animation playback ends.|
| playState | string | Read-write attribute, which indicates the playback status of the animation:<br>- **idle**: The animation is not running (playback ended or not started).<br>- **running**: The animation is running.<br>- **paused**: The animation is paused.<br>- **finished**: The animation finishes playing.|
| startTime | number | Read-write attribute, which indicates the animation start time. This attribute is similar to **delay** in the **options** attribute. |
The **animation** methods are as follows.
......@@ -103,7 +103,7 @@ animate( keyframes: Keyframes, options: Options): void
start
</button>
<button @click="cancel">
cancels
cancel
</button>
</div>
</div>
......@@ -139,7 +139,7 @@ button{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default{
data:{
animation:'',
......@@ -162,19 +162,19 @@ export default{
this.animation = this.$element('idName').animate(frames, options);
// handle finish event
this.animation.onfinish = function(){
prompt.showToast({
promptAction.showToast({
message: "The animation is finished."
});
};
// handle cancel event
this.animation.oncancel = function(){
prompt.showToast({
promptAction.showToast({
message: "The animation is canceled."
});
};
// handle repeat event
this.animation.onrepeat = function(){
prompt.showToast({
promptAction.showToast({
message: "The animation is repeated."
});
};
......
en/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ 7da99f56
......@@ -11,14 +11,14 @@
| Name | Type | Default Value | Description |
| ------- | ------ | ---- | ---------------------------------------- |
| shareid | string | - | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements. |
| shareid | string | - | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements.|
### Styles
| Name | Type | Default Value | Description |
| --------------------------------- | ------ | -------- | ---------------------------------------- |
| shared-transition-effect | string | exchange | Entry style of a shared element during transition.<br>-&nbsp;**exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>-&nbsp;**static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.|
| shared-transition-effect | string | exchange | Entry style of a shared element during transition.<br>- **exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>- **static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.|
| shared-transition-name | string | - | During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by **@keyframes** supporting transform and opacity animations. If the effect of shared elements conflicts with the custom animation, the latter is used.|
| shared-transition-timing-function | string | friction | During the transition, the style configured on the target page takes effect preferentially. This style defines the difference curve during the transition of shared elements. If it is not configured, the friction curve is used.|
......@@ -52,7 +52,7 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is
<image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
</list-item>
<list-item>
<text onclick="jump">Click on picture to Jump to the details</text>
<text onclick="jump">Click on picture to jump to the details</text>
</list-item>
</list>
</div>
......@@ -60,12 +60,12 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is
```js
// xxx.js
import router from '@system.router';
import router from '@ohos.router';
export default {
jump() {
router.push({
// The path must be the same as that in the config.json file.
uri: 'pages/detailpage',
url: 'pages/detailpage',
});
},
}
......@@ -93,7 +93,7 @@ export default {
```js
// xxx.js
import router from '@system.router';
import router from '@ohos.router';
export default {
jumpBack() {
router.back();
......@@ -117,7 +117,6 @@ export default {
## Widget Transition
> **NOTE**
>
> Widget transitions are not available when other transitions (including shared element transitions and custom transitions) are used.
......@@ -125,7 +124,7 @@ export default {
| Name | Type | Default Value | Description |
| ----------------- | ------ | ---- | ---------------------------------------- |
| transition-effect | string | - | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>-&nbsp;**unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>-&nbsp;**none**: No transition effect is displayed. |
| transition-effect | string | - | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>- **unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>- **none**: No transition effect is displayed.|
### Example
......@@ -140,7 +139,7 @@ The **source_page** has a title area on the top and a widget list. Users can tap
<text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
</div>
<list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
<list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.uri}})">
<list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.url}})">
<text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
</list-item>
</list>
......@@ -149,19 +148,19 @@ The **source_page** has a title area on the top and a widget list. Users can tap
```js
// xxx.js
import router from '@system.router'
import router from '@ohos.router'
export default {
data: { list: [] },
onInit() {
for(var i = 0; i < 10; i++) {
var item = { uri: "pages/card_transition/target_page/index",
var item = { url: "pages/card_transition/target_page/index",
title: "this is title" + i, id: "item_" + i }
this.list.push(item);
}
},
jumpPage(id, uri) {
jumpPage(id, url) {
var cardId = this.$element(id).ref;
router.push({ uri: uri, params : { ref : cardId } });
router.push({ url: url, params : { ref : cardId } });
}
}
```
......@@ -169,6 +168,8 @@ export default {
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
background-color: #ABDAFF;
......@@ -199,6 +200,8 @@ export default {
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
background-color: #EBFFD7;
......@@ -223,7 +226,7 @@ export default {
| -------------------------- | ------ | ------------- | ---------------------------------------- |
| transition-enter | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
| transition-exit | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
| transition-duration | string | Follows the default page transition time of the device | The unit can be s or ms. The default unit is ms. If no value is specified, the default value is used. |
| transition-duration | string | Follows the default page transition time of the device| The unit can be s|or ms. The default unit is ms. If no value is specified, the default value is used.|
| transition-timing-function | string | friction | Speed curve of the transition animation, which makes the animation more fluent. For details, see the description of **animation-timing-function **in [Animation Styles](../arkui-js/js-components-common-animation.md).|
......@@ -255,16 +258,16 @@ export default {
</div>
```
```css
```js
// xxx.js
import router from '@system.router';
import router from '@ohos.router';
export default {
data: {
},
jump() {
router.push({
uri:'pages/transition2/transition2'
url:'pages/transition2/transition2'
})
}
}
......@@ -288,13 +291,13 @@ export default {
transition-duration: 5s;
transition-timing-function: friction;
}
@keyframes go_page {
from {
opacity: 0;
transform: translate(0px) rotate(60deg) scale(1.0);
}
to {
opacity: 1;
transform: translate(100px) rotate(360deg) scale(1.0);
......@@ -305,7 +308,7 @@ export default {
opacity: 1;
transform: translate(200px) rotate(60deg) scale(2);
}
to {
opacity: 0;
transform: translate(200px) rotate(360deg) scale(2);
......@@ -321,15 +324,15 @@ export default {
<div class="container">
<text>transition</text>
<div class="move_page" onclick="jumpBack"></div>
</div
</div>
```
```js
// xxx.js
import router from '@system.router';
import router from '@ohos.router';
export default {
data: {
},
jumpBack() {
router.back()
......@@ -346,7 +349,7 @@ export default {
width: 100%;
height: 100%;
}
.move_page {
width: 100px;
height: 100px;
......@@ -356,7 +359,7 @@ export default {
transition-duration: 5s;
transition-timing-function: ease;
}
@keyframes go_page {
from {
opacity: 0;
......@@ -367,7 +370,7 @@ export default {
transform:translate(100px) rotate(180deg) scale(2.0);
}
}
@keyframes exit_page {
from {
opacity: 1;
......
en/application-dev/reference/arkui-js/js-components-container-badge.md
浏览文件 @ 7da99f56
......@@ -25,14 +25,14 @@ This component supports only one child component.
In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| ------------------ | ----------- | -------- | ---- | ---------------------------------------- |
| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:<br>- **right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component.|
| count | number | 0 | No | Number of notifications displayed via the badge. The default value is **0**. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.<br>When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.|
| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, set the **count** attribute.|
| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>The largest integer value supported for **maxcount** is **2147483647**.|
| config | BadgeConfig | - | No | Configuration of the badge. |
| label<sup>6+</sup> | string | - | No | Text of the new notification displayed via the badge.<br>When this attribute is set, attributes **count** and **maxcount** do not take effect.|
| Name | Type | Default Value | Mandatory| Description |
| ------------------ | ----------- | -------- | ---- | ------------------------------------------------------------ |
| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:<br>- **right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component.|
| count | number | 0 | No | Number of notifications displayed via the badge. If the value is 0 (default value), the badge is not displayed. If the value is greater than 0, the badge is a number badge.<br>When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.|
| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, also set the **count** attribute.|
| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>The largest integer value supported for **maxcount** is **2147483647**.|
| config | BadgeConfig | - | No | Configuration of the badge. |
| label<sup>6+</sup> | string | - | No | Text of the new notification displayed via the badge.<br>When this attribute is set, attributes **count** and **maxcount** do not take effect.|
**Table 1** BadgeConfig
......@@ -110,4 +110,4 @@ export default {
}
```
![figures1](figures/figures1.png)
![en-us_image_000000117726526811](figures/en-us_image_000000117726526811.png)
en/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @ 7da99f56
......@@ -30,9 +30,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| flex-direction | string | row | No | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.|
| flex-wrap | string | nowrap | No | Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:<br>- **nowrap**: Flex items are displayed in a single line.<br>- **wrap**: Flex items are displayed in multiple lines.|
| justify-content | string | flex-start | No | How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed toward the start edge of the container along the main axis.<br>- **flex-end**: Items are packed toward the end edge of the container along the main axis.<br>- **center**: Items are packed toward the center of the container along the main axis.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.<br>- **space-evenly**<sup>5+</sup>: Items are distributed within the container along the main axis, with even space between each two.|
| align-items | string | stretch<br>| No | How items are aligned along the cross axis of the flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container along the cross axis.<br>- **flex-start**: Items are packed toward the start edge of the cross axis.<br>- **flex-end**: Items are packed toward the end edge of the cross axis.<br>- **center**: Items are packed toward the center of the cross axis.<br>- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.|
| align-items | string | stretch<br>| No | How items are aligned along the cross axis in a flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container along the cross axis.<br>- **flex-start**: Items are packed toward the start edge of the cross axis.<br>- **flex-end**: Items are packed toward the end edge of the cross axis.<br>- **center**: Items are packed toward the center of the cross axis.<br>- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.|
| align-content | string | flex-start | No | Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:<br>- **flex-start**: All rows are packed toward the start edge of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **flex-end**: All rows are packed toward the end edge of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **center**: All rows are packed toward the center of the cross axis. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row.<br>- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.<br>- **space-around**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.|
| display | string | flex | No | Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:<br>- **flex**: flexible layout<br>- **grid**: grid layout<br>- **none**: not rendered<br>- **inline-flex**<sup>9+</sup>: layout with the **flex** and **inline-block** effects.|
| grid-template-[columns\|rows] | string | 1 row, 1 column | No | Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when **display** is set to **grid**.<br>Below are some example values of **grid-template-columns**:<br>- **50px 100px 60px**: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.<br>- **1fr 1fr 2fr**: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.<br>- **30% 20% 50%**: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.<br>- **repeat (2,100px)**: There are two columns. The first column is 100 px, and the second column is 100 px.<br>- **repeat(auto-fill,100px)**<sup>5+</sup>: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size.<br>- **auto 1fr 1fr**: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns.|
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | No | Size of the gap between two consecutive rows or columns in a grid layout. You can also use **grid-gap** to set the same size of the gap between rows and columns. This attribute is valid only when **display** is set to **grid**.|
| grid-row-[start\|end] | number | - | No | Start and end row numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\<div>** container whose **display** style is set to **grid**.|
......@@ -47,6 +46,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
......@@ -246,26 +247,28 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
```html
<!-- xxx.hml -->
<div class="container">
<div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top:{{top}};">
<div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top: {{top}};">
</div>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
}
.content{
width: 200px;
height: 200px;
background-color: red;
}
/* xxx.css */
.container {
flex-direction: column;
width: 100%;
height: 100%;
}
.content {
width: 200px;
height: 200px;
background-color: red;
}
```
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
left:0,
......@@ -281,10 +284,10 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
this.top = e.globalY;
},
dragend(e){
prompt.showToast({
promptAction.showToast({
message: 'End Drag'
})
},
}
}
```
......@@ -318,7 +321,7 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
left:0,
......@@ -329,22 +332,22 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
this.top = e.globalY;
},
dragenter(e){
prompt.showToast({
promptAction.showToast({
message: 'enter'
})
},
dragover(e){
prompt.showToast({
promptAction.showToast({
message: 'over'
})
},
dragleave(e){
prompt.showToast({
promptAction.showToast({
message: 'leave'
})
},
drop(e){
prompt.showToast({
promptAction.showToast({
message: 'drop'
})
}
......@@ -357,8 +360,8 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
```html
<!-- xxx.hml -->
<div class="container">
<div class="content "onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate"
onpinchcancel=" pinchcancel">
<div class="content" onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate"
onpinchcancel="pinchcancel">
</div>
</div>
```
......@@ -370,12 +373,13 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
justify-content: center;
align-items: center;
width: 454px;
height: 454px;}
.content{
height: 454px;
}
.content {
width: 400px;
height: 400px;
background-color: aqua;
margin:30px
margin: 30px;
}
```
......
en/application-dev/reference/arkui-js/js-components-container-list.md
浏览文件 @ 7da99f56
......@@ -72,7 +72,7 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
| scrollend | - | Triggered when the list stops scrolling. |
| scrolltouchup | - | Triggered when the list continues scrolling after the user lifts their fingers. |
| requestitem | - | Triggered for a request to create a list-item.<br>This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay.|
| rotate<sup>7+</sup> | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. |
| rotation<sup>7+</sup> | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. |
## Methods
......@@ -112,22 +112,6 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
</list>
</div>
```
```js
// index.js
export default {
data: {
todolist: [{
title: 'Prepare for the interview',
date: '2021-12-31 10:00:00',
}, {
title: 'Watch the movie',
date: '2021-12-31 20:00:00',
}],
},
}
```
```css
/* index.css */
.container {
......@@ -153,4 +137,21 @@ export default {
}
```
```js
// index.js
export default {
data: {
todolist: [{
title: 'Prepare for the interview',
date: '2021-12-31 10:00:00'
}, {
title: 'Watch the movie',
date: '2021-12-31 20:00:00'
}],
},
}
```
![en-us_image_0000001185033226](figures/en-us_image_0000001185033226.png)
en/application-dev/reference/arkui-js/js-components-container-panel.md
浏览文件 @ 7da99f56
......@@ -86,58 +86,63 @@ The following methods are supported.
```html
<!-- xxx.hml -->
<div class="doc-page">
<div class="btn-div">
<button type="capsule" value="Click here" onclick="showPanel"></button>
</div>
<panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button>
</div>
<div class="btn-div">
<button type="capsule" value="Click here" onclick="showPanel"></button>
</div>
</panel>
<panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{ modeFlag }} mode</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button>
</div>
</div>
</panel>
</div>
```
```css
/* xxx.css */
.doc-page {
flex-direction: column;
justify-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn-div {
width: 100%;
height: 200px;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 200px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.txt {
color: #000000;
font-weight: bold;
font-size: 39px;
color: #000000;
font-weight: bold;
font-size: 39px;
}
.panel-div {
width: 100%;
flex-direction: column;
align-items: center;
width: 100%;
flex-direction: column;
align-items: center;
}
.inner-txt {
width: 100%;
height: 160px;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 160px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.inner-btn {
width: 100%;
height: 120px;
justify-content: center;
align-items: center;
width: 100%;
height: 120px;
justify-content: center;
align-items: center;
}
```
......
en/application-dev/reference/arkui-js/js-components-container-popup.md
浏览文件 @ 7da99f56
......@@ -4,7 +4,7 @@
>
> 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.
The **\<popup>** component is used to display a pop-up to offer instructions after a user clicks a bound component.
## Required Permissions
......@@ -116,7 +116,7 @@ export default {
visibilitychange(e) {
prompt.showToast({
message: 'visibility change visibility: ' + e.visibility,
duration: 3000,
duration: 3000
});
},
showpopup() {
......@@ -124,7 +124,7 @@ export default {
},
hidepopup() {
this.$element("popup").hide();
},
}
}
```
......
en/application-dev/reference/arkui-js/js-components-container-refresh.md
浏览文件 @ 7da99f56
......@@ -4,7 +4,7 @@
>
> 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.
The **<refresh\>** component is used to refresh a page through a pull-down gesture.
## Required Permissions
......@@ -22,7 +22,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| 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.|
| 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.)|
......@@ -36,8 +36,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| 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.|
| background-color | &lt;color&gt; | white<br>| No| Background color of the **\<refresh>** component.|
| progress-color | &lt;color&gt; | black<br>| No| Color of the loading icon of the **\<refresh>** component.|
## Events
......@@ -107,7 +107,7 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are not sup
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
list:[],
......@@ -121,7 +121,7 @@ export default {
}
},
refresh: function (e) {
prompt.showToast({
promptAction.showToast({
message: 'Refreshing...'
})
var that = this;
......@@ -130,7 +130,7 @@ export default {
that.fresh = false;
var addItem ='Refresh element';
that.list.unshift(addItem);
prompt.showToast({
promptAction.showToast({
message: 'Refreshed.'
})
}, 2000)
......
en/application-dev/reference/arkui-js/js-components-container-stepper.md
浏览文件 @ 7da99f56
......@@ -27,7 +27,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| Name | Type | Default Value | Description |
| ----- | ------ | ---- | ------------------------------ |
| index | number | - | Index of the **\<stepper-item>** child component that is currently displayed.|
| index | number | 0 | Index of the **\<stepper-item>** child component to display. By default, the first one is displayed.|
## Styles
......@@ -46,10 +46,10 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
| Name | Parameter | Description |
| ------ | ---------------------------------------- | ---------------------------------------- |
| finish | - | Triggered when the last step on the navigator is complete. |
| skip | - | Triggered when users click the skip button, which works only if you have called **setNextButtonStatus** method to allow users to skip all steps.|
| skip | - | Triggered when users click the skip button to skip steps.|
| change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step.|
| next | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **\<stepper-item>** child component as the next step to go.|
| back | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **\<stepper-item>** child component as the previous step.|
| next | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **<stepper-item>** child component as the next step to go.|
| back | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **<stepper-item>** child component as the previous step.|
## Methods
......@@ -58,101 +58,137 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
| Name | Parameter | Description |
| ------------------- | ---------------------------------------- | ---------------------------------------- |
| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. Available **status** values are as follows:<br>- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.<br>- **disabled**: The next button is grayed out and unavailable.<br>- **waiting**: The next button is not displayed, and a process bar is displayed instead.<br>- **skip**: The skip button is displayed to allow users to skip all remaining steps.|
| setNextButtonStatus | { status: string, label: label } | Sets the text and status of the next button in the step navigator. **label** indicates the button text, and **status** indicates the button status. Available **status** values are as follows:<br>- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.<br>- **disabled**: The next button is grayed out and unavailable.<br>- **waiting**: The next button is not displayed, and a process bar is displayed instead.<br>- **skip**: The skip button is displayed to allow users to skip all remaining steps.|
## Example
```html
<!-- xxx.hml -->
<div class = "container">
<stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick">
<stepper-item class ="stepperItem" label="{{label_1}}">
<div class = "stepperItemContent" >
<text class = "text">First screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
<stepper-item class ="stepperItem" label="{{label_2}}">
<div class = "stepperItemContent" >
<text class = "text">Second screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
<stepper-item class ="stepperItem" label="{{label_3}}">
<div class = "stepperItemContent" >
<text class = "text">Third screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
</stepper>
<div class="container">
<stepper class="stepper" id="mystepper" onnext="nextclick" onback="backclick" onchange="statuschange"
onfinish="finish" onskip="skip" style="height : 100%;">
<stepper-item class="stepper-item" label="{{ label_1 }}">
<div class="item">
<text>Page One</text>
<button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</div>
</stepper-item>
<stepper-item class="stepper-item" label="{{ label_2 }}">
<div class="item">
<text>Page Two</text>
<button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</div>
</stepper-item>
<stepper-item class="stepper-item" label="{{ label_3 }}">
<div class="item">
<text>Page Three</text>
<button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</div>
</stepper-item>
</stepper>
</div>
```
```css
/* xxx.css */
.container {
margin-top: 20px;
flex-direction: column;
align-items: center;
height: 300px;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
background-color: #f7f7f7;
}
.stepperItem {
width: 100%;
flex-direction: column;
align-items: center;
.stepper{
width: 100%;
height: 100%;
}
.stepperItemContent {
color: #0000ff;
font-size: 50px;
justify-content: center;
.stepper-item {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
}
.item{
width: 90%;
height: 86%;
margin-top: 80px;
background-color: white;
border-radius: 60px;
flex-direction: column;
align-items: center;
padding-top: 160px;
}
text {
font-size: 78px;
color: #182431;
opacity: 0.4;
}
.button {
width: 60%;
margin-top: 30px;
justify-content: center;
width: 40%;
margin-top: 100px;
justify-content: center;
}
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data: {
label_1:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_2:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_3:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
},
nextclick(e) {
var index = {
pendingIndex: e.pendingIndex
}
return index;
},
backclick(e) {
var index = {
pendingIndex: e.pendingIndex
data: {
label_1:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_2:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_3:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
}
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({
status: 'waiting', label: 'SKIP'
});
},
nextclick(e) {
var index = {
pendingIndex: e.pendingIndex
}
return index;
},
backclick(e) {
var index = {
pendingIndex: e.pendingIndex
}
return index;
},
statuschange(e) {
prompt.showToast({
message: 'Previous step index' + e.prevIndex + 'Current step index' + e.index
})
},
finish() {
prompt.showToast({
message:'Finished.'
})
},
skip() {
prompt.showToast({
message: 'Skip triggered'
})
}
return index;
},
}
```
![en-us_image_0000001127125114](figures/en-us_image_0000001127125114.gif)
![](figures/stepper.gif)
en/application-dev/reference/arkui-js/js-components-container-swiper.md
浏览文件 @ 7da99f56
......@@ -4,7 +4,7 @@
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Swiper>** component provides a container that allows users to switch among child components using swipe gestures.
The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures.
## Required Permissions
......
en/application-dev/reference/arkui-js/js-components-container-tabs.md
浏览文件 @ 7da99f56
......@@ -13,8 +13,7 @@ None
## Child Components
A **\<tabs>** component can wrap at most one **[\<tab-bar>](../arkui-js/js-components-container-tab-bar.md)** and at most one **[\<tab-content>](../arkui-js/js-components-container-tab-content.md)**.
Only [\<tab-bar>](../arkui-js/js-components-container-tab-bar.md) and [\<tab-content>](../arkui-js/js-components-container-tab-content.md) are supported.
## Attributes
......@@ -23,7 +22,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | ----- | ---- | ---------------------------------------- |
| index | number | 0 | No | Index of the active tab. |
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally.|
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally. |
## Styles
......
en/application-dev/reference/arkui-js/js-components-create-elements.md 0 → 100644
浏览文件 @ 7da99f56
# Dynamic Component Creation
You can dynamically add components with specified attributes and styles to pages.
> **NOTE**
>
> This API is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## createElement
createElement(tag: string): Element
Creates a component object.
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------ | ---- | ------- |
| tag | string | Yes | Component name.|
**Return value**
| Type | Description |
| ----------- | ------------- |
| Element | Component object corresponding to the value of **tag**.|
```js
let newImage = dom.createElement('image')
```
## setAttribute
setAttribute(name: string, value: string): void
Dynamically sets the attributes of this component.
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------ | ---- | ------- |
| name | string | Yes | Attribute name.|
| value | string | Yes | Attribute value.|
```js
newImage.setAttribute('src', 'common/testImage.jpg')
```
## setStyle
setStyle(name: string, value: string): boolean
Dynamically sets the style of this component.
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------ | ---- | ------- |
| name | string | Yes | Style name.|
| value | string | Yes | Style value.|
**Return value**
| Type | Description |
| ----------- | ------------- |
| boolean | Returns **true** if the setting is successful; returns **false** otherwise.|
```js
newImage.setStyle('width', '120px')
```
## addChild
addChild(child: Element): void
Adds a dynamically created component to the parent component.
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------ | ---- | ------- |
| child | Element | Yes | Component object.|
```js
newDiv.addChild(newImage)
```
## Example
```html
<!-- xxx.hml -->
<div class="container">
<div id="parentDiv" class="parent"></div>
<button onclick="appendDiv" class="btn">Dynamically create a <div> component.</button>
<button onclick="appendImage" class="btn">Dynamically create an <image> component and add it to the newly created <div> component.</button>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
width: 100%;
}
.parent {
flex-direction: column;
}
.btn {
width: 70%;
height: 60px;
margin: 15px;
}
```
```js
// xxx.js
let newDiv = null
let newImage = null
export default {
appendDiv() {
let parent = this.$element('parentDiv')
newDiv = dom.createElement('div')
newDiv.setStyle('width', '150px')
newDiv.setStyle('height', '150px')
newDiv.setStyle('backgroundColor', '#AEEEEE')
newDiv.setStyle('marginTop', '15px')
parent.addChild(newDiv)
},
appendImage() {
newImage = dom.createElement('image')
newImage.setAttribute('src', 'common/testImage.jpg')
newImage.setStyle('width', '120px')
newImage.setStyle('height', '120px')
newDiv.addChild(newImage)
}
}
```
en/application-dev/reference/arkui-js/js-components-custom-basic-usage.md
浏览文件 @ 7da99f56
# Basic Usage
# Basic Usage of Custom Components
Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can import a custom component to the host page through **element** as shown in the following code snippet:
Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through **element** as shown in the following code snippet:
```html
<element name='comp' src='../../common/component/comp.hml'></element>
<div>
......@@ -8,8 +9,8 @@ Custom components are existing components encapsulated based on service requirem
</div>
```
The following is an example of using a custom component with **if-else**, which displays **comp1** when **showComp1** is set to **true** and displays **comp2** otherwise.
The following is an example of using a custom component with **if-else**:
```html
<element name='comp1' src='../../common/component/comp1/comp1.hml'></element>
<element name='comp2' src='../../common/component/comp2/comp2.hml'></element>
......@@ -19,18 +20,142 @@ The following is an example of using a custom component with **if-else**:
</div>
```
The **name** attribute indicates the custom component name (optional), which is case-insensitive and is in lowercase by default. The **src** attribute indicates the **.hml** file path (mandatory) of the custom component. If **name** is not set, the **.hml** file name is used as the component name by default.
## Custom Events
To bind an event to a custom child component, use the **(on|@)event-name="bindParentVmMethod"** syntax. **this.$emit('eventName', { params: 'passedParameters' })** is used in the child component to trigger the event and pass parameters to the parent component. The parent component then calls the **bindParentVmMethod** API and receives parameters passed by the child component.
> **NOTE**
>
> For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use **\@children-event** in the parent component instead of **childrenEvent** used in the child component.
**Example 1 with parameters passed**
The following example describes how to define a child component **comp**:
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">Click here to view the hidden text.</text>
<text class="text-style" if="{{showObj}}">hello world</text>
</div>
```
```css
/* comp.css */
.item {
width: 700px;
flex-direction: column;
height: 300px;
align-items: center;
margin-top: 100px;
}
.text-style {
font-weight: 500;
font-family: Courier;
font-size: 40px;
}
```
```js
// comp.js
export default {
data: {
showObj: false,
},
childClicked () {
this.$emit('eventType1');
this.showObj = !this.showObj;
},
}
```
The following example describes how to import **comp** to the parent component:
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
<comp @event-type1="textClicked"></comp>
</div>
```
```css
/* xxx.css */
.container {
background-color: #f8f8ff;
flex: 1;
flex-direction: column;
align-content: center;
}
```
```js
// xxx.js
export default {
textClicked () {}
}
```
**Example 2 with no parameters passed**
The following example describes how to define a child component **comp**:
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">Click here to view the hidden text.</text>
<text class="text-style" if="{{ showObj }}">hello world</text>
</div>
```
```js
// comp.js
export default {
childClicked () {
this.$emit('eventType1', { text: 'Receive the parameters from the child component.' });
this.showObj = !this.showObj;
},
}
```
In the following example, the child component passes the **text** parameter to the parent component, and the parent component obtains the parameter through **e.detail**:
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/comp/comp.hml'></element>
<div class="container">
<text>Parent component: {{text}}</text>
<comp @event-type1="textClicked"></comp>
</div>
```
```js
// xxx.js
export default {
data: {
text: 'Start'
},
textClicked (e) {
this.text = e.detail.text;
},
}
```
![EventParameters](figures/EventParameters.gif)
## Custom Component Data
- The **name** attribute indicates the custom component name (optional), which is case-insensitive and is in lowercase by default. The **src** attribute indicates the **.hml** file path (mandatory) of the custom component. If **name** is not set, the **.hml** file name is used as the component name by default.
- Event binding: Use **(on|@)***child1* syntax to bind a child component event to a custom component. In the child component, use **this.$emit('***child1***', {params:'***parameter to pass***'})** for event triggering and value transferring. In the parent component, call **bindParentVmMethod** method and receive the parameters passed from the child component.
> **NOTE**
>
> For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use **\@children-event** instead of **childrenEvent**: **\@children-event="bindParentVmMethod"**.
In the JS file of a custom component, you can define, pass, and process data by declaring fields such as **data**, **props**, and **computed**. For details about how to use **props** and **computed**, see [Data Transfer and Processing](js-components-custom-props.md).
**Table 1** Objects
**Table 1** Custom component data
| Name | Type | Description |
| Name | Type | Description |
| -------- | --------------- | ---------------------------------------- |
| data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).<br>Do not use this attribute and **private** or **public** at the same time.(Rich) |
| props | Array/Object | Used for communication between components. This attribute can be transferred to components via **\<tag xxxx='value'>**. A **props** name must be in lowercase and cannot start with a dollar sign ($) or underscore (\_). Do not use reserved words (**for**, **if**, **show**, and **tid**). Currently, **props** does not support functions.|
| computed | Object | Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (\_). Do not use reserved words.|
| data | Object \| Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (\_). Do not use reserved words (**for**, **if**, **show**, and **tid**).<br>Do not use this attribute and **private** or **public** at the same time.|
| props | Array \| Object | Used for communication between components. This attribute can be passed to components through **\<tag xxxx='value'>**. A **props** name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**) in the name. Currently, **props** does not support functions.|
| computed | Object | Used for pre-processing for reading and setting parameters. The result is cached. The name cannot start with a dollar sign ($) or underscore (\_). Do not use reserved words.|
en/application-dev/reference/arkui-js/js-components-custom-event-parameter.md 已删除 100644 → 0
浏览文件 @ cac7355d
# Event Parameter
A child component can also pass parameters to an upper-layer component through the bound event. The following example describes how to pass parameters through the custom event:
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">Click to View Hidden Text</text>
<text class="text-style" if="{{ showObj }}">hello world</text>
</div>
```
```js
// comp.js
export default {
childClicked () {
this.$emit('eventType1', {text: 'Received parameters from the child component.'});
this.showObj = !this.showObj;
},
}
```
In the following example, the child component passes the **text** parameter to the parent component, and the parent component obtains the parameter through **e.detail**:
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/comp/comp.hml'></element>
<div class="container">
<text>Parent component: {{text}}</text>
<comp @event-type1="textClicked"></comp>
</div>
```
```js
// xxx.js
export default {
data: {
text: 'Start'
},
textClicked (e) {
this.text = e.detail.text;
},
}
```
![EventParameters](figures/EventParameters.gif)
en/application-dev/reference/arkui-js/js-components-custom-events.md 已删除 100644 → 0
浏览文件 @ cac7355d
# Custom Events
The following example describes how to define a child component **comp**:
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">Click here to view the hidden text.</text>
<text class="text-style" if="{{showObj}}">hello world</text>
</div>
```
```css
/* comp.css */
.item {
width: 700px;
flex-direction: column;
height: 300px;
align-items: center;
margin-top: 100px;
}
.text-style {
font-weight: 500;
font-family: Courier;
font-size: 40px;
}
```
```js
// comp.js
export default {
data: {
showObj: false,
},
childClicked () {
this.$emit('eventType1');
this.showObj = !this.showObj;
},
}
```
The following example describes how to introduce the child component:
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
<comp @event-type1="textClicked"></comp>
</div>
```
```css
/* xxx.css */
.container {
background-color: #f8f8ff;
flex: 1;
flex-direction: column;
align-content: center;
}
```
```js
// xxx.js
export default {
textClicked () {},
}
```
For more information, see [Basic Usage](./js-components-custom-basic-usage.md).
en/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
浏览文件 @ 7da99f56
......@@ -5,7 +5,7 @@
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
We provide a range of lifecycle callbacks for custom components, including **onInit**, **onAttached**, **onDetached**, **onLayoutReady**, **onDestroy**, **onShow**, and **onHide**. You can use these callbacks to manage the internal logic of your custom components. The following describes the times when the lifecycle callbacks are invoked.
A range of lifecycle callbacks are provided for custom components, including **onInit**, **onAttached**, **onDetached**, **onLayoutReady**, **onDestroy**, **onShow**, and **onHide**. You can use these callbacks to manage the internal logic of your custom components. The following describes the times when the lifecycle callbacks are invoked.
| Attribute | Type | Description | Invoked When |
......@@ -13,7 +13,7 @@ We provide a range of lifecycle callbacks for custom components, including **onI
| onInit | Function | Custom component initialization | The custom component is created. This callback is invoked once.|
| onAttached | Function | Custom component loading | The custom component is added to the **\<Page>** component tree. When this callback is invoked, related data can be displayed during the lifecycle in scenarios such as image loading and animation playback.|
| onLayoutReady | Function | Component layout completion| Layout calculation, including content size and position adjustment, is complete for the custom component.|
| onDetached | Function | Custom component removal | The custom component is removed. It is usually used to stop animation or asynchronous logic execution.|
| onDetached | Function | Custom component detachment | The custom component is detached. It is usually used to stop animation or asynchronous logic execution. |
| onDestroy | Function | Custom component destruction | The custom component is destroyed. It is usually used to release resources. |
| onShow | Function | Page display of a custom component| The page where the custom component is located is displayed. |
| onHide | Function | Page hiding of a custom component| The page where the custom component is located is hidden. |
......@@ -24,7 +24,7 @@ We provide a range of lifecycle callbacks for custom components, including **onI
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style">{{value}}</text>
<text class="text-style">{{ value }}</text>
</div>
```
......@@ -39,9 +39,7 @@ export default {
},
onAttached() {
this.value = "Load the component."
},
onDetached() {
this.value = ""
console.log ("Component loaded.")
},
onShow() {
console.log ("Page displayed.")
......
en/application-dev/reference/arkui-js/js-components-custom-props.md
浏览文件 @ 7da99f56
# props<a name="EN-US_TOPIC_0000001173164675"></a>
# Data Transfer and Processing
You can use **props** to declare attributes of a custom component and pass the attributes to the child component. The supported types of **props** include String, Number, Boolean, Array, Object, and Function. Note that a camel case attribute name \(**compProp**\) should be converted to the kebab case format \(**comp-prop**\) when you reference the attribute in an external parent component. You can add **props** to a custom component, and pass the attribute to the child component.
```
## props
You can use **props** to declare attributes of a custom component and pass the attributes to the child component. The supported types of **props** include String, Number, Boolean, Array, Object, and Function. Note that a camel case attribute name (**compProp**) should be converted to the kebab case format (**comp-prop**) when you reference the attribute in an external parent component. The following is sample for adding **props** to a custom component and passing the attribute to the child component.
```html
<!-- comp.hml -->
<div class="item">
<text class="title-style">{{compProp}}</text>
</div>
```
```
```js
// comp.js
export default {
props: ['compProp'],
}
```
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp/comp.hml'></element>
<div class="container">
......@@ -24,21 +27,22 @@ export default {
</div>
```
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>The name of a custom attribute cannot start with reserved keywords such as **on**, **@**, **on:**, and **grab:**.
> **NOTE**
>
> The name of a custom attribute cannot start with reserved keywords such as **on**, **@**, **on:**, and **grab:**.
## Default Value<a name="section448655843113"></a>
### Default Value
You can set the default value for a child component attribute via **default**. The default value is used if the parent component does not have **default** set. In this case, the **props** attribute must be in object format instead of an array.
You can set the default value for a child component attribute via **default**. The default value is used if the parent component does not have **default** set. In this case, the **props** attribute must be in object format instead of an array.
```
```html
<!-- comp.hml -->
<div class="item">
<text class="title-style">{{title}}</text>
</div>
```
```
```js
// comp.js
export default {
props: {
......@@ -49,21 +53,21 @@ export default {
}
```
In this example, a **<text\>** component is added to display the title. The title content is a custom attribute, which displays the text specified by a user. If the user has not set a title, the default text will be displayed. Add the attribute when referencing the custom component.
In this example, a **\<text>** component is added to display the title. The title content is a custom attribute, which displays the text specified by a user. If the user has not set a title, the default text will be displayed. Add the attribute when referencing the custom component.
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp/comp.hml'></element>
<div class="container">
<comp title=" Custom component "></comp>
<comp title="Custom component"></comp>
</div>
```
## Unidirectional Value Transfer<a name="section9681151218247"></a>
### Unidirectional Value Transfer
Data can be transferred only from the parent component to child components. You are not allowed to change the value passed to the child component. However, you can receive the value passed by **props** as a default value in **data**, and then change the **data** value.
Data can be transferred only from the parent component to child components. You are not allowed to change the value passed to the child component. However, you can receive the value passed by **props** as a default value in **data**, and then change the **data** value.
```
```js
// comp.js
export default {
props: ['defaultCount'],
......@@ -78,11 +82,11 @@ export default {
}
```
## Monitoring Data Changes by **$watch**<a name="section205821113182114"></a>
### Monitoring Data Changes by **$watch**
To listen for attribute changes in a component, you can use the **$watch** method to add a callback. The following code snippet shows how to use **$watch**:
To listen for attribute changes in a component, you can use the **$watch** method to add a callback. The following code snippet shows how to use **$watch**:
```
```js
// comp.js
export default {
props: ['title'],
......@@ -90,16 +94,17 @@ export default {
this.$watch('title', 'onPropertyChange');
},
onPropertyChange(newV, oldV) {
console.info('title attribute changed'+ newV + ' ' + oldV)
console.info('title attribute changed'+ newV + ' ' + oldV)
},
}
```
## Computed Property<a name="section1088954011234"></a>
To improve the development efficiency, you can use a computed property to pre-process an attribute in a custom component before reading or setting the attribute. In the **computed** field, you can set a getter or setter to be triggered when the attribute is read or written, respectively. The following is an example:
## computed
```
To improve the development efficiency, you can use a computed property to pre-process an attribute in a custom component before reading or setting the attribute. In the **computed** field, you can set a getter or setter to be triggered when the attribute is read or written, respectively. The following is an example:
```js
// comp.js
export default {
props: ['title'],
......@@ -129,5 +134,4 @@ export default {
}
```
The first computed property **message** has only a getter. The value of **message** changes depending on the **objTitle** value. The getter can only read but cannot set the value. You need a setter \(such as **notice** in the sample code\) to set the value of the computed property.
The first computed property **message** has only a getter. The value of **message** changes depending on the **objTitle** value. The getter can only read but cannot set the value (such as **time** defined during initialization in **data**). You need a setter (such as **notice** in the sample code) to set the value of the computed property.
en/application-dev/reference/arkui-js/js-components-custom-slot.md
浏览文件 @ 7da99f56
# slot<a name="EN-US_TOPIC_0000001127284840"></a>
# slot
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Default Slot<a name="section68133181214"></a>
You can use the **<slot\>** tag to create a slot inside a custom component to fill the content defined in the parent component. The sample code is as follows:
## Default Slot
```
You can use the **\<slot>** tag to create a slot inside a custom component to fill the content defined in the parent component. The sample code is as follows:
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style">The following uses the content defined in the parent component.</text>
......@@ -16,22 +18,22 @@ You can use the **<slot\>** tag to create a slot inside a custom component to
```
The following references the custom component:
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
<comp>
<text class="text-style">Content defined in the parent component</text>
<text class="text-style">Content defined in the parent component</text>
</comp>
</div>
```
## Named Slot<a name="section18337143291211"></a>
When multiple slots are need inside a custom component, you can name them, so that you can specify the slot in which you want to fill content by setting the **<name\>** attribute.
## Named Slot
```
When multiple slots are need inside a custom component, you can name them, so that you can specify the slot in which you want to fill content by setting the **<name>** attribute.
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style">The following uses the content defined in the parent component.</text>
......@@ -41,8 +43,7 @@ When multiple slots are need inside a custom component, you can name them, so th
```
The following references the custom component:
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
......@@ -53,6 +54,6 @@ The following references the custom component:
</div>
```
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>**<name\>** and **<slot\>** do not support dynamic data binding.
> **NOTE**
>
> **\<name>** and **\<slot>** do not support dynamic data binding.
en/application-dev/reference/arkui-js/js-components-custom-style.md
浏览文件 @ 7da99f56
# Style Inheritance
> **NOTE**<br/>
> The APIs of this module are supported since API 9. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
A custom component has the **inherit-class** attribute, which is defined in the following table.
| Name | Type | Default Value| Mandatory| Description |
| ------------ | ------ | ------ | ---- | ------------------------------------------------------ |
| inherit-class | string | - | No | Class styles inherited from the parent component, seperated by spaces.|
| Name | Type | Default Value | Mandatory | Description |
| ------------- | ------ | ---- | ---- | -------------------------------- |
| inherit-class | string | - | No | Class styles inherited from the parent component, separated by spaces.|
To enable a custom component to inherit the styles of its parent component, set the **inherit-calss** attribute for the custom component.
The example below is a code snippet in the HML file of the parent page that references a custom component named **comp**. This component uses the **inherit-class** attribute to inherit the styles of its parent component: **parent-class1** and **parent-class2**.
The example below is a code snippet in the HML file of the parent component that references a custom component named **comp**. This component uses the **inherit-class** attribute to inherit the styles of its parent component: **parent-class1** and **parent-class2**.
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
......@@ -20,9 +23,10 @@ The example below is a code snippet in the HML file of the parent page that refe
</div>
```
Code snippet in the CSS file of the parent page:
```html
// xxx.css
Code snippet in the CSS file of the parent component:
```css
/* xxx.css */
.parent-class1 {
background-color:red;
border:2px;
......@@ -34,6 +38,7 @@ Code snippet in the CSS file of the parent page:
```
Code snippet in the HML file of the custom component, where **parent-class1** and **parent-class2** are styles inherited from the parent component:
```html
<!--comp.hml-->
<div class="item">
......
en/application-dev/reference/arkui-js/js-components-media-video.md
浏览文件 @ 7da99f56
......@@ -3,17 +3,7 @@
> **NOTE**
>
> - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
>
> - Set **configChanges** under **abilities** in the **config.json** file to **orientation**.
> ```
> "abilities": [
> {
> "configChanges": ["orientation"],
> ...
> }
> ]
> ```
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<video>** component provides a video player.
......@@ -27,58 +17,58 @@ Not supported
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | ------------- | --------- | ---------------------------------------- |
| muted | boolean | false | No | Whether the video is muted. |
| src | string | - | No | Path of the video content to play. |
| autoplay | boolean | false | No | Whether the video is played automatically after being rendered. |
| controls | boolean | true | No | Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar. |
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | ----- | ---- | ---------------------------------------- |
| muted | boolean | false | No | Whether the video is muted. |
| src | string | - | No | Path of the video content to play. |
| autoplay | boolean | false | No | Whether the video is played automatically after being rendered. |
| controls | boolean | true | No | Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.|
## 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 |
| ---------- | ------ | ------------- | --------- | ---------------------------------------- |
| object-fit | string | contain | No | Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums. |
| Name | Type | Default Value | Mandatory | Description |
| ---------- | ------ | ------- | ---- | ---------------------------------------- |
| object-fit | string | contain | No | Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.|
**Table 1** object-fit enums
| Type | Description |
| ---- | ---------------------------------------- |
| fill | The image is resized to fill the display area, and its aspect ratio is not retained. |
| Type | Description |
| ---- | ------------------------- |
| fill | The image is resized to fill the display area, and its aspect ratio is not retained.|
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| ---------- | ---------------------------------------- | ---------------------------------------- |
| prepared | {&nbsp;duration:&nbsp;value&nbsp;}<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**. |
| start | - | Triggered when the video is played. |
| pause | - | Triggered when the video playback is paused. |
| finish | - | Triggered when the video playback is finished. |
| error | - | Triggered when the video playback fails. |
| seeking | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| seeked | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| timeupdate | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
| Name | Parameter | Description |
| ---------- | ---------------------------------------- | ------------------------------------- |
| prepared | { duration: value }<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
| start | - | Triggered when the video is played. |
| pause | - | Triggered when the video playback is paused. |
| finish | - | Triggered when the video playback is finished. |
| error | - | Triggered when the video playback fails. |
| seeking | { currenttime: value } | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| seeked | { currenttime: value } | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| timeupdate | { currenttime: value } | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name | Parameter | Description |
| -------------- | ------------------------------------- | ---------------------------------------- |
| start | - | Starts playing a video. |
| pause | - | Pauses a video. |
| setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | Sets the video playback position, in seconds. |
| Name | Parameter | Description |
| -------------- | ------------------------------------- | ----------------- |
| start | - | Starts playing a video. |
| pause | - | Pauses a video. |
| setCurrentTime | { currenttime: value } | Sets the video playback position, in seconds.|
> **NOTE**
> **NOTE**
>
> The methods in the above table can be called after the **attached** callback is invoked.
> The methods in the above table can be called after the **attached** callback is invoked.
## Example
......
en/application-dev/reference/arkui-js/js-components-svg-animate.md
浏览文件 @ 7da99f56
......@@ -52,7 +52,7 @@ Not supported
```
![zh-cn_image_0000001173324703](figures/zh-cn_image_0000001173324703.gif)
![en-us_image_0000001173324703](figures/en-us_image_0000001173324703.gif)
```html
......@@ -68,7 +68,7 @@ Not supported
```
![zh-cn_image_0000001167662852](figures/zh-cn_image_0000001167662852.gif)
![en-us_image_0000001167662852](figures/en-us_image_0000001167662852.gif)
```html
......@@ -83,7 +83,7 @@ Not supported
```
![zh-cn_image_0000001127284938](figures/zh-cn_image_0000001127284938.gif)
![en-us_image_0000001127284938](figures/en-us_image_0000001127284938.gif)
```html
......@@ -117,4 +117,4 @@ Not supported
```
![animate-4](figures/animate-4.gif)
![en-us_image_0000001127125126](figures/en-us_image_0000001127125126.gif)
en/application-dev/reference/arkui-js/js-components-svg-animatemotion.md
浏览文件 @ 7da99f56
......@@ -24,7 +24,7 @@ The **animate** attributes (**values** does not take effect) and the attributes
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| keyPoints | string | - | Yes| Point position of a group of key frames. The value of each frame is the distance proportion of the object along the path. The function is the same as that of **values** in the **animate** attribute.|
| path | string | - | Yes| Motion path. The syntax is the same as that of the **d** attribute of the **\<path>** component. |
| path | string | - | Yes| Motion path. The syntax is the same as that of the **d** attribute of the **\<path>** component.|
| rotate | [auto \| auto-reverse \| &lt;number&gt;] | auto | No| Rotation direction of an animation object.|
......@@ -38,7 +38,7 @@ The **animate** attributes (**values** does not take effect) and the attributes
<path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
......
en/application-dev/reference/arkui-js/js-components-svg-animatetransform.md
浏览文件 @ 7da99f56
......@@ -194,6 +194,7 @@ Example of involved components
dur="3s" repeatCount="indefinite"></animateTransform>
</rect>
<text x="20" y="700" fill="#D2691E" font-size="40">
animate-transform
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
dur="3s" repeatCount="indefinite"></animateTransform>
</text>
......
en/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ 7da99f56
......@@ -6,9 +6,9 @@ The **\<textPath>** component is used to draw text along the path.
> **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The **\<tspan>** component can be nested in the **\<textPath>** component for segmenting.
> - This component can have **\<tspan>** components nested for segmenting.
>
> - The **\<textPath>** component can only be nested in the **\<text>** component.
> - This component can only be nested in the **\<text>** component.
## Required Permissions
......@@ -26,19 +26,19 @@ The **[\<tspan>](js-components-svg-tspan.md)** child component is supported.
The attributes in the following table are supported.
| Name | Type | Mandatory | Description |
| Name | Type | Default Value| Description |
| -------------- | ---------------------------------- | ------ | ------------------------------------------------------------ |
| id | string | - | Unique ID of the component. |
| path | string | No | Shape of the path.<br>The meanings of the letters are as follows:<br>-&nbsp;M&nbsp;=&nbsp;moveto<br>-&nbsp;L&nbsp;=&nbsp;lineto<br>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br>-&nbsp;C&nbsp;=&nbsp;curveto<br>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br>-&nbsp;Z&nbsp;=&nbsp;closepath<br>Default value: **0**|
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | Yes | Offset of the text start point relative to the path start point.<br>Default value: **0** |
| font-size | &lt;length&gt; | No | Font size.<br>Default value: **30px** |
| fill | &lt;color&gt; | No | Font fill color.<br>Default value: **black** |
| by | number | No | Attribute offset relative to the specified animation. By default, **from** is the original attribute value. |
| opacity | number | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.<br>Default value: **0**|
| fill-opacity | number | No | Font fill opacity.<br>Default value: **1.0** |
| stroke | &lt;color&gt; | No | Stroke color.<br>Default value: **black** |
| stroke-width | number | No | Stroke width.<br>Default value: **1px** |
| stroke-opacity | number | No | Stroke opacity.<br>Default value: **1.0** |
| path | string | 0 | Shape of the path.<br>The meanings of the letters are as follows:<br>- M = moveto<br>- L = lineto<br>- H = horizontal lineto<br>- V = vertical lineto<br>- C = curveto<br>- S = smooth curveto<br>- Q = quadratic Belzier curve<br>- T = smooth quadratic Belzier curveto<br>- A = elliptical Arc<br>- Z = closepath<br>Default value: **0**|
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | Offset of the text start point relative to the path start point.<br>Default value: **0** |
| font-size | &lt;length&gt; | 30px | Font size.<br>Default value: **30px** |
| fill | &lt;color&gt; | black | Font fill color.<br>Default value: **black** |
| by | number | - | Attribute offset relative to the specified animation. By default, **from** is the original attribute value. |
| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.<br>Default value: **0**|
| fill-opacity | number | 1.0 | Font fill opacity.<br>Default value: **1.0** |
| stroke | &lt;color&gt; | black | Stroke color.<br>Default value: **black** |
| stroke-width | number | 1px | Stroke width.<br>Default value: **1px** |
| stroke-opacity | number | 1.0 | Stroke opacity.<br>Default value: **1.0** |
## Example
......@@ -97,9 +97,9 @@ Combination of **\<textpath>** and **\<tspan>**
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
<path d="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600" stroke="red" fill="none"></path>
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path>
<text>
<textpath fill="#D2691E" path="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600"font-size="30px" stroke="black" stroke-width="1" >
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px" stroke="black" stroke-width="1" >
This is TextPath.
<tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan>
<tspan font-size="30px">Let's play.</tspan>
......@@ -117,11 +117,11 @@ Combination of **\<textpath>** and **\<tspan>**
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none">
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path>
<!-- Value percentage -->
<text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px">
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath.
<tspan x="50" fill="blue">This is first tspan.</tspan>
<tspan x="50%">This is second tspan.</tspan>
......@@ -172,10 +172,10 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none">
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path>
<text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px">
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath.
<tspan x="50" fill="blue">
tspan attribute x|rotate
......@@ -209,11 +209,11 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
<path d="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" stroke="red"
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none">
</path>
<text>
<textpath fill="#D2691E" path="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" font-size="30px">
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath.
<tspan dx="20" fill="blue">
tspan attribute fill|fill-opacity
......@@ -247,11 +247,11 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
<path d="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" stroke="red"
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none">
</path>
<text>
<textpath fill="#D2691E" path="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" font-size="30px">
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath.
<tspan dx="20" fill="blue">
tspan attribute stroke
......
en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
浏览文件 @ 7da99f56
......@@ -14,12 +14,12 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D**
| Name | Type | Description |
| ------ | ------ | ---------------------------------------- |
| filter | string | Image filter.<br>Available options are as follows:<br>- **blur**: applies the Gaussian blur for the image.<br>- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **contrast**: adjusts the image contrast.<br>- **drop-shadow**: sets a shadow effect for the image.<br>- **grayscale**: converts the image to a grayscale image.<br>- **hue-rotate**: applies hue rotation to the image.<br>- **invert**: inverts the input image.<br>- **opacity**: sets the opacity of the image.<br>- **saturate**: sets the saturation of the image.<br>- **sepia**: converts the image to dark brown. |
| filter | string | Image filter.<br>Available options are as follows:<br>- **blur**: applies the Gaussian blur for the image.<br>- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **contrast**: adjusts the image contrast.<br>- **drop-shadow**: sets a shadow effect for the image.<br>- **grayscale**: converts the image to a grayscale image.<br>- **hue-rotate**: applies hue rotation to the image.<br>- **invert**: inverts the image.<br>- **opacity**: sets the image opacity.<br>- **saturate**: sets the image saturation.<br>- **sepia**: converts the image to sepia.|
**Example**
```html
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<div style="width: 500px; height: 500px;">
<canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -95,7 +95,7 @@ Checks whether a specified point is in the path area.
**Example**
```html
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<div style="width: 500px; height: 500px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
......@@ -145,7 +145,7 @@ Checks whether a specified point is on the edge line of a path.
**Example**
```html
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<div style="width: 500px; height: 500px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
......@@ -181,7 +181,7 @@ resetTransform(): void
**Example**
```html
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<div style="width: 500px; height: 500px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
......@@ -199,13 +199,13 @@ export default {
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
offscreenCanvasCtx.fillStyle = 'gray';
offscreenCanvasCtx.fillStyle = '#a9a9a9';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
// Non-skewed rectangles
offscreenCanvasCtx.resetTransform();
offscreenCanvasCtx.fillStyle = 'red';
offscreenCanvasCtx.fillStyle = '#ff0000';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
......
en/application-dev/reference/arkui-ts/Readme-EN.md
浏览文件 @ 7da99f56
# ArkTS-based Declarative Development Paradigm
- [Component Overview](ts-components-summary.md)
- Universal Component Information
- Universal Events
- [Click Event](ts-universal-events-click.md)
- [Touch Event](ts-universal-events-touch.md)
- [Show/Hide Event](ts-universal-events-show-hide.md)
- [Drag/Drop Event](ts-universal-events-drag-drop.md)
- [Key Event](ts-universal-events-key.md)
- [Focus Event](ts-universal-focus-event.md)
- [Mouse Event](ts-universal-mouse-key.md)
- [Component Area Change Event](ts-universal-component-area-change-event.md)
- [Visible Area Change Event](ts-universal-component-visible-area-change-event.md)
- Universal Attributes
- [Size](ts-universal-attributes-size.md)
- [Location](ts-universal-attributes-location.md)
- [Layout Constraints](ts-universal-attributes-layout-constraints.md)
- [Flex Layout](ts-universal-attributes-flex-layout.md)
- [Border](ts-universal-attributes-border.md)
- [Border Image](ts-universal-attributes-border-image.md)
- [Background](ts-universal-attributes-background.md)
- [Opacity](ts-universal-attributes-opacity.md)
- [Visibility](ts-universal-attributes-visibility.md)
- [Enable/Disable](ts-universal-attributes-enable.md)
- [Overlay](ts-universal-attributes-overlay.md)
- [Z-order Control](ts-universal-attributes-z-order.md)
- [Transformation](ts-universal-attributes-transformation.md)
- [Image Effect Configuration](ts-universal-attributes-image-effect.md)
- [Shape Clipping](ts-universal-attributes-sharp-clipping.md)
- [Text Style](ts-universal-attributes-text-style.md)
- [Grid](ts-universal-attributes-grid.md)
- [Gradient Color](ts-universal-attributes-gradient-color.md)
- [Popup Control](ts-universal-attributes-popup.md)
- [Menu Control](ts-universal-attributes-menu.md)
- [Click Control](ts-universal-attributes-click.md)
- [Focus Control](ts-universal-attributes-focus.md)
- [Hover Effect](ts-universal-attributes-hover-effect.md)
- [Component ID](ts-universal-attributes-component-id.md)
- [Touch Target](ts-universal-attributes-touch-target.md)
- [Polymorphic Style](ts-universal-attributes-polymorphic-style.md)
- [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
- [Background Blur](ts-universal-attributes-backgroundBlurStyle.md)
- [restoreId](ts-universal-attributes-restoreId.md)
- Gesture Processing
- [Gesture Binding Methods](ts-gesture-settings.md)
- Basic Gestures
- [TapGesture](ts-basic-gestures-tapgesture.md)
- [LongPressGesture](ts-basic-gestures-longpressgesture.md)
- [PanGesture](ts-basic-gestures-pangesture.md)
- [PinchGesture](ts-basic-gestures-pinchgesture.md)
- [RotationGesture](ts-basic-gestures-rotationgesture.md)
- [SwipeGesture](ts-basic-gestures-swipegesture.md)
- [Combined Gestures](ts-combined-gestures.md)
- Universal Events
- [Click Event](ts-universal-events-click.md)
- [Touch Event](ts-universal-events-touch.md)
- [Show/Hide Event](ts-universal-events-show-hide.md)
- [Drag/Drop Event](ts-universal-events-drag-drop.md)
- [Key Event](ts-universal-events-key.md)
- [Focus Event](ts-universal-focus-event.md)
- [Mouse Event](ts-universal-mouse-key.md)
- [Component Area Change Event](ts-universal-component-area-change-event.md)
- [Visible Area Change Event](ts-universal-component-visible-area-change-event.md)
- Universal Attributes
- [Size](ts-universal-attributes-size.md)
- [Location](ts-universal-attributes-location.md)
- [Layout Constraints](ts-universal-attributes-layout-constraints.md)
- [Flex Layout](ts-universal-attributes-flex-layout.md)
- [Border](ts-universal-attributes-border.md)
- [Border Image](ts-universal-attributes-border-image.md)
- [Background](ts-universal-attributes-background.md)
- [Opacity](ts-universal-attributes-opacity.md)
- [Visibility](ts-universal-attributes-visibility.md)
- [Enable/Disable](ts-universal-attributes-enable.md)
- [Overlay](ts-universal-attributes-overlay.md)
- [Z-order Control](ts-universal-attributes-z-order.md)
- [Transformation](ts-universal-attributes-transformation.md)
- [Image Effect Configuration](ts-universal-attributes-image-effect.md)
- [Shape Clipping](ts-universal-attributes-sharp-clipping.md)
- [Text Style](ts-universal-attributes-text-style.md)
- [Grid](ts-universal-attributes-grid.md)
- [Gradient Color](ts-universal-attributes-gradient-color.md)
- [Popup Control](ts-universal-attributes-popup.md)
- [Menu Control](ts-universal-attributes-menu.md)
- [Click Control](ts-universal-attributes-click.md)
- [Focus Control](ts-universal-attributes-focus.md)
- [Hover Effect](ts-universal-attributes-hover-effect.md)
- [Component ID](ts-universal-attributes-component-id.md)
- [Touch Target](ts-universal-attributes-touch-target.md)
- [Polymorphic Style](ts-universal-attributes-polymorphic-style.md)
- [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
- [Background Blur](ts-universal-attributes-backgroundBlurStyle.md)
- [restoreId](ts-universal-attributes-restoreId.md)
- Gesture Processing
- [Gesture Binding Methods](ts-gesture-settings.md)
- Basic Gestures
- [TapGesture](ts-basic-gestures-tapgesture.md)
- [LongPressGesture](ts-basic-gestures-longpressgesture.md)
- [PanGesture](ts-basic-gestures-pangesture.md)
- [PinchGesture](ts-basic-gestures-pinchgesture.md)
- [RotationGesture](ts-basic-gestures-rotationgesture.md)
- [SwipeGesture](ts-basic-gestures-swipegesture.md)
- [Combined Gestures](ts-combined-gestures.md)
- Basic Components
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md)
- [CheckboxGroup](ts-basic-components-checkboxgroup.md)
- [DataPanel](ts-basic-components-datapanel.md)
- [DatePicker](ts-basic-components-datepicker.md)
- [Divider](ts-basic-components-divider.md)
- [Gauge](ts-basic-components-gauge.md)
- [Image](ts-basic-components-image.md)
- [ImageAnimator](ts-basic-components-imageanimator.md)
- [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Marquee](ts-basic-components-marquee.md)
- [Navigation](ts-basic-components-navigation.md)
- [PatternLock](ts-basic-components-patternlock.md)
- [PluginComponent](ts-basic-components-plugincomponent.md)
- [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md)
- [Rating](ts-basic-components-rating.md)
- [RemoteWindow](ts-basic-components-remotewindow.md)
- [RichText](ts-basic-components-richtext.md)
- [ScrollBar](ts-basic-components-scrollbar.md)
- [Search](ts-basic-components-search.md)
- [Select](ts-basic-components-select.md)
- [Slider](ts-basic-components-slider.md)
- [Span](ts-basic-components-span.md)
- [Stepper](ts-basic-components-stepper.md)
- [StepperItem](ts-basic-components-stepperitem.md)
- [Text](ts-basic-components-text.md)
- [TextArea](ts-basic-components-textarea.md)
- [TextClock](ts-basic-components-textclock.md)
- [TextInput](ts-basic-components-textinput.md)
- [TextPicker](ts-basic-components-textpicker.md)
- [TextTimer](ts-basic-components-texttimer.md)
- [TimePicker](ts-basic-components-timepicker.md)
- [Toggle](ts-basic-components-toggle.md)
- [Web](ts-basic-components-web.md)
- [XComponent](ts-basic-components-xcomponent.md)
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md)
- [CheckboxGroup](ts-basic-components-checkboxgroup.md)
- [DataPanel](ts-basic-components-datapanel.md)
- [DatePicker](ts-basic-components-datepicker.md)
- [Divider](ts-basic-components-divider.md)
- [Gauge](ts-basic-components-gauge.md)
- [Image](ts-basic-components-image.md)
- [ImageAnimator](ts-basic-components-imageanimator.md)
- [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Marquee](ts-basic-components-marquee.md)
- [Navigation](ts-basic-components-navigation.md)
- [NavRouter](ts-basic-components-navrouter.md)
- [NavDestination](ts-basic-components-navdestination.md)
- [PatternLock](ts-basic-components-patternlock.md)
- [PluginComponent](ts-basic-components-plugincomponent.md)
- [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md)
- [Rating](ts-basic-components-rating.md)
- [RemoteWindow](ts-basic-components-remotewindow.md)
- [RichText](ts-basic-components-richtext.md)
- [ScrollBar](ts-basic-components-scrollbar.md)
- [Search](ts-basic-components-search.md)
- [Select](ts-basic-components-select.md)
- [Slider](ts-basic-components-slider.md)
- [Span](ts-basic-components-span.md)
- [Stepper](ts-basic-components-stepper.md)
- [StepperItem](ts-basic-components-stepperitem.md)
- [Text](ts-basic-components-text.md)
- [TextArea](ts-basic-components-textarea.md)
- [TextClock](ts-basic-components-textclock.md)
- [TextInput](ts-basic-components-textinput.md)
- [TextPicker](ts-basic-components-textpicker.md)
- [TextTimer](ts-basic-components-texttimer.md)
- [TimePicker](ts-basic-components-timepicker.md)
- [Toggle](ts-basic-components-toggle.md)
- [Web](ts-basic-components-web.md)
- [XComponent](ts-basic-components-xcomponent.md)
- Container Components
- [AbilityComponent](ts-container-ability-component.md)
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md)
- [Column](ts-container-column.md)
- [ColumnSplit](ts-container-columnsplit.md)
- [Counter](ts-container-counter.md)
- [Flex](ts-container-flex.md)
- [GridContainer](ts-container-gridcontainer.md)
- [GridCol](ts-container-gridcol.md)
- [GridRow](ts-container-gridrow.md)
- [Grid](ts-container-grid.md)
- [GridItem](ts-container-griditem.md)
- [List](ts-container-list.md)
- [ListItem](ts-container-listitem.md)
- [ListItemGroup](ts-container-listitemgroup.md)
- [Navigator](ts-container-navigator.md)
- [Panel](ts-container-panel.md)
- [Refresh](ts-container-refresh.md)
- [RelativeContainer](ts-container-relativecontainer.md)
- [Row](ts-container-row.md)
- [RowSplit](ts-container-rowsplit.md)
- [Scroll](ts-container-scroll.md)
- [SideBarContainer](ts-container-sidebarcontainer.md)
- [Stack](ts-container-stack.md)
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- [AbilityComponent](ts-container-ability-component.md)
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md)
- [Column](ts-container-column.md)
- [ColumnSplit](ts-container-columnsplit.md)
- [Counter](ts-container-counter.md)
- [Flex](ts-container-flex.md)
- [FlowItem](ts-container-flowitem.md)
- [GridCol](ts-container-gridcol.md)
- [GridRow](ts-container-gridrow.md)
- [Grid](ts-container-grid.md)
- [GridItem](ts-container-griditem.md)
- [List](ts-container-list.md)
- [ListItem](ts-container-listitem.md)
- [ListItemGroup](ts-container-listitemgroup.md)
- [Navigator](ts-container-navigator.md)
- [Panel](ts-container-panel.md)
- [Refresh](ts-container-refresh.md)
- [RelativeContainer](ts-container-relativecontainer.md)
- [Row](ts-container-row.md)
- [RowSplit](ts-container-rowsplit.md)
- [Scroll](ts-container-scroll.md)
- [SideBarContainer](ts-container-sidebarcontainer.md)
- [Stack](ts-container-stack.md)
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- [WaterFlow](ts-container-waterflow.md)
- Media Components
- [Video](ts-media-components-video.md)
- [Video](ts-media-components-video.md)
- Drawing Components
- [Circle](ts-drawing-components-circle.md)
- [Ellipse](ts-drawing-components-ellipse.md)
- [Line](ts-drawing-components-line.md)
- [Polyline](ts-drawing-components-polyline.md)
- [Polygon](ts-drawing-components-polygon.md)
- [Path](ts-drawing-components-path.md)
- [Rect](ts-drawing-components-rect.md)
- [Shape](ts-drawing-components-shape.md)
- [Circle](ts-drawing-components-circle.md)
- [Ellipse](ts-drawing-components-ellipse.md)
- [Line](ts-drawing-components-line.md)
- [Polyline](ts-drawing-components-polyline.md)
- [Polygon](ts-drawing-components-polygon.md)
- [Path](ts-drawing-components-path.md)
- [Rect](ts-drawing-components-rect.md)
- [Shape](ts-drawing-components-shape.md)
- Canvas Components
- [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
- [CanvasGradient](ts-components-canvas-canvasgradient.md)
- [ImageBitmap](ts-components-canvas-imagebitmap.md)
- [ImageData](ts-components-canvas-imagedata.md)
- [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
- [CanvasGradient](ts-components-canvas-canvasgradient.md)
- [ImageBitmap](ts-components-canvas-imagebitmap.md)
- [ImageData](ts-components-canvas-imagedata.md)
- [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- Animation
- [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animation](ts-explicit-animation.md)
- Transition Animation
- [Page Transition](ts-page-transition-animation.md)
- [Component Transition](ts-transition-animation-component.md)
- [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
- [Motion Path Animation](ts-motion-path-animation.md)
- [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animatio](ts-explicit-animation.md)
- Transition Animation
- [Page Transition](ts-page-transition-animation.md)
- [Component Transition](ts-transition-animation-component.md)
- [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
- [Motion Path Animation](ts-motion-path-animation.md)
- Global UI Methods
- Pop-up Window
- [Alert Dialog Box](ts-methods-alert-dialog-box.md)
- [Action Sheet](ts-methods-action-sheet.md)
- [Custom Dialog Box](ts-methods-custom-dialog-box.md)
- [Date Picker Dialog Box](ts-methods-datepicker-dialog.md)
- [Time Picker Dialog Box](ts-methods-timepicker-dialog.md)
- [Text Picker Dialog Box](ts-methods-textpicker-dialog.md)
- [Menu](ts-methods-menu.md)
- [Built-in Enums](ts-appendix-enums.md)
- Pop-up Window
- [Alert Dialog Box](ts-methods-alert-dialog-box.md)
- [Action Sheet](ts-methods-action-sheet.md)
- [Custom Dialog Box](ts-methods-custom-dialog-box.md)
- [Date Picker Dialog Box](ts-methods-datepicker-dialog.md)
- [Time Picker Dialog Box](ts-methods-timepicker-dialog.md)
- [Text Picker Dialog Box](ts-methods-textpicker-dialog.md)
- [Menu](ts-methods-menu.md)
- [State Management with Application-level Variables](ts-state-management.md)
- [Pixel Units](ts-pixel-units.md)
- [Enums](ts-appendix-enums.md)
- [Types](ts-types.md)
- Components No Longer Maintained
- [GridContainer](ts-container-gridcontainer.md)
en/application-dev/reference/arkui-ts/figures/flex.PNG 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/focus.png 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/marquee.gif 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/mouse.png 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/mouse1.png 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/rating.gif 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/shared.gif 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/stepper.gif 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/swiper.gif 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/tabs2.gif 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/arkui-ts/figures/toggle.gif 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/errorcodes/Readme-EN.md 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/figures/20220329-103626.gif 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
en/application-dev/reference/syscap.md 0 → 100644
浏览文件 @ 7da99f56
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或