diff --git a/en/application-dev/reference/Readme-EN.md b/en/application-dev/reference/Readme-EN.md index e5e4ee0ea6213711aa17f1458385298f545d454e..85bb902ce576919aadc1422f1b8c35f7afd75718 100644 --- a/en/application-dev/reference/Readme-EN.md +++ b/en/application-dev/reference/Readme-EN.md @@ -1,8 +1,11 @@ # 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) diff --git a/en/application-dev/reference/arkui-js/Readme-EN.md b/en/application-dev/reference/arkui-js/Readme-EN.md index d14e06d8a3a83329a2a6e2b508508e03c93aea4c..c35e267119e3865138bc26fb0fe6de4d95c7a836 100644 --- a/en/application-dev/reference/arkui-js/Readme-EN.md +++ b/en/application-dev/reference/arkui-js/Readme-EN.md @@ -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) diff --git a/en/application-dev/reference/arkui-js/figures/en-us-attributes.gif b/en/application-dev/reference/arkui-js/figures/en-us-attributes.gif new file mode 100644 index 0000000000000000000000000000000000000000..77a11bb928c4b0d6e66073dd844320fc4e10229c Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us-attributes.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image1.png b/en/application-dev/reference/arkui-js/figures/en-us_image1.png new file mode 100644 index 0000000000000000000000000000000000000000..971b33355ee838054f24e2a7005c3ef3906a24d1 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image1.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125126.gif b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125126.gif new file mode 100644 index 0000000000000000000000000000000000000000..1b0d4fd3ea6759b909f1714cdb9b0f6794153d76 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125126.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284938.gif b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284938.gif new file mode 100644 index 0000000000000000000000000000000000000000..86f15fb83d5be7e8ed145d69ed8b869be40c4e45 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284938.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001152588538.gif b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001152588538.gif new file mode 100644 index 0000000000000000000000000000000000000000..e73de415b9c515a8c173793861ce330b8518de2f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001152588538.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001152610806.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001152610806.png index b3a47a84d8086ca0806bc958f745f29821c47cc2..30ab31575654579e9a00a64d3d67f7420662f203 100644 Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001152610806.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001152610806.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167662852.gif b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167662852.gif new file mode 100644 index 0000000000000000000000000000000000000000..1346a2deeab10fd18c60e7ff184bbff436bc528f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167662852.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324703.gif b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324703.gif new file mode 100644 index 0000000000000000000000000000000000000000..6c85de05a6145492a24a9ded5d2b399776489ecc Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324703.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001176075554.gif b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001176075554.gif new file mode 100644 index 0000000000000000000000000000000000000000..16e7ff213bd5caf5a9802001d3ced2996c66e0bc Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001176075554.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png b/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png new file mode 100644 index 0000000000000000000000000000000000000000..d9d9a17fe607c8acc99d3a7e26c6b4316e0b7f5b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214619417.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214619417.png index 5da42e3e14d601745274cb62d914c6600620bb25..4f6c19892155444ecf63dab3ca80575a8046cc1b 100644 Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214619417.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214619417.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214704759.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214704759.png index 6afdd1b39e4bcb3664c7664a55b47b8537f4aeaa..0b4837fc44abc0e1005de3d1259ed924f2969806 100644 Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214704759.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214704759.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214811029.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214811029.png index 1d71cee4618f1f2822cea1031c9b0e5d602e0a9b..447e5b819bdddc57b98ccf7629d612eb499aec8b 100644 Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214811029.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214811029.png differ diff --git a/en/application-dev/reference/arkui-js/figures/pickerview1.gif b/en/application-dev/reference/arkui-js/figures/pickerview1.gif new file mode 100644 index 0000000000000000000000000000000000000000..e255be05356073aa2cd2a8cf1fe9080da0cce7bf Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/pickerview1.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/pickerview2.gif b/en/application-dev/reference/arkui-js/figures/pickerview2.gif new file mode 100644 index 0000000000000000000000000000000000000000..ab30fdac7ab76ea4759a61c52cb326b53396d1dc Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/pickerview2.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/pickerview5.gif b/en/application-dev/reference/arkui-js/figures/pickerview5.gif new file mode 100644 index 0000000000000000000000000000000000000000..fd3a65d962df54eca02bd0a30c06bc1254c11df7 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/pickerview5.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/rainbow.gif b/en/application-dev/reference/arkui-js/figures/rainbow.gif new file mode 100644 index 0000000000000000000000000000000000000000..2dd14c106005c014e3daa8b6132f610280d06516 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/rainbow.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/slider.png b/en/application-dev/reference/arkui-js/figures/slider.png index d0167fe6773371fa70d8bf32c3a3953ed1e1455b..be1ee572a931ec2f06614e5f17c5616eba462e85 100644 Binary files a/en/application-dev/reference/arkui-js/figures/slider.png and b/en/application-dev/reference/arkui-js/figures/slider.png differ diff --git a/en/application-dev/reference/arkui-js/figures/stepper.gif b/en/application-dev/reference/arkui-js/figures/stepper.gif new file mode 100644 index 0000000000000000000000000000000000000000..cfaa06512dacaa75acbc26a65f040c1b1caf32ff Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/stepper.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/switch.gif b/en/application-dev/reference/arkui-js/figures/switch.gif new file mode 100644 index 0000000000000000000000000000000000000000..1ba8e3e6401faf9c70fe97e4a2eac2181eeec974 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/switch.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/text.png b/en/application-dev/reference/arkui-js/figures/text.png new file mode 100644 index 0000000000000000000000000000000000000000..65f36bddf4015f870e67edf7a96d1457014d1b3c Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/text.png differ diff --git a/en/application-dev/reference/arkui-js/js-components-basic-button.md b/en/application-dev/reference/arkui-js/js-components-basic-button.md index 29061668cc3ddd2c59a2b057a97bb09970807693..bec475bb4689aea314bb6e251e3d270da78000f2 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-button.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-button.md @@ -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:
- **capsule**: capsule button with fillets, background color, and text.
- **circle**: circle button that can accommodate icons.
- **text**: text button, which displays only text.
- **arc**: arc button. This value is applicable to wearables only.
- **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:
- **capsule**: capsule button with fillets, background color, and text.
- **circle**: circle button that can accommodate icons.
- **text**: text button, which displays only text.
- **arc**: arc button. This value is applicable to wearables only.
- **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. | | placement5+ | string | end | No | Position of the button icon in text. This attribute is valid only when **type** is not set. Available values are as follows:
- **start**: The button icon is at the beginning of the text.
- **end**: The button icon is at the end of the text.
- **top**: The button icon is at the top of the text.
- **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.
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 [**\** 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. | +| font-family | <string> | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.| | icon-width | <length> | - | No | Width of the internal icon of a circle button. The entire circle button is filled by default.
This style must be set when the icon uses the SVG image.| | icon-height | <length> | - | No | Height of the internal icon of a circle button. The entire circle button is filled by default.
This style must be set when the icon uses the SVG image.| | radius | <length> | - | No | Corner radius of the button. For a circle button, this style takes precedence over **width** and **height** in the universal styles.| @@ -55,8 +55,8 @@ In addition to the **background-color**, **opacity**, **display**, **visibility* | font-size | <length> | 37.5px | No | Font size of the arc button. | | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings. | | font-style | string | normal | No | Font style of the arc button. | -| font-weight | number \| string | normal | No | Font weight of the arc button. For details, see **font-weight** of the [**\** 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. | +| font-weight | number \| string | normal | No | Font weight of the arc button. For details, see **font-weight** of the [**\**](../arkui-js/js-components-basic-text.md#styles) component. | +| font-family | <string> | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.| ## Events diff --git a/en/application-dev/reference/arkui-js/js-components-basic-chart.md b/en/application-dev/reference/arkui-js/js-components-basic-chart.md index 26ac1ef03d97536474103465f8f61cc5108ab126..a11c5aaabf8fa65f15399d5e8b13d9e040e77397 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-chart.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-chart.md @@ -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:
- **bar**: bar chart.
- **line**: line chart.
- **gauge**: gauge chart.
- **progress**5+: circle chart of progresses.
- **loading**5+: circle chart of loading processes.
- **rainbow**5+: circle chart of proportions.| +| type | string | line | No | Chart type. Dynamic modification is not supported. Available values include:
- **bar**: bar chart
- **line**: line chart
- **gauge**: gauge chart
- **progress**5+: circle chart of progresses
- **loading**5+: circle chart of loading processes
- **rainbow**5+: 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<ChartDataset> | - | No | Data sets. You must set data sets for bar charts and line charts. Data sets for a gauge chart do not take effect. You can set multiple datasets and their background colors.| | segments5+ | DataSegment \| Array<DataSegment> | - | No | Data structures used by **progress**, **loading**, and **rainbow** charts.
**DataSegment** is available for **progress** and **loading** charts.
**Array<DataSegment>** 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
**bottom**: below the point
**none**: not displayed| | textColor | <color> | \#000000 | No | Color of the description text. | -| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes. For example, **"dashed, 5, 5"** indicates a dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value **"solid"** indicates a solid line.| +| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes. - **"dashed, 5, 5"**: dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value **"solid"** indicates a solid line.| | lineColor | <color> | \#000000 | No | Line color. If this attribute is not set, the value of **strokeColor** is used. | **Table 9** DataSegment5+ @@ -144,7 +144,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md | center-x | <length> | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-y** and **radius**. This style is supported by the gauge chart only.| | center-y | <length> | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-x** and **radius**. This style is supported by the gauge chart only.| | radius | <length> | - | No | Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **width** and **height** in the common styles, and must be used together with **center-x** and **center-y**. This style is supported by the gauge chart only.| -| colors | Array | - | No | Color of each section for the scale bar of the gauge component.
For example, **colors: \#ff0000, #00ff00**. This style is supported by the gauge chart only.| +| colors | Array | - | No | Color of each section for the scale bar of the gauge component.
For example, **colors: \#ff0000, \#00ff00**. This style is supported by the gauge chart only.| | weights | Array | - | No | Weight of each section for the scale bar of the gauge component.
For example, **weights: 2, 2**. This style is supported by the gauge chart only.| | font-family5+ | Array | - | No | Font style of the description text. You can use a [custom font](../arkui-js/js-components-common-customizing-font.md).| | font-size5+ | <length> | - | No | Font size of the description text. | @@ -161,7 +161,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. | Name | Parameter | Description | | ------ | ---------------------------------------- | ---------------------------------------- | -| append | {
serial: number, // Set the data subscript of the line chart to be updated.
data: Array<number>, // Set the new data.
} | Data is dynamically added to an existing data sequence. The target sequence is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.| +| append | {
serial: number,
data: Array<number>,
} | 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 + +
+ progress Example + + + + loading Example + + + + rainbow Example + + + +
+ ``` + ```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) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-image.md b/en/application-dev/reference/arkui-js/js-components-basic-image.md index 53b335e34c30317f99f789bd22358bad5d8ad279..89643b3aaa104e4f15b91db6098e74611c1aa42d 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-image.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-image.md @@ -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 **\** component adapts to the image source size when its width and height are not set. If this style is set to **true**, **object-fit** will not take effect. This style is not supported for SVG images.| -| object-position7+ | string | 0px 0px | No | Position of an image in the component.
The options are as follows:
1. Pixels. For example, **15px 15px** indicates the moving position along the x-axis or y-axis.
2. Characters. Optional values are as follows:
- **left**: The image is displayed on the left of the component.
- **top** The image is displayed on the top of the component.
- **right** The image is displayed on the right of the component.
- **bottom** The image is displayed at the bottom of the component.| +| object-position7+ | string | 0px 0px | No | Position of the image in the component.
The options are as follows:
1. Pixels, in px. For example, **15px 15px** indicates the position to move along the x-axis or y-axis.
2. Characters. Optional values are as follows:
- **left**: The image is displayed on the left of the component.<
- **top**: The image is displayed on the top of the component.
- **right**: The image is displayed on the right of the component.
- **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 **\** 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 **\** 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) | {
width: width,
height: height
} | Triggered when an image is successfully loaded. The loaded image size is returned.| -| error(Rich) | {
width: width,
height: height
} | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. | +| Name | Parameter | Description | +| -------- | ---------------------------------------- | ------------------------- | +| complete | {
width: width,
height: height
} | Triggered when an image is successfully loaded. The loaded image size is returned.| +| error | {
width: width,
height: height
} | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. | ## Methods diff --git a/en/application-dev/reference/arkui-js/js-components-basic-input.md b/en/application-dev/reference/arkui-js/js-components-basic-input.md index 2ce4c7d3b07a6e8dbdcd47c4d3143ec8e4b285df..13c42c2f80fe31b010cf38829a6d3a388bb19629 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-input.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-input.md @@ -20,44 +20,44 @@ 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 | -| -------------------------------- | ----------------------- | ------------- | --------- | ---------------------------------------- | -| type | string | text
| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.
The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.
The **button**, **checkbox**, and **radio** types cannot be dynamically modified.
- **button**: a button that can be clicked.
- **checkbox**: a check box.
- **radio**: a radio button that allows users to select one from multiple others with the same name.
- **text**: a single-line text field.
- **email**: a field used for an email address.
- **date**: date component, including the year, month, and day, but excluding time.
- **time**: time component, without the time zone.
- **number**: field for entering digits.
- **password**: password field, in which characters will be shielded. | -| checked | boolean | false | No | Whether the **\** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | -| name | string | - | No | Name of the **\** component.
This attribute is mandatory when **type** is set to **radio**. | -| value | string | - | No | Value of the **\** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name. | -| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text** \|email\|date\|time\|number\|**password**. | -| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit. | -| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.
Available values include:
- default
- next
- go
- done
- send
- search
Except for the **next** type, clicking the Enter key hides the soft keyboard. | -| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG. | -| showcounter5+ | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | -| menuoptions5+ | Array<MenuOption> | - | No | Menu options displayed after users click the **More** button. | -| autofocus6+ | boolean | false | No | Whether to automatically obtain focus.
This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**. | -| selectedstart6+ | number | -1 | No | Start position for text selection. | -| selectedend6+ | number | -1 | No | End position for text selection. | -| softkeyboardenabled6+ | boolean | true | No | Whether to display the soft keyboard during editing. | -| showpasswordicon6+ | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. | +| Name | Type | Default Value | Mandatory | Description | +| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- | +| type | string | text
| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.
The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.
The **button**, **checkbox**, and **radio** types cannot be dynamically modified.
- **button**: a button that can be clicked.
- **checkbox**: a check box.
- **radio**: a radio button that allows users to select one from multiple others with the same name.
- **text**: a single-line text field.
- **email**: a field used for an email address.
- **date**: date component, including the year, month, and day, but excluding time.
- **time**: time component, without the time zone.
- **number**: field for entering digits.
- **password**: password field, in which characters will be shielded.| +| checked | boolean | false | No | Whether the **\** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | +| name | string | - | No | Name of the **\** component.
This attribute is mandatory when **type** is set to **radio**. | +| value | string | - | No | Value of the **\** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.| +| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text** \|email\|date\|time\|number\|**password**.| +| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit. | +| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.
Available values include:
- default
- next
- go
- done
- send
- search
Except for the **next** type, clicking the Enter key hides the soft keyboard.| +| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.| +| showcounter5+ | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | +| menuoptions5+ | Array<MenuOption> | - | No | Menu options displayed after users click the **More** button. | +| autofocus6+ | boolean | false | No | Whether to automatically obtain focus.
This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.| +| selectedstart6+ | number | -1 | No | Start position for text selection. | +| selectedend6+ | number | -1 | No | End position for text selection. | +| softkeyboardenabled6+ | boolean | true | No | Whether to display the soft keyboard during editing. | +| showpasswordicon6+ | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. | **Table 1** MenuOption5+ -| Name | Type | Description | -| ------- | ------ | ----------------------------------- | -| icon | string | Path of the icon for a menu option. | -| content | string | Text content of a menu option. | +| Name | Type | Description | +| ------- | ------ | ----------- | +| icon | string | Path of the icon for a menu option.| +| content | string | Text content of a menu option.| ## 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 | -| ------------------------ | ---------------- | ------------- | --------- | ---------------------------------------- | -| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. | -| font-size | <length> | 16px | No | Font size of the single-line text box or button. | -| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.
If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. | -| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available only when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. | -| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\**](../arkui-js/js-components-basic-text.md) component. | -| caret-color6+ | <color> | - | No | Color of the caret. | +| Name | Type | Default Value | Mandatory | Description | +| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- | +| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. | +| font-size | <length> | 16px | No | Font size of the single-line text box or button. | +| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.
If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| +| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. | +| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\**](../arkui-js/js-components-basic-text.md) component. | +| caret-color6+ | <color> | - | No | Color of the caret. | ## Events @@ -66,27 +66,27 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md - When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. - | Name | Parameter | Description | + | Name | Parameter | Description | | ------------------------- | ---------------------------------------- | ---------------------------------------- | - | change | {
value: inputValue
} | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.
If you change the **value** attribute directly, this event will not be triggered. | - | enterkeyclick | {
value: enterKey
} | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:
- **2**: returned if **enterkeytype** is **go**.
- **3**: returned if **enterkeytype** is **search**.
- **4**: returned if **enterkeytype** is **send**.
- **5**: returned if **enterkeytype** is **next**.
- **6**: returned if **enterkeytype** is **default**, **done**, or is not set. | - | translate5+ | {
value: selectedText
} | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned. | - | share5+ | {
value: selectedText
} | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned. | - | search5+ | {
value: selectedText
} | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned. | - | optionselect5+ | {
index: optionIndex,
value: selectedText
} | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned. | - | selectchange6+ | {
start: number,
end: number
} | Triggered when the text selection changes. | + | change | {
value: inputValue
} | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.
If you change the **value** attribute directly, this event will not be triggered.| + | enterkeyclick | {
value: enterKey
} | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:
- **2**: returned if **enterkeytype** is **go**.
- **3**: returned if **enterkeytype** is **search**.
- **4**: returned if **enterkeytype** is **send**.
- **5**: returned if **enterkeytype** is **next**.
- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.| + | translate5+ | {
value: selectedText
} | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.| + | share5+ | {
value: selectedText
} | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.| + | search5+ | {
value: selectedText
} | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.| + | optionselect5+ | {
index: optionIndex,
value: selectedText
} | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.| + | selectchange6+ | {
start: number,
end: number
} | Triggered when the text selection changes. | - When **type** is set to **checkbox** or **radio**, the following events are supported. - | Name | Parameter | Description | - | ------ | --------------------------------- | ---------------------------------------- | - | change | {
checked:true \| false
} | Triggered when the checked status of the **checkbox** or **radio** button changes. | + | Name | Parameter | Description | + | ------ | ---------------------------------------- | ---------------------------------------- | + | change | {
checked:true \| false
} | Triggered when the checked status of the **checkbox** or **radio** button changes.| ## 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 | | ------------------- | ---------------------------------------- | ---------------------------------------- | | focus | {
focus: true\|false
}:
If **focus** is not passed, the default value **true** is used. | Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the input method can be displayed or collapsed. | | showError | {
error: string
} | Displays the error message. This method is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. | @@ -102,38 +102,40 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. headericon="/common/search.svg" placeholder="Please input text" onchange="change" onenterkeyclick="enterkeyClick"> - + ``` ```css /* xxx.css */ .content { - width: 60%; + width: 100%; flex-direction: column; align-items: center; } .input { + width: 60%; placeholder-color: gray; } .button { + width: 60%; background-color: gray; margin-top: 20px; - } + } ``` - + ```js // xxx.js - import prompt from '@system.prompt' + import promptAction from '@ohos.promptAction' export default { change(e){ - prompt.showToast({ + promptAction.showToast({ message: "value: " + e.value, duration: 3000, }); }, enterkeyClick(e){ - prompt.showToast({ + promptAction.showToast({ message: "enterkey clicked", duration: 3000, }); @@ -143,11 +145,11 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. error: 'error text' }); }, - } + } ``` ![1-2](figures/1-2.png) - + 2. Common button ```html @@ -190,10 +192,10 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ```js // xxx.js - import prompt from '@system.prompt' + import promptAction from '@ohos.promptAction' export default { checkboxOnChange(e) { - prompt.showToast({ + promptAction.showToast({ message:'checked: ' + e.checked, duration: 3000, }); @@ -225,11 +227,11 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ```js // xxx.js - import prompt from '@system.prompt' + import promptAction from '@ohos.promptAction' export default { onRadioChange(inputValue, e) { if (inputValue === e.value) { - prompt.showToast({ + promptAction.showToast({ message: 'The chosen radio is ' + e.value, duration: 3000, }); diff --git a/en/application-dev/reference/arkui-js/js-components-basic-label.md b/en/application-dev/reference/arkui-js/js-components-basic-label.md index 3adcd954efec63b002f90f923cd8fe5b5dfdd500..9a45521ecb6ed4d614ab43abafdcd6317c31530a 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-label.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-label.md @@ -35,8 +35,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md | font-size | <length> | 30px | No | Font size. | | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.
For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.| | letter-spacing | <length> | 0px | No | Character spacing (px). | -| font-style | string | normal | No | Font style. Available values are as follows:
- **normal**: standard font style
- **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.
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:
- **normal**: standard font style.
- **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.
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:
- **underline**: An underline is used.
- **line-through**: A strikethrough is used.
- **none**: The standard text is used.| | text-align | string | start
| No | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **center**: The text is center-aligned.
- **right**: The text is right-aligned.
- **start**: The text is aligned with the direction in which the text is written.
- **end**: The text is aligned with the opposite direction in which the text is written.
If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.| | line-height | <length> | 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 | <length> | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| | max-font-size | <length> | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| | font-size-step | <length> | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. | -| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.
Example values: **12px,14px,16px**| +| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.
Example: 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; diff --git a/en/application-dev/reference/arkui-js/js-components-basic-marquee.md b/en/application-dev/reference/arkui-js/js-components-basic-marquee.md index 9f13895436ce5f1104994f9d6956deba5e04a928..a1072111daa65e9eab0e528e086b8955efa66e09 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-marquee.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-marquee.md @@ -37,7 +37,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md | color | <color> | \#e5000000 | No | Font color of the scrolling text. | | font-size | <length> | 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.
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 \| string | normal | No | Font weight of the scrolling text. For details, see **font-weight** of the **[\ 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 **[\ 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 -
- {{marqueeCustomData}} -
- - +
+
+ + Life is a journey, not the destination. + +
+
+ +
``` ```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) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md index 426e227f9009c06b9e6c82f3344719c9d988e948..3f1ac6a278adeaea3059c930e3e5098fa8392374 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md @@ -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:
- **text**: text selector.
- **time**: time selector.
- **date**: date selector.
- **datetime**: date and time selector.
- **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.
If seconds are contained, the format is HH:mm:ss.| -| hours | number | 241-4 | No | Time format used by the time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
Since API version 5, the default value is the most commonly-used hour format in the current locale.| +| hours | number | 241-4
-5+ | No | Time format used by the time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
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**) | lunar5+ | 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 | 241-4 | No | Time format used by the date and time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
Since API version 5, the default value is the most commonly-used hour format in the current locale.| +| hours | number | 241-4
-5+ | No | Time format used by the date and time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
Since API version 5, the default value is the most commonly-used hour format in the current locale.| | lunar5+ | 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 | <length> | 20px | No | Font size of the selected item. The value is of the length type, in pixels. | | disappear-color5+ | <color> | \#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-size5+ | <length> | 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 | { newValue: newValue, newSelected: newSelected } | 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 | { hour: hour, minute: minute, [second:second]} | Triggered when a value is specified for the time selector.
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.
If seconds are contained, the value contains hour, minute, and second.| -Date selector (**type** is **date**) +### Date Selector | Name | Parameter | Description | | ------ | ---------------------------------------- | --------------- | -| change | { year:year, month:month, day:day } | 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 | { year:year, month:month, day:day,  hour:hour, minute:minute } | 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 | { column:column, newValue:newValue, newSelected:newSelected } | Triggered when the value of a column in the multi-column selector changes.
**column**: column whose value has changed.
**newValue**: selected value.
**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.
**column**: column whose value has changed.
**newValue**: selected value.
**newSelected**: index of the selected value.| ## Methods @@ -121,67 +121,252 @@ Not supported ## Example - -```html - -
- - Selected: {{time}} - - -
-``` - -```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 + +
+ + Selected value: {{value}} Selected index: {{index}} + + +
+ ``` + + ```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 + +
+ + Selected: {{time}} + + +
+ ``` + + ```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 + +
+ + Selected: {{time}} + + +
+ ``` + + ```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 + +
+ + Selected: {{datetime}} + + +
+ ``` + + ```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 + +
+ + Selected: {{ value }} + + +
+ ``` + + ```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) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-picker.md b/en/application-dev/reference/arkui-js/js-components-basic-picker.md index f6425d937129086d130562d8454da03bcaef3c87..5a9ace889f60ae6f6c0c891e8d0a8d55b3dadfd1 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-picker.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-picker.md @@ -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.
| | value | string | - | No | Value of the time selector. | | hours | number | 241-4
-5+ | No | Time format used by the time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
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
- - - - - - - - - - - + + + + + + + + + +
``` ```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** 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 **\** 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:
- **rect**: rectangular QR code
- **circle**: round QR code| +| type | string | rect | No | QR code type. Available values are as follows:
- **rect**: rectangular QR code.
- **circle**: round QR code.| ## Styles @@ -60,8 +59,6 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
- Value - 123 Type Color @@ -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 }, diff --git a/en/application-dev/reference/arkui-js/js-components-basic-search.md b/en/application-dev/reference/arkui-js/js-components-basic-search.md index 94cfa99cc29d81d779dbd1b901d8a09b71b86369..adf32950c2889e99e88d67e28da1b6bfb110f4ee 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-search.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-search.md @@ -1,10 +1,9 @@ # search > **NOTE** -> > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. -The **\** component provides an input area for users to search. +The **\** 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 | <length> | 16px | No | Font size of the search box. | | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.
If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| | placeholder-color | <color> | \#99000000
| No | Color of the hint text. | -| font-weight | number \| string | normal | No | Font weight. For details, see **font-weight** of the **[\](../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 **\** 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-color6+ | <color> | - | No | Color of the caret. | diff --git a/en/application-dev/reference/arkui-js/js-components-basic-select.md b/en/application-dev/reference/arkui-js/js-components-basic-select.md index 32aab0871d34f16e5740a03247fb9d3c373e3c42..e6721685c78744ca4453b50562b59fab220dd767 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-select.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-select.md @@ -9,7 +9,7 @@ The **** 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 **[](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
- +
``` ```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) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-slider.md b/en/application-dev/reference/arkui-js/js-components-basic-slider.md index 08099a0bf8999752bba1fec21d227b5c710bbae0..e4351b95ac820b6acbeb624e83abe60d4fc113fe 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-slider.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-slider.md @@ -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 **\** component is used to quickly adjust settings, such as the volume and brightness. +The **\** 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.| -| mode5+ | string | outset | No| Slider style. Available values are as follows:
- **outset**: The slider is on the sliding bar.
- **inset**: The slider is inside the sliding bar.| +| mode5+ | string | outset | No| Slider style. Available values are as follows:
- **outset**: The slider is on the slider track.
- **inset**: The slider is in the slider track.| | showsteps5+ | boolean | false | No| Whether to display slider scales.| | showtips5+ | 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| | -------- | -------- | -------- | | value5+ | number | Current value of the slider.| -| mode5+ | string | Type of the change event. Available values are as follows:
- **start**: The **value** starts to change.
- **move**: The **value** is changing with users' dragging.
- **end**: The **value** stops changing.| +| mode5+ | string | Type of the change event. Available values are as follows:
- **start**: The **value** starts to change.
- **move**: The **value** is changing with users' dragging.
- **end**: The **value** stops changing.
- **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
- slider start value is {{startValue}} - slider current value is {{currentValue}} - slider end value is {{endValue}} - + + +
``` ```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) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-switch.md b/en/application-dev/reference/arkui-js/js-components-basic-switch.md index f7cc8ddd86f2762c8b6a7e5e250e95f22e5c74ed..d58e16b10b6357537684c09f519caa537a469f5c 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-switch.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-switch.md @@ -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) | <color> | \#000000 | No | Text color displayed when the component is checked. | -| textoff-color(Rich) | <color> | \#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) | <length> | - | 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.
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 [**\**](../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 [**\**](../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 | <color> | \#000000 | No | Text color displayed when the component is checked. This attribute is available only when **texton** and **textoff** are set. | +| textoff-color | <color> | \#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 | <length> | - | 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.
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 **\** 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 **\** 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
- - + + + + + +
``` ```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) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-text.md b/en/application-dev/reference/arkui-js/js-components-basic-text.md index c9f0227a6b0f5c684557206d36b84ed722c22c2e..2509a3a6bcc556e19d1393ed80acad3d28c91fb4 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-text.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-text.md @@ -15,7 +15,7 @@ None ## Child Components -Only the **[\](../arkui-js/js-components-basic-span.md)** component is supported. +The **[\](../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.
For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.| | letter-spacing | <length> | 0px | No | Character spacing (px). | | word-spacing7+ | <length> \| <percentage> \| string | normal | No | Spacing between texts. If the input is a string, the options are as follows:
**normal**: default spacing.| -| font-style | string | normal | No | Font style. Available values are as follows:
- **normal**: standard font style
- **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.
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:
- **normal**: standard font style.
- **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.
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:
- **underline**: An underline is used.
- **line-through**: A strikethrough is used.
- **none**: The standard text is used.| | text-decoration-color7+ | <color> | - | No | Color of the text decoration. | | text-align | string | start
| No | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **center**: The text is center-aligned.
- **right**: The text is right-aligned.
- **start**: The text is aligned with the direction in which the text is written.
- **end**: The text is aligned with the opposite direction in which the text is written.
If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.| -| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | 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:
**normal**7+: default line height | +| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | 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:
**normal**7+: 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:
- **clip**: The text is clipped and displayed based on the size of the parent container.
- **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 \| string7+ | - | No | Maximum number of text lines. The value of the string type is as follows:
- **auto**7+: The number of text lines adapts to the container height. | +| max-lines | number \| string7+ | - | No | Maximum number of text lines. The value of the string type is as follows:
- **auto**7+: The number of text lines adapts to the container height.| | min-font-size | <length> | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| | max-font-size | <length> | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| | font-size-step | <length> | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. | -| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.
Example values: **12px,14px,16px**| +| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.
Example: prefer-font-sizes: 12px,14px,16px| | word-break6+ | string | normal | No | Text line breaking mode. The options are as follows:
- **normal**: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.
- **break-all**: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.
- **break-word**: Works in the same way as **break-all**, except that it does not break unbreakable words.| | text-indent7+ | <length> | - | No | Indentation of the first line. | | white-space7+ | string | pre | No | Mode for processing blanks in the component. The options are as follows:
- **normal**: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.
- **nowrap**: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.
- **pre**: All contents are output as-is.
- **pre-wrap**: All contents are output as-is with line breaks.
- **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
-
- - Hello {{ title }} - -
+ default text + hello world with color + hello world with font-size + hello world with letter-spacing + hello world with word-spacing + hello world with italic + hello world with font-weight + hello world with underline + hello world with line-through + hello world with text-align:right
``` ```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 - -
- - This is a passage - - - This is a passage - -
-``` - -```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) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-xcomponent.md b/en/application-dev/reference/arkui-js/js-components-basic-xcomponent.md index bb5389d410eb12c80575d55d0ea74dd4b33efa05..639f9f1d575f6d5f1aa183ad74f6d1d2a666dc27 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-xcomponent.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-xcomponent.md @@ -1,18 +1,18 @@ # 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 **\** displays the components to which the EGL/OpenGLES or media data is written. +The **\** displays the components to which the EGL/OpenGLES or media data is written. ## Required Permissions - None +None ## Child Components - Not supported +Not supported ## Attributes diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md index edf0d3afa3412cb67b3d97f38036218f46e1de33..ca3a9125a0dba2956d12d15fe7c82322730f40bb 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md @@ -11,7 +11,7 @@ The **\** 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.| | options6+ | 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.| ### toDataURL6+ diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md index 9bc724d26a7610fa4b7fdbd48b21811a2f472cf2..f580a31338e6e8d145d963c1b2f7662f1113e06c 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md @@ -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
-
``` ```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) } } ``` diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md index 4100f9429985f1df7dd1e52087c842f128496226..8df65d142a4129699c45f44b69c1c5f1fbe96829 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md @@ -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
- +
``` @@ -621,7 +621,7 @@ Clears the content in a rectangle on the canvas. ```html
- +
``` @@ -984,7 +984,7 @@ Creates a pattern for image filling based on a specified source image and repeti ```html
- +
``` @@ -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
- +
``` @@ -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); diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md index f5f4179442862246d1c3171dde95879efbe4c532..c2ca3f82172d1b3a7c7b6a5a2d5423d9ecc3aabd 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md @@ -65,7 +65,7 @@ Sets the path transformation matrix. ```html
- +
``` @@ -95,7 +95,7 @@ Moves the current point of the path back to the start point of the path, and dra ```html
- +
``` @@ -223,7 +223,7 @@ Draws a cubic bezier curve on the canvas. ```html
- +
``` @@ -264,7 +264,7 @@ Draws a quadratic curve on the canvas. ```html
- +
``` @@ -307,7 +307,7 @@ Draws an arc on the canvas. ```html
- +
``` @@ -348,7 +348,7 @@ Draws an arc based on the radius and points on the arc. ```html
- +
``` diff --git a/en/application-dev/reference/arkui-js/js-components-common-attributes.md b/en/application-dev/reference/arkui-js/js-components-common-attributes.md index 357385f9747d820873c0c7aebb9ac8a8c2647960..416087236c246f61e692f8b4207d7d9161b31c9f 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-attributes.md +++ b/en/application-dev/reference/arkui-js/js-components-common-attributes.md @@ -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**
+> **NOTE** +> > Do not set styles in attribute fields. + +## Example + +### Example 1 + +```html + +
+ + + + {{ $item.value }} + + +
+``` + +```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 + +
+
+ hello world +
+
+ hello world +
+
+``` + +```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) diff --git a/en/application-dev/reference/arkui-js/js-components-common-customizing-font.md b/en/application-dev/reference/arkui-js/js-components-common-customizing-font.md index 4054548e00f9e9b80e8d3fff5abc9d3cf209c2b4..f57ab118948791263a353c2d1da63d08ecc6466e 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-customizing-font.md +++ b/en/application-dev/reference/arkui-js/js-components-common-customizing-font.md @@ -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; } ``` diff --git a/en/application-dev/reference/arkui-js/js-components-common-methods.md b/en/application-dev/reference/arkui-js/js-components-common-methods.md index 044dbfb7308137d34cb00d4b6720ad162c99e5d9..3a7d61034f5e8eece95d71ebe9ca2c82556401f7 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-methods.md +++ b/en/application-dev/reference/arkui-js/js-components-common-methods.md @@ -32,7 +32,7 @@ animate( keyframes: Keyframes, options: Options): void | height | number | - | Height set for the component during playback of the animation. | | backgroundColor | <color> | 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.
The first value indicates the horizontal position, and the second value indicates the vertical position.
If only one value is specified, the other value is **50%**.| +| backgroundPosition | string | - | The value format is **"x y"**, in percentage or pixels.
The first value indicates the horizontal position, and the second value indicates the vertical position.
If only one value is specified, the other value is **50%**.| | transformOrigin | string | 'center center' | Origin position of the transformed element.
The first value indicates the x-axis position. The value can be **left**, **center**, **right**, a length, or a percentage.
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.
- If there are only two frames, **offset** can be left empty.
- 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:
- **idle**: The animation is not running (playback ended or not started).
- **running**: The animation is running.
- **paused**: The animation is paused.
- **finished**: Animation playback ends.| +| playState | string | Read-write attribute, which indicates the playback status of the animation:
- **idle**: The animation is not running (playback ended or not started).
- **running**: The animation is running.
- **paused**: The animation is paused.
- **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
@@ -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." }); }; diff --git a/en/application-dev/reference/arkui-js/js-components-common-styles.md b/en/application-dev/reference/arkui-js/js-components-common-styles.md index 2c61ed94f1317ccbd3e429b6bc2a3516db28f337..611529aec1de7dc133ff4fab8c784622cb60591a 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-styles.md +++ b/en/application-dev/reference/arkui-js/js-components-common-styles.md @@ -9,61 +9,61 @@ You can set universal styles for components in the **style** attribute or **.css | Name | Type | Default Value | Description | | ---------------------------------------- | ---------------------------------------- | ------------ | ---------------------------------------- | -| width | <length> \| <percentage> | - | Component width.
If this attribute is not set, the width required for the element content is used.
| -| height | <length> \| <percentage> | - | Component height.
If this attribute is not set, the height required for the element content is used.
| +| width | <length> \| <percentage> | - | Component width.
If this attribute is not set, the width required for the element content is used. | +| height | <length> \| <percentage> | - | Component height.
If this attribute is not set, the height required for the element content is used. | | min-width5+ | <length> \| <percentage>6+ | 0 | Minimum component width. | | min-height5+ | <length> \| <percentage>6+ | 0 | Minimum component height. | | max-width5+ | <length> \| <percentage>6+ | - | Maximum component width, which has no restriction by default. | | max-height5+ | <length> \| <percentage>6+ | - | Maximum component height, which has no restriction by default. | | padding | <length> \| <percentage>5+ | 0 | Shorthand attribute to set the padding for all sides in a declaration.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| -| padding-[left \| top \| right \| bottom] | <length> \| <percentage>5+ | 0 | Left, top, right, and bottom padding. | -| padding-[start \| end] | <length> \| <percentage>5+ | 0 | Start and end padding. | +| padding-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | Left, top, right, and bottom padding. | +| padding-[start\|end] | <length> \| <percentage>5+ | 0 | Start and end padding. | | margin | <length> \| <percentage>5+ | 0 | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.
- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| -| margin-[left \| top \| right \| bottom] | <length> \| <percentage>5+ | 0 | Left, top, right, and bottom margins. | -| margin-[start \| end] | <length> \| <percentage>5+ | 0 | Start and end margins. | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | Left, top, right, and bottom margins. | +| margin-[start\|end] | <length> \| <percentage>5+ | 0 | Start and end margins. | | border | - | 0 | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.| | border-style | string | solid | Shorthand attribute to set the style for all borders. Available values are as follows:
- **dotted**: dotted border. The radius of a dot is half of **border-width**.
- **dashed**: dashed border.
- **solid**: solid border.| | border-[left\|top\|right\|bottom]-style | string | solid | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**.| -| border-[left \| top \| right \| bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.| +| border-[left\|top\|right\|bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.| | border-width | <length> | 0 | Shorthand attribute to set the width for all borders, or separately set the width for each border. | -| border-[left \| top \| right \| bottom]-width | <length> | 0 | Attribute to set widths of left, top, right, and bottom borders. | +| border-[left\|top\|right\|bottom]-width | <length> | 0 | Attribute to set widths of left, top, right, and bottom borders. | | border-color | <color> | black | Shorthand attribute to set the color for all borders, or separately set the color for each border. | -| border-[left \| top \| right \| bottom]-color | <color> | black | Attribute to set colors for left, top, right, and bottom borders. | -| border-radius | <length> | - | Attribute to set the radius for round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set **border-width**, **border-color**, or **border-style** for all the borders at the same time.| -| border-[top \| bottom]-[left \| right]-radius | <length> | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners | +| border-[left\|top\|right\|bottom]-color | <color> | black | Attribute to set colors for left, top, right, and bottom borders. | +| border-radius | <length> | - | Attribute to set the radius for round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set **border-width**, **border-color**, or **border-style** for all the borders at the same time.
In the four-value syntax, the values apply to lower-left corner, lower-right corner, upper-left corner, and upper-right corner, respectively.| +| border-[top\|bottom]-[left\|right]-radius | <length> | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners | | background | <linear-gradient> | - | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.| | background-color | <color> | - | Background color. | | background-image | string | - | Background image. Both online and local image resources are supported. Currently, this attribute is not compatible with **background-color** or **background**.
Example:
- background-image: url("/common/background.png")
The SVG format is not supported.| -| background-size | - string
- <length> <length>
- <percentage> <percentage> | auto | Background image size.
- The **string** values are as follows:
- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.
- **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.
- **auto**: Retains the original aspect ratio of the image.
- The two **\** values are as follows:
Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.
- The two **\** values are as follows:
Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.| -| background-repeat | string | repeat | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.
- **repeat**: The image is repeated along the x-axis and y-axis at the same time.
- **repeat-x**: The image is repeated along the x-axis.
- **repeat-y**: The image is repeated along the y-axis.
- **no-repeat**: The image is not repeated.| -| background-position | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.
- **left**: leftmost in the horizontal direction.
- **right**: rightmost in the horizontal direction.
- **top**: top in the vertical direction.
- **bottom**: bottom in the vertical direction.
- **center**: center position.
- Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.
- Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.
- Using both **\** and **\**. | -| box-shadow5+ | string | 0 | Syntax: **box-shadow: h-shadow v-shadow blur spread color**
Shadow style of the current component. The value includes the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: **0**), extension distance (optional, default value: **0**), and color (optional, default value: **black**) of the shadow.
Example:
- box-shadow :10px 20px 5px 10px \#888888
- box-shadow :100px 100px 30px red
- box-shadow :-100px -100px 0px 40px | -| filter5+ | string | - | Syntax: **filter: blur(px)**
Radius of the blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.
Example:
- filter: blur(10px) | -| backdrop-filter5+ | string | - | Syntax: **backdrop-filter: blur(px)**
Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.
Example:
- backdrop-filter: blur(10px) | -| window-filter5+ | string | - | Syntax: window-filter: blur(percent), style5+
Blur degree and style for windows within the component layout. If this style is not set, the default value **0%** (no blur area) is used. Different blur degrees and styles for multiple blur areas are not supported. Available blur styles are as follows: **small_light** (default value), **medium_light**, **large_light**, **xlarge_light**, **small_dark**, **medium_dark**, **large_dark**, and **xlarge_dark**.
Example:
- window-filter: blur(50%)
- window-filter: blur(10%), large_light | +| background-size | - string
- <length> <length>
- <percentage> <percentage> | auto | Background image size.
- The available values of the **string** type are as follows:
- **contain**: extends the image to the maximum size so that its height and width are fully applicable to the content area.
- **cover**: extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.
- **auto**: retains the original aspect ratio of the image.
- Values of the **\** type:
The two values are width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.
- Values of the **\** type:
The two values are width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.| +| background-repeat | string | repeat | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.
- **repeat**: The image is repeated along both the x-axis and y-axis.
- **repeat-x**: The image is repeated along the x-axis.
- **repeat-y**: The image is repeated along the y-axis.
- **no-repeat**: The image is not repeated.| +| background-position | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | - Values of the **string** type: If only one value is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.
- **left**: leftmost in the horizontal direction.
- **right**: rightmost in the horizontal direction.
- **top**: top in the vertical direction.
- **bottom**: bottom in the vertical direction.
- **center**: center in the horizontal or vertical direction.
- Values of the **\** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0 0 in px (**0px 0px**). If only one value is specified, the other one is **50%**.
- Values of the **\** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0% 0%. For the lower right corner, the value is **100% 100%**. If only one value is specified, the other one is **50%**.
- Values of the **\** type and **\** type can be used together.| +| box-shadow5+ | string | 0 | Syntax: box-shadow: h-shadow v-shadow blur spread color
Shadow style of the current component. The value includes the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: **0**), extension distance (optional, default value: **0**), and color (optional, default value: **black**) of the shadow.
Example:
- box-shadow :10px 20px 5px 10px \#888888
- box-shadow :100px 100px 30px red
- box-shadow :-100px -100px 0px 40px | +| filter5+ | string | - | Syntax: filter: blur(px)
Radius of the blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.
Example:
- filter: blur(10px) | +| backdrop-filter5+ | string | - | Syntax: backdrop-filter: blur(px)
Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.
Example:
- backdrop-filter: blur(10px) | +| window-filter5+ | string | - | Syntax: window-filter: blur(percent), style5+
Blur degree and style for windows within the component layout. If this style is not set, the default value **0%** (no blur area) is used. Different blur degrees and styles for multiple blur areas are not supported. Available values of **style** are as follows: small_light (default value), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark
Example:
- window-filter: blur(50%)
- window-filter: blur(10%), large_light | | opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. | -| display | string | flex | Type of the box containing an element. Available values are as follows:
- **flex**: Flexible layout.
- **none**: The box is disabled.
- **inline**9+: Inline box, where the element is displayed as an inline element and does not start on a new line.
- **block**9+: Block box, where the element is displayed as a block-level element and always starts on a new line. This is the default value for container components.
- **inline-block**9+: Inline-block box, where the element is displayed on one line and you can set a width and height on the element. This is the default value for basic components.| +| display | string | flex | Type of the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered
- **grid**: grid layout (available only for the **\
** component) | | visibility | string | visible | Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:
- **visible**: The element is visible.
- **hidden**: The box is hidden but still takes up space.
If both **visibility** and **display** are set, only **display** takes effect.| | flex | number \| string | - | How to divide available space of the parent component for each child component.
You can set one, two5+, or three5+ values for this style.
Set one value in either of the following ways:
- A unitless number to set **flex-grow**.
- A valid width value5+ to set **flex-basis**.
Set two values5+ in the following ways:
The first value must be a unitless number used to set **flex-grow**. The second value must be either of the following:
- A unitless number to set **flex-shrink**.
- A valid width value to set **flex-basis**.
Set three values5+ in the following ways:
The first value must be a unitless number used to set **flex-grow**. The second value must be a unitless number used to set **flex-shrink**. The third value must be a valid width value used to set **flex-basis**.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| | flex-grow | number | 0 | How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| | flex-shrink | number | 1 | How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value **0** indicates that the child component does not shrink.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| | flex-basis | <length> | - | Initial length of the flex item on the main axis.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| -| align-self6+ | string | - | Alignment mode on the cross axis of the parent element. This style overwrites the align-items style of the parent element. The align-items style is used only in the div and list styles of the parent container. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.
- **flex-start**: Items are aligned to the start of the cross axis.
- **flex-end**: Items are aligned to the end of the cross axis.
- **center**: Items are aligned in the center of the cross axis.
- **baseline**: Items are aligned on the peracross axis.| -| position | string | relative | Positioning type of an element. Dynamic changes are not supported.
- **fixed**: The element is positioned related to the browser window.
- **absolute**: The element is positioned absolutely to its parent element. The setting takes effect only when the parent component is **\
** or **\**.
- **relative**: The element is positioned relative to its normal position.| -| [left \| top \| right \| bottom] | <length> \| <percentage>6+ | - | **left | top | right | bottom** must be used together with **position** to determine the offset of an element.
- The **left** attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.
- The **top** attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
- The **right** attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
- The **bottom** attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. | -| [start \| end]6+ | <length> \| <percentage> | - | **start | end** must be used together with **position** to determine the offset of an element.
- The **start** attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.
- The **end** attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element. | +| align-self6+ | string | - | How items are aligned along the main axis of the container. The setting overwrites the **align-items** setting of the container and is valid only when the container is **\
** or **\**. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the container along the cross axis.
- **flex-start**: Items are packed toward the start edge of the cross axis.
- **flex-end**: Items are packed toward the end edge of the cross axis.
- **center**: Items are packed toward the center of the cross axis.
- **baseline**: Items are packed toward the baseline of the cross axis.| +| position | string | relative | Positioning type of an element. Dynamic changes are not supported.
- **fixed**: The element is positioned relative to the entire UI.
- **absolute**: The element is positioned relative to the container. The setting is valid only when the container is **\
** or **\**.
- **relative**: The element is positioned relative to its normal position.| +| [left \| top \| right \| bottom] | <length> \| <percentage>6+ | - | Edge of the element. This style must be used together with **position** to determine the offset of an element.
- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.
- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
- **right**: right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
- **bottom**: bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. | +| [start \| end]6+ | <length> \| <percentage> | - | start \| end must be used together with **position** to determine the offset of an element.
- **start**: start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.
- **end**: end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element.| | z-index6+ | number | - | Rendering sequence of child nodes under the same parent node. A child node with a larger value will be rendered later.
z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.| -| image-fill6+ | <color> | - | Fill color for SVG images. The following components are supported: **button** (icon attribute), **piece** (icon attribute), **search** (icon attribute), **input** (headericon attribute), **textarea** (headericon attribute), **image** (src attribute), and **toolbar-item** (icon attribute)
The **fill** color value in the SVG image file is replaced with the value of **image-fill** during rendering, and is valid only for the fill attribute that is declared in the SVG image.| -| clip-path6+ | [ <geometry-box> \| <basic-shape> ] \| none | - | Clip area of a component. Only the content within this area is displayed.
**\**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:
- **margin-box**: The width and height includes the margin.
- **border-box**: The width and height includes the border.
- **padding-box**: The width and height includes the padding.
- **content-box**: The width and height does not include any margin, border, or padding.
**\**: shape of the clip area. Available values include:
- **inset**, in the format of inset( \{1,4} [ round \<'border-radius'> ]? ).
- **circle**, in the format of circle( [ \ ]? [ at <percentage> <percentage> ]? ).
- **ellipse**, in the format of ellipse( [ \{2} ]? [ at <percentage> <percentage> ]? ).
- **polygon**, in the format of polygon( [ \ \ ]\# ).
- **path**, in the format of path( \ ).| +| image-fill6+ | <color> | - | Fill color for SVG images. The following components are supported: **\