Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“ce709b75b3f85f5cbca0216bb53f8b85f96c82d7”上不存在“...framework/git@gitcode.net:s920243400/PaddleDetection.git”
未验证 提交 e059812a 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10916 翻译完成 9444/9449/9625 

Merge pull request !10916 from ester.zhou/C1-1021
上级 2934c93a 0fb2649f
隐藏空白更改
内联 并排
Showing with 710 addition and 628 deletion
en/application-dev/reference/Readme-EN.md
浏览文件 @ e059812a
# Development References # Development References
- [JavaScript-based Web-like Development Paradigm](arkui-js/Readme-EN.md) - [Component Reference (ArkTS-based Declarative Development Paradigm)](arkui-ts/Readme-EN.md)
- [TypeScript-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)
- APIs - API Reference (Native APIs)
- [Standard Libraries Supported by Native APIs](native-lib/third_party_libc/musl.md)
- [JS and TS APIs](apis/Readme-EN.md) - [Node_API](native-lib/third_party_napi/napi.md)
- Native APIs
- [Standard Libraries](native-lib/third_party_libc/musl.md)
- [Node_API](native-lib/third_party_napi/napi.md)
en/application-dev/reference/arkui-js/Readme-EN.md
浏览文件 @ e059812a
# JavaScript-based Web-like Development Paradigm # JavaScript-compatible Web-like Development Paradigm
- Universal Component Information - Universal Component Information
- [Universal Attributes](js-components-common-attributes.md) - [Universal Attributes](js-components-common-attributes.md)
......
en/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ e059812a
# picker # picker
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<picker>** component supports common, date, time, data and time, and multi-column text selectors. The **\<picker>** component supports common, date, time, data and time, and multi-column text selectors.
## Required Permissions ## Required Permissions
None None
## Child Component
None ## Child Components
## Attributes Not supported
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| ---- | ------ | ------------- | --------- | ------------------------------------------------------------ | | ---- | ------ | ---- | ---- | ---------------------------------------- |
| type | string | - | No | Dynamic modification is not supported. Available values include:<br/>-**text**: text selector<br/>-**data**: date selector<br/>-**time**: time selector<br/>-**datetime**: date and time selector<br/>-**multi-text**: multi-column text selector | | type | string | - | No | Picker type. Dynamic modification is not supported. The options are as follows:<br>- **text**: text selector.<br>- **date**: date selector.<br>- **time**: time selector.<br>- **datetime**: date and time selector.<br>- **multi-text**: multi-column text selector.|
### Text Selector
When **type** is set to **text**, a text selector is used. ### Common Selector
When **type** is set to **text**, a common selector is used.
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------ | ---- | ---- | ---------------------------------------- |
| range | Array | - | No | Value range of the common selector, for example, **["15", "20", "25"]**.<br>Use the data binding mode, for example, `range = {{data}}`. Declare the corresponding variable `data: ["15", "20", "25"]` in JavaScript.|
| selected | string | 0 | No | Default value of the common selector. The value should be the index of **range**.|
| value | string | - | No | Value of the common selector. |
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------ | ------------- | --------- | ------------------------------------------------------------ |
| range | Array | - | No | Value range of the common selector, for example, **["15", "20", "25"]**.NOTE:Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable **data: ["15", "20", "25"]** in the JavaScript. |
| selected | string | 0 | No | Default value of the common selector. The value should be the index of **range**. |
| value | string | - | No | Value of the common selector. |
### Date Selector ### Date Selector
When **type** is set to **date**, a date selector is used. When **type** is set to **date**, a date selector is used.
| Name | Type | Default Value | Mandatory | Description |
| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- |
| start | &lt;time&gt; | 1970-1-1 | No | Start date of the date selector, in the format of YYYY-MM-DD. |
| end | &lt;time&gt; | 2100-12-31 | No | End date of the date selector, in the format of YYYY-MM-DD. |
| selected | string | Current date | No | Default value of the date selector, in format of YYYY-MM-DD.|
| value | string | - | Yes | Value of the date selector. |
| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. |
| lunarswitch | boolean | false | No | Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value **true** means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value **false** means not to display the lunar calendar switch.<br>When both **lunarswitch** and **lunar** are set to **true**, the switch is selected.|
| Name | Type | Default Value | Mandatory | Description |
| ----------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| start | \<time> | 1970-1-1 | No | Start date of the date selector, in the format of YYYY-MM-DD. |
| end | \<time> | 2100-12-31 | No | End date of the date selector, in the format of YYYY-MM-DD. |
| selected | string | Current date | No | Default value of the date selector, in format of YYYY-MM-DD. |
| value | string | - | Yes | Value of the date selector. |
| lunar5+ | boolean | false | No | Whether the pop-up window displays the lunar calendar. |
| lunarswitch | boolean | false | No | Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value **true** means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value **false** means not to display the lunar calendar switch.NOTE:When both **lunarswitch** and **lunar** are set to **true**, the switch is selected. |
### Time Selector ### Time Selector
When **type** is set to **time**, a time selector is used. 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. |
| value | string | - | No | Value of the time selector. |
| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
| 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. |
| value | string | - | No | Value of the time selector. |
| hours | number | 241-4-5+ | No | Time format used by the time selector. Available values include:<br/>-**12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br/>-**24**: displayed in 24-hour formatNOTE:The default value is the most commonly-used hour format in the current locale. 5+ |
### Date and Time Selector ### Date and Time Selector
When **type** is set to **datetime**, a date and time selector is used. When **type** is set to **datetime**, a date and time selector is used.
| 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 either of the following formats:<br>- MM-DD-HH-mm<br>- YYYY-MM-DD-HH-mm<br>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.|
| value | string | - | Yes | Value of the date and time selector. |
| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the date and time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. |
| lunarswitch | boolean | false | No | Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value **true** means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value **false** means not to display the lunar calendar switch.<br>When both **lunarswitch** and **lunar** are set to **true**, the switch is selected.|
| 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 either of the following formats:<br/>-MM-DD-HH-mm<br/>-YYYY-MM-DD-HH-mmIf the year is not set, the current year is used by default. <br/>-The value you set is the date selected by default in the pop-up window. |
| value | string | - | Yes | Value of the date and time selector. |
| hours | number | 241-4-5+ | No | Time format used by the date and time selector. Available values include:<br/>-**12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br/>-**24**: displayed in 24-hour format<br/>NOTE:The default value is the most commonly-used hour format in the current locale. 5+ |
| lunar5+ | boolean | false | No | Whether the pop-up window displays the lunar calendar. |
| lunarswitch | boolean | false | No | Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value **true** means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value **false** means not to display the lunar calendar switch.NOTE:When both **lunarswitch** and **lunar** are set to **true**, the switch is selected. |
### Multi-Column Text Selector ### Multi-Column Text Selector
When **type** is set to **multi-text**, a multi-column text selector is used. When **type** is set to **multi-text**, a multi-column text selector is used.
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | --------- | ---- | ---------------------------------------- |
| columns | number | - | Yes | Number of columns in the multi-column text selector. |
| range | Two-dimensional array| - | No | Items of the multi-column text selector. **range** is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, **[["a", "b"], ["c", "d"]]**.<br>Use the data binding mode, for example, `range = {{data}}`. Declare the corresponding variable `data: ["15", "20", "25"]` in JavaScript.|
| selected | Array | [0,0,0, ...]| No | Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.|
| value | Array | - | No | Value of the multi-column text selector, which is an array consisting of the values of the selected items in each column. |
| Name | Type | Default Value | Mandatory | Description |
| -------- | --------------------- | ------------- | --------- | ------------------------------------------------------------ |
| columns | number | - | Yes | Number of columns in the multi-column text selector. |
| range | Two-dimensional array | - | No | Items of the multi-column text selector. **range** is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, **[["a","b"], ["c","d"]]**.NOTE:Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable **data: [["a","b"], ["c","d"]]** in the JavaScript. |
| selected | Array | 0,0,0,... | No | Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column. |
| value | Array | - | No | Value of the multi-column text selector, which is an array consisting of the values of the selected items in each column. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | - | No | Text color of the selector. |
| font-size | &lt;length&gt; | - | No | Font size of the selector. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| letter-spacing | &lt;length&gt; | 0 | No | Letter spacing of the selector. For details, see **letter-spacing** in the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| text-decoration | string | - | No | Text decoration of the selector. For details, see **text-decoration** in the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| font-style | string | normal | No | Font style of the selector. For details, see **font-style** in the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| font-weight | number \| string | normal | No | Font weight of the selector. For details, see **font-weight** in the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| line-height | &lt;length&gt; | 0px | No | Text line height of the selector. |
| column-height<sup>5+</sup> | &lt;length&gt; | - | No | Height of the selector option list. |
| Name | Type | Default Value | Mandatory | Description |
| --------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
| text-color | \<color> | - | No | Text color of the selector. |
| font-size | \<length> | - | No | Font size of the selector. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.NOTE:If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. |
| letter-spacing | \<length> | 0 | No | Letter spacing of the selector. For details, see [letter-spacing](js-components-basic-text.md#section5775351116) of the **text** component. |
| text-decoration | string | - | No | Text decoration of the selector. For details, see [text-decoration](js-components-basic-text.md) of the **text** component. |
| font-style | string | normal | No | Font style of the selector. For details, see [font-style](js-components-basic-text.md) of the **text** component. |
| font-weight | number \| string | normal | No | Font weight of the selector. For details, see [font-weight](js-components-basic-text.md) of the **text** component. |
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. |
| line-height | \<length> | 0px | No | Text line height of the selector. |
| column-height5+ | \<length> | - | No | Height of the selector option list. |
## Events ## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
### Common Selector
### Common Selector
| Name | Parameter | Description |
| ------ | ---------------------------------------- | ---------------------------------------- |
| change | { newValue: newValue, newSelected: newSelected } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window. **newSelected** is the index.|
| cancel | - | Triggered when the cancel button is clicked. |
| Name | Parameter | Description |
| ------ | ------------------------------------------------ | ------------------------------------------------------------ |
| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. **newSelected** is the index. |
| cancel | - | Triggered when the cancel button is clicked. |
### Date Selector ### Date Selector
| Name | Parameter | Description |
| ------ | ---------------------------------------- | ---------------------------------------- |
| change | { year: year, month: month, day: day } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.<br>The value of **month** ranges from **0** (January) to **11** (December) since API version 5.|
| cancel | - | Triggered when the cancel button is clicked. |
| Name | Parameter | Description |
| ------ | -------------------------------------- | ------------------------------------------------------------ |
| change | { year: year, month: month, day: day } | Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.NOTE:The value of **month** ranges from 0 (January) to 11 (December). 5+ |
| cancel | - | Triggered when the cancel button is clicked. |
### Date and Time Selector ### Date and Time Selector
| Name | Parameter | Description |
| ------ | ---------------------------------------- | ---------------------------- |
| change | { year: year, month: month, day: day, hour: hour, minute: minute} | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.|
| cancel | - | Triggered when the cancel button is clicked. |
| Name | Parameter | Description |
| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| change | { year: year, month: month, day: day, hour: hour, minute: minute} | Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. |
| cancel | - | Triggered when the cancel button is clicked. |
### Time Selector ### Time Selector
| Name | Parameter | Description |
| ------ | ---------------------------------------- | ---------------------------------------- |
| change | { hour: hour, minute: minute, [second: second] } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window. If **containsecond** is set to true, value contains seconds.|
| cancel | - | Triggered when the cancel button is clicked. |
| Name | Parameter | Description |
| ------ | ------------------------------------------------ | ------------------------------------------------------------ |
| change | { hour: hour, minute: minute, [second: second] } | Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. If **containsecond** is set to true, value contains seconds. |
| cancel | - | Triggered when the cancel button is clicked. |
### Multi-Column Text Selector ### Multi-Column Text Selector
| Name | Parameter | Description |
| ------------ | ---------------------------------------- | ---------------------------------------- |
| change | { newValue: [newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.<br>- **newValue** is an array consisting of the values of the selected items.<br>- **newSelected** is an array consisting of the indexes of the selected items. The lengths of **newValue** and **newSelected** are the same as the length of **range**.|
| columnchange | { column: column, newValue: newValue, newSelected: newSelected } | Triggered when the value of a column in the multi-column selector changes.<br>- **column**: column whose value has changed.<br>- **newValue**: selected value.<br>- **newSelected**: index of the selected value.|
| cancel | - | Triggered when the cancel button is clicked. |
| Name | Parameter | Description |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| change | { newValue: [newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.<br/>-**newValue** is an array consisting of the values of the selected items.<br/>-**newSelected** is an array consisting of the indexes of the selected items. The lengths of **newValue** and **newSelected** are the same as the length of **range**. |
| columnchange | { column: column, newValue: newValue, newSelected: newSelected } | Triggered when the value of a column in the multi-column selector changes.<br/>-**column** indicates the column whose value has changed.<br/>-**newValue** indicates the selected value.<br/>-**newSelected** indicates the index of the selected value. |
| cancel | - | Triggered when the cancel button is clicked. |
## Methods ## Methods
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name | Parameter | Description |
| ---- | ---- | --------------- |
| show | - | Shows the picker.|
| Name | Parameter | Description |
| ---- | --------- | -------------------- |
| show | - | Displays the picker. |
## Example Code ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<select @change="selectChange"> <select @change="selectChange">
...@@ -177,7 +172,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -177,7 +172,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</option> </option>
</select> </select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange" <picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext" "></picker> oncancel="textoncancel" class="pickertext"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true" <picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker> onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
...@@ -191,6 +186,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -191,6 +186,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}" <picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker> onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -215,6 +213,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -215,6 +213,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
margin-bottom: 50px; margin-bottom: 50px;
font-size: 22px; font-size: 22px;
} }
```
```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@system.router';
import prompt from '@system.prompt'; import prompt from '@system.prompt';
...@@ -287,4 +288,4 @@ export default { ...@@ -287,4 +288,4 @@ export default {
} }
``` ```
![img](figures/mmmm.gif) ![mmmm](figures/mmmm.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @ e059812a
...@@ -2,91 +2,90 @@ ...@@ -2,91 +2,90 @@
The **\<div>** component is a basic container that is used as the root node of the page structure or is used to group the content. The **\<div>** component is a basic container that is used as the root node of the page structure or is used to group the content.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Supported Supported
## Attributes ## Attributes
Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. ## Styles
| Name | Type | Default Value | Mandatory | Description |
| ------------------------------ | -------- | --------------- | --------- | ------------------------------------------------------------ |
| flex-direction | string | row | No | Main axis direction of the flex container. Available values are as follows:<br>- **column**: Items are placed vertically from top to bottom. <br>- **row**: Items are placed horizontally from left to right. |
| flex-wrap | string | nowrap | No | Whether flex items in the container are displayed in a single line or multiple lines. Currently, dynamic modification is not supported. Available values are as follows:<br>- **nowrap**: Items are displayed on a single axis.<br>- **wrap**: Items are displayed on multiple axes. |
| justify-content | string | flex-start | No | How items are aligned along the main axis of the current line in a flex container. Available values are as follows: <br>- **flex-start**: Items are packed towards the start row. <br>- **flex-end**: Items are packed towards the end row. <br>- **center**: Items are centered along the row. <br>- **space-between**: Items are positioned with space between the rows. <br>- **space-around**: Items are positioned with space before, between, and after the rows. <br>- **space-evenly**<sup>5+</sup>: Items are arranged with even space between each two. |
| align-items | string | stretch | No | How items are aligned along the cross axis of the current line in a flex container. Available values are as follows: <br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction. <br>- **flex-start**: Items are aligned to the start of the cross axis. <br>- **flex-end**: Items are aligned to the end of the cross axis. <br>- **center**: Items are aligned in the middle of the cross axis. |
| align-content | string | flex-start | No | Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows: <br>- **flex-start**: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row. <br>- **flex-end**: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row. <br>- **center**: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row. <br>- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively. <br>- **space-around**: All rows are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows. |
| display | string | flex | No | Type of the view box of the element. Currently, dynamic modification is not supported. Available values are as follows: <br>- **flex**: flexible layout <br>- **grid**: grid layout <br>- **none**: not rendered |
| grid-template-[columns\|rows] | string | 1 row, 1 column | No | Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when **display** is set to **grid**.For example, set **grid-template-columns** to: <br>- **50px 100px 60px**: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px. <br>- **1fr 1fr 2fr**: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares. <br>- **30% 20% 50%**: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%. <br>- **repeat (2,100px)**: There are two columns. The first column is 100 px, and the second column is 100 px. <br>- **repeat(auto-fill,100px)**<sup>5+</sup>: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size. <br>- **auto 1fr 1fr**: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns. |
| grid-[columns\|rows]-gap | \<length> | 0 | No | Size of the gap between two consecutive rows or columns in a grid layout. You can also use **grid-gap** to set the same size of the gap between rows and columns. This attribute is valid only when **display** is set to **grid**. |
| grid-row-[start\|end] | number | - | No | Start and end row numbers of the current item in the grid layout. This attribute is valid only when **display** of the parent component is **grid**. (The **display** attribute of the parent component can be set to **grid** only for the **\<div>** container.) |
| grid-column-[start\|end] | number | - | No | Start and end column numbers of the current item in the grid layout. This attribute is valid only when **display** of the parent component is **grid**. (The **display** attribute of the parent component can be set to **grid** only for the **\<div>** container.) |
| grid-auto-flow<sup>5+</sup> | string | - | No | Using an algorithm to lay out the grid automatically. Available values are as follows: <br>- **row**: Elements are filled row by row. When there is no horizontal space in a row, a new row is added. <br>- **column**: Elements are filled column by column. When there is no vertical space in a column, a new column is added. |
| overflow<sup>6+</sup> | string | visible | No | Display mode when the content exceeds the container size. Available values are as follows: <br>- **visible**: Displays the extra content outside the container. <br>- **hidden**: Truncates the extra content. <br>- **scroll**: Scrolls the content vertically, with a scrollbar provided.NOTE: <br>- **overflow** works for elements whose size is fixed. |
| align-items<sup>6+</sup> | string | - | No | How items are aligned along the cross axis in a flex container. Available values are as follows: <br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction. <br>- **flex-start**: Items are aligned to the start of the cross axis. <br>- **flex-end**: Items are aligned to the end of the cross axis. <br>- **center**: Items are aligned in the middle of the cross axis. <br>- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise. |
| scrollbar-color<sup>6+</sup> | \<color> | - | No | Color of the scrollbar. |
| scrollbar-width<sup>6+</sup> | \<length> | - | No | Width of the scrollbar. |
| overscroll-effect<sup>6+</sup> | string | - | No | Scrolling edge effect. Available values are as follows: <br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. <br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance. <br>- **none**: No effect after the scroll bar is moved to the edge. |
## Events In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory| Description |
| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ |
| flex-direction | string | row | No | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.|
| flex-wrap | string | nowrap | No | Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:<br>- **nowrap**: Flex items are displayed in a single line.<br>- **wrap**: Flex items are displayed in multiple lines.|
| justify-content | string | flex-start | No | How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed toward the start edge of the container along the main axis.<br>- **flex-end**: Items are packed toward the end edge of the container along the main axis.<br>- **center**: Items are packed toward the center of the container along the main axis.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.<br>- **space-evenly**<sup>5+</sup>: Items are distributed within the container along the main axis, with even space between each two.|
| align-items | string | stretch<br>| No | How items are aligned along the cross axis of the flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container along the cross axis.<br>- **flex-start**: Items are packed toward the start edge of the cross axis.<br>- **flex-end**: Items are packed toward the end edge of the cross axis.<br>- **center**: Items are packed toward the center of the cross axis.<br>- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.|
| align-content | string | flex-start | No | Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:<br>- **flex-start**: All rows are packed toward the start edge of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **flex-end**: All rows are packed toward the end edge of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **center**: All rows are packed toward the center of the cross axis. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row.<br>- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.<br>- **space-around**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.|
| display | string | flex | No | Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:<br>- **flex**: flexible layout<br>- **grid**: grid layout<br>- **none**: not rendered<br>- **inline-flex**<sup>9+</sup>: layout with the **flex** and **inline-block** effects.|
| grid-template-[columns\|rows] | string | 1 row, 1 column | No | Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when **display** is set to **grid**.<br>Below are some example values of **grid-template-columns**:<br>- **50px 100px 60px**: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.<br>- **1fr 1fr 2fr**: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.<br>- **30% 20% 50%**: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.<br>- **repeat (2,100px)**: There are two columns. The first column is 100 px, and the second column is 100 px.<br>- **repeat(auto-fill,100px)**<sup>5+</sup>: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size.<br>- **auto 1fr 1fr**: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns.|
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | No | Size of the gap between two consecutive rows or columns in a grid layout. You can also use **grid-gap** to set the same size of the gap between rows and columns. This attribute is valid only when **display** is set to **grid**.|
| grid-row-[start\|end] | number | - | No | Start and end row numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\<div>** container whose **display** style is set to **grid**.|
| grid-column-[start\|end] | number | - | No | Start and end column numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\<div>** container whose **display** style is set to **grid**.|
| grid-auto-flow<sup>5+</sup> | string | - | No | How grid items are laid out automatically. Available values are as follows:<br>- **row**: Elements are filled row by row. When there is no horizontal space in a row, a new row is added.<br>- **column**: Elements are filled column by column. When there is no vertical space in a column, a new column is added.|
| overflow<sup>6+</sup> | string | visible | No | Display mode when the content exceeds the container size. Available values are as follows:<br>- **visible**: Displays the excess content outside the container.<br>- **hidden**: Truncates the excess content.<br>- **scroll**: Scrolls the content vertically, with a scrollbar provided.<br>**scroll** works for elements whose size is fixed. By default, the scrolling direction is the same as the container direction.|
| align-items<sup>6+</sup> | string | - | No | How items are aligned along the cross axis in a flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the flex container along the cross axis.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.|
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the scrollbar. |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | No | Width of the scrollbar. |
| overscroll-effect<sup>6+</sup> | string | - | No | How the scrollbar behaves when it reaches the edge of the scrolling area. Available values are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. When the scrollbar reaches the edge, it can continue to scroll for a distance based on the initial speed or a touch event. It rebounds after being released.<br>- **fade**: Similar to the physical dynamic effect of fade. When the scrollbar reaches the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **none**: No effect when the scrollbar reaches the edge.|
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameters | Description | | Name | Parameter | Description |
| ------------- | ---------- | ------------------------------------------------------------ | | ------------------------ | ---- | ---------------------------------------- |
| reachstart<sup>6+</sup> | - | Triggered when the page scrolls to the beginning. This event is triggered only when **flex-direction** is **row**. | | reachstart<sup>6+</sup> | - | Triggered when the page scrolls to the beginning. This event is triggered only when **flex-direction** is **row**.|
| reachend<sup>6+</sup> | - | Triggered when the page scrolls to the end. This event is triggered only when **flex-direction** is **row**. | | reachend<sup>6+</sup> | - | Triggered when the page scrolls to the end. This event is triggered only when **flex-direction** is **row**.|
| reachtop<sup>6+</sup> | - | Triggered when the page scrolls to the top. This event is triggered only when **flex-direction** is **column**. | | reachtop<sup>6+</sup> | - | Triggered when the page scrolls to the top. This event is triggered only when **flex-direction** is **column**.|
| reachbottom<sup>6+</sup> | - | Triggered when the page scrolls to the bottom. This event is triggered only when **flex-direction** is **column**. | | reachbottom<sup>6+</sup> | - | Triggered when the page scrolls to the bottom. This event is triggered only when **flex-direction** is **column**.|
## Methods ## Methods
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. In addition to the [universal methods](js-components-common-methods.md), the following methods are supported.
| Name | Parameter | Return Value | Description |
| ---------------------------- | ----------- | ------------ | --------------------------------------- |
| Name | Parameters | Return values | Description | | getScrollOffset<sup>6+</sup> | - | ScrollOffset | Obtains the scrolling offset of the element content.<br>To use this method, **overflow** must be set to **scroll**.|
| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | scrollBy<sup>6+</sup> | ScrollParam | - | Sets the scrolling offset of the element content.<br>To use this method, **overflow** must be set to **scroll**.|
| getScrollOffset<sup>6+</sup> | - | [ScrollOffset](js-components-container-div.md#table154011838131719) | Obtains the scrolling offset of the element content.<br>NOTE:To use this method, **overflow** must be set to **scroll**. By default, the scrolling direction is the same as the container layout direction. |
| scrollBy<sup>6+</sup> | [ScrollParam](js-components-container-div.md#table1139175871819) | - | Indicates the scrolling offset of the element content.<br>NOTE:To use this method, **overflow** must be set to **scroll**. |
**Table 1** ScrollOffset<sup>6+</sup> **Table 1** ScrollOffset<sup>6+</sup>
| Name | Type | Description |
| ---- | ------ | --------------- |
| Name | Type | Description | | x | number | Offset in the x-axis direction, in px.|
| ---- | ------ | -------------------------------------- | | y | number | Offset in the y-axis direction, in px.|
| x | number | Offset in the x-axis direction, in px. |
| y | number | Offset in the y-axis direction, in px. |
**Table 2** ScrollParam<sup>6+</sup> **Table 2** ScrollParam<sup>6+</sup>
| Name | Type | Description |
| ------ | ------- | ---------------- |
| dx | number | Offset for scrolling in the horizontal direction, in px.|
| dy | number | Offset for scrolling in the vertical direction, in px.|
| smooth | boolean | Whether to perform smooth processing. |
| Name | Type | Description |
| ------ | ------- | ------------------------------------------------------------ |
| dx | number | Offset for scrolling the list in the horizontal direction, in px. |
| dy | number | Offset for scrolling the list in the vertical direction, in px. |
| smooth | boolean | Whether to perform smooth processing. |
## Example ## Example
1. Flex style 1. Flex style
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="flex-box"> <div class="flex-box">
...@@ -97,7 +96,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -97,7 +96,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -129,11 +128,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -129,11 +128,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
![img](figures/en-us_image_0000001127285076.png) ![en-us_image_0000001127285076](figures/en-us_image_0000001127285076.png)
2. Flex wrap style 2. Flex wrap style
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="flex-box"> <div class="flex-box">
...@@ -144,7 +142,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -144,7 +142,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -177,11 +175,11 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -177,11 +175,11 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
![img](figures/22.png) ![22](figures/22.png)
3. Grid style 3. Grid style
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="common grid-parent"> <div class="common grid-parent">
<div class="grid-child grid-left-top"></div> <div class="grid-child grid-left-top"></div>
...@@ -191,7 +189,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -191,7 +189,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.common { .common {
width: 400px; width: 400px;
...@@ -243,11 +241,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -243,11 +241,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
![img](figures/11.png) ![11](figures/11.png)
4. Dragging<sup>7+</sup> 4. Dragging<sup>7+</sup>
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top:{{top}};"> <div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top:{{top}};">
...@@ -255,7 +252,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -255,7 +252,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -267,7 +264,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -267,7 +264,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -292,9 +289,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -292,9 +289,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
![img](figures/9.gif) ![9](figures/9.gif)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div> <div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div>
...@@ -304,7 +301,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -304,7 +301,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -320,7 +317,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -320,7 +317,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -355,11 +352,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -355,11 +352,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
![img](figures/6.gif) ![6](figures/6.gif)
5. Pinching<sup>7+</sup> 5. Pinching<sup>7+</sup>
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content "onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate" <div class="content "onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate"
...@@ -368,7 +364,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -368,7 +364,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -384,7 +380,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -384,7 +380,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -411,4 +407,4 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -411,4 +407,4 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
} }
``` ```
![img](figures/5.gif) ![5](figures/5.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-stepper-item.md
浏览文件 @ e059812a
...@@ -2,70 +2,71 @@ ...@@ -2,70 +2,71 @@
The **\<stepper-item>** component displays a step in the step navigator. This component is the child component of **\<stepper>**. The **\<stepper-item>** component displays a step in the step navigator. This component is the child component of **\<stepper>**.
> **NOTE**
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Supported Supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
| Name | Type | Default Value | Mandatory | Triggered when | In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| ----- | ----- | ------------- | --------- | ------------------------------------------------------------ |
| label | Label | - | No | Button text at the bottom of the customized step navigator. Dynamic modification is not supported. If this attribute is not set, **BACK** and **NEXT** will be used by default as button text in case the system language is not Chinese. For the first step, there is no previous button. For the last step, the text on the next button is **START** for non-Chinese languages by default. |
**Table 1** Label parameters | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| label | Label | No| Button text at the bottom of the customized step navigator. Dynamic modification is not supported. If this attribute is not set, **BACK** and **NEXT** will be used by default as button text in case the system language is not Chinese. For the first step, there is no previous button. For the last step, the text on the next button is **START** for non-Chinese languages by default.|
**Table 1** label
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| prevLabel | string | - | Text content of the previous button at the bottom of the step navigator.|
| nextLabel | string | - | Text content of the next button at the bottom of the step navigator.|
| status | string | normal | Initial status of the current step in the step navigator. Available values are as follows:<br>- **normal**: The right button is clickable and can navigate users to the next step when it is clicked.<br>- **disabled**: The right button is grayed out and unavailable.<br>- **waiting**: The right button is not displayed, and a progress bar is displayed instead.|
| Name | Type | Default Value | Triggered when |
| --------- | ------ | ------------- | ------------------------------------------------------------ |
| prevLabel | string | - | Text content of the previous button at the bottom of the step navigator. |
| nextLabel | string | - | Text content of the next button at the bottom of the step navigator. |
| status | string | normal | Initial status of the current step in the step navigator. Available values are as follows: <br>- **normal**: The right button is clickable and can navigate users to the next step when it is clicked. <br>- **disabled**: The right button is grayed out and unavailable. <br>- **waiting**: The right button is not displayed, and a progress bar is displayed instead. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | - | No| Text color.|
| font-size | &lt;length&gt; | - | No| Text size.|
| allow-scale | boolean | true | No| Whether the font size changes with the system's font size settings.|
| font-style | string | normal | No| Text font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style|
| font-weight | number\|string | normal | No| Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**.|
| text-decoration | string | none | No| Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| 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.|
> **NOTE**
| Name | Type | Default Value | Mandatory | Triggered when |
| --------------- | -------------- | ------------- | --------- | ------------------------------------------------------------ |
| color | \<color> | - | No | Text color. |
| font-size | \<length> | - | No | Text size. |
| allow-scale | boolean | true | No | Whether the text size changes with the system's font size settings. |
| font-style | string | normal | No | Text font style. Available values are as follows: <br>- **normal**: standard font style <br>- **italic**: italic font style |
| font-weight | number\|string | normal | No | Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**. |
| text-decoration | string | none | No | Text decoration. Available values are as follows: <br>- **underline**: An underline is used. <br>- **line-through**: A strikethrough is used. <br>- **none**: The standard text is used. |
| 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 font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
>
> - Height and width styles are not supported. The width of each item is the same as that of its container. The height of each item is the difference between the container height and the bottom button height. > - Height and width styles are not supported. The width of each item is the same as that of its container. The height of each item is the difference between the container height and the bottom button height.
>
> - The **posit** style is not supported. > - The **posit** style is not supported.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. ## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| appear | - | Triggered when this step is displayed.|
| disappear | - | Triggered when this step disappears.|
| Name | Parameter | Description |
| --------- | --------- | -------------------------------------- |
| appear | - | Triggered when this step is displayed. |
| disappear | - | Triggered when this step disappears. |
## Methods ## Methods
Methods in [Universal Methods](js-components-common-methods.md) are not supported. The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example ## Example
For details, see the [stepper example code](js-components-container-stepper.md). For details, see **Example** in [stepper](../arkui-js/js-components-container-stepper.md).
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-tab-content.md
浏览文件 @ e059812a
# tab-content # tab-content
**\<tab-content>** is a child component of [\<tabs>](js-components-container-tabs.md) and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **\<tabs>** component is filled. The child components are arranged horizontally. When **\<tab-content>** is used as a child element in a container, the length on the main axis direction must be specified. Otherwise, the child element cannot be displayed. **<tab-content\>** is a child component of **[<tabs\>](js-components-container-tabs.md)** and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **<tabs\>** component is filled. The child components are arranged horizontally. When **<tab-content\>** is used as a child element in a container, its length along the main axis must be specified. Otherwise, it cannot be displayed.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Supported Supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type| Default Value | Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| scrollable | boolean | true | No| Whether the tabs can be switched by swiping left or right. The default value is **true**. If this attribute is set to **false**, tab switching is implemented only through the association with **tab-bar**.|
| Name | Type | Default Value | Mandatory | Description |
| ---------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| scrollable | boolean | true | No | Whether the tabs can be switched by swiping left or right. The default value is **true**. If this attribute is set to **false**, tab switching is implemented only through the association with **tab-bar**. |
## Styles ## Styles
Styles in [Universal Styles](js-components-common-styles.md) are supported. The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
## Events ## Events
Events in [Universal Events](js-components-common-events.md) are supported. The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Example ## Example
For details, see the [tabs example code](js-components-container-tabs.md). For details, see **Example** in [tabs](../arkui-js/js-components-container-tabs.md#example).
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-svg-circle.md
浏览文件 @ e059812a
# circle # circle
The **<circle\>** component is used to draw circles. The **\<circle>** component is used to draw circles.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported. The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ---- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No| Unique ID of the component.|
| cx | \<length>\|\<percentage> | 0 | No | X-coordinate of the circle center. Attribute animations are supported. | | cx | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| X-coordinate of the circle center. Attribute animations are supported.|
| cy | \<length>\|\<percentage> | 0 | No | Y-coordinate of the circle center. Attribute animations are supported. | | cy | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Y-coordinate of the circle center. Attribute animations are supported.|
| r | \<length>\|\<percentage> | 0 | No | Radius of the circle. Attribute animations are supported. | | r | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Radius of the circle. Attribute animations are supported.|
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="400" height="400"> <svg fill="white" width="400" height="400">
...@@ -37,5 +41,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att ...@@ -37,5 +41,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
</div> </div>
``` ```
![](figures/en-us_image_0000001173164853.png)
![en-us_image_0000001173164853](figures/en-us_image_0000001173164853.png)
en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md
浏览文件 @ e059812a
# Universal Attributes # Universal Attributes
>![](../../public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>Universal attributes are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> Universal attributes are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
| Name | Type | Default Value | Mandatory | Description |
| ----------------- | ------------------------- | ------------- | --------- | ------------------------------------------------------------ |
| fill | \<color> | black | No | Fill color of an element using the shorthand attribute. Attribute animations are supported. |
| fill-opacity | number | 1 | No | Opacity of a fill color. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| fill-rule | nonzero \| evenodd | nonzero | No | **nonzero**: non-zero rule; <br/>**evenodd**: parity rule. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| stroke | \<color> | - | No | Color of the stroke. Attribute animations are supported. |
| stroke-dasharray | \<string> | - | No | Length of the dashes and notches. The format is [length length length length]. The length values of dashes and notches are separated by a space and appear in pairs. |
| stroke-dashoffset | \<length> | 0 | No | Offset for rendering the associated dash line array. Attribute animations are supported. |
| stroke-linejoin | [bevel \| miter \| round] | miter | No | The shape used at the corner of a path when stroked.<br/>- **bevel**: connects paths with bevel corners.<br/>- **miter**: connects paths with mitered corners.<br/>- **round**: connects paths with rounded corners. |
| stroke-linecap | [butt \| round \| square] | butt | No | The shape used at the end of paths when stroked.<br/>- **butt**: The stroke for each path does not extend beyond its two endpoints.<br/>- **round**: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.<br/>- **square**: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width. |
| stroke-miterlimit | number | 4 | No | Limit value when the sharp angle is drawn as a miter. Attribute animations are supported. |
| stroke-opacity | number | 1 | No | Opacity of the stroke. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| stroke-width | \<length> | 1px | No | Stroke width. Attribute animations are supported. |
| transform | \<string> | - | No | Coordinate transformation parameters of the component and its child components.The following formats are supported:<br/>- **translate(\<x>[\<y>])**: translates along the x[y]-axis.<br/>- **scale(\<x>[\<y>])**: scales along the x[y]-axis.<br/>- **rotate(\<a>[\<x> \<y>])**: rotates at an angle of **a** with (x,y) as the center.<br/>- **skewX(\<a>)**: skews at an angle of **a** along the x-axis.<br/>- **skewY(\<a>)**: skews at an angle of **a** along the y-axis. |
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| fill | &lt;color&gt; | black | No| Fill color of an element using the shorthand attribute. Attribute animations are supported.|
| fill-opacity | number | 1 | No| Opacity of a fill color. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| fill-rule | nonzero&nbsp;\|&nbsp;evenodd | nonzero | No| Fill rule.<br>**nonzero**: non-zero rule.<br>**evenodd**: parity rule.|
| opacity | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| stroke | &lt;color&gt; | - | No| Color of the stroke. Attribute animations are supported.|
| stroke-dasharray | &lt;string&gt; | - | No| Length of the dashes and notches. The format is [length length length length]. The length values of dashes and notches are separated by a space and appear in pairs.|
| stroke-dashoffset | &lt;length&gt; | 0 | No| Offset for rendering the associated dash line array. Attribute animations are supported.|
| stroke-linejoin | [bevel&nbsp;\|&nbsp;miter&nbsp;\|&nbsp;round] | miter | No| The shape used at the corner of a path when stroked.<br>**bevel**: connects paths with bevel corners.<br>**miter**: connects paths with mitered corners.<br>**round**: connects paths with rounded corners.|
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | No| The shape used at the end of paths when stroked.<br>**butt**: The stroke for each path does not extend beyond its two endpoints.<br>**round**: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.<br>**square**: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.|
| stroke-miterlimit | number | 4 | No| Limit value when the sharp angle is drawn as a miter. Attribute animations are supported.|
| stroke-opacity | number | 1 | No| Opacity of the stroke. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| stroke-width | &lt;length&gt; | 1px | No| Stroke width. Attribute animations are supported.|
| transform | &lt;string&gt; | - | No| Coordinate transformation parameters of the component and its child components.<br>The following formats are supported:<br>**translate(\<x> [\<y>])**: translates along the x[y]-axis.<br>**scale(\<x> [\<y>])**: scales along the x[y]-axis.<br>**rotate(\<a> [\<x> \<y>])**: rotates at an angle of **a** with point (x,y) as the center.<br>**skewX(\<a>)**: skews at an angle of **a** along the x-axis.<br>**skewY(\<a>)**: skews at an angle of **a** along the y-axis. |
en/application-dev/reference/arkui-js/js-components-svg-ellipse.md
浏览文件 @ e059812a
# ellipse # ellipse
The **<ellipse\>** component is used to draw oval shapes. The **\<ellipse>** component is used to draw oval shapes.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported. The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ---- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No| Unique ID of the component.|
| cx | \<length>\|\<percentage> | 0 | No | X-coordinate of the oval shape. Attribute animations are supported. | | cx | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| X-coordinate of the oval shape. Attribute animations are supported.|
| cy | \<length>\|\<percentage> | 0 | No | Y-coordinate of the oval shape. Attribute animations are supported. | | cy | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Y-coordinate of the oval shape. Attribute animations are supported.|
| rx | \<length>\|\<percentage> | 0 | No | Radius of the oval shape on the x-axis. Attribute animations are supported. | | rx | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Radius of the oval shape on the x-axis. Attribute animations are supported.|
| ry | \<length>\|\<percentage> | 0 | No | Radius of the oval shape on the y-axis. Attribute animations are supported. | | ry | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Radius of the oval shape on the y-axis. Attribute animations are supported.|
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="400" height="400"> <svg fill="white" width="400" height="400">
...@@ -38,5 +42,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att ...@@ -38,5 +42,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
</div> </div>
``` ```
![](figures/en-us_image_0000001173164793.png)
![en-us_image_0000001173164793](figures/en-us_image_0000001173164793.png)
en/application-dev/reference/arkui-js/js-components-svg-line.md
浏览文件 @ e059812a
# line # line
The **<line\>** component is used to draw a line. The **\<line>** component is used to draw a line.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported. The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The universal attributes as well as the attributes listed below are supported. The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ---- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No| Unique ID of the component.|
| x1 | \<length>\|\<percentage> | - | No | X-coordinate of the start point of the line. Attribute animations are supported. | | x1 | &lt;length&gt;\|&lt;percentage&gt; | - | No| X-coordinate of the start point of the line. Attribute animations are supported.|
| y1 | \<length>\|\<percentage> | - | No | Y-coordinate of the start point of the line. Attribute animations are supported. | | y1 | &lt;length&gt;\|&lt;percentage&gt; | - | No| Y-coordinate of the start point of the line. Attribute animations are supported.|
| x2 | \<length>\|\<percentage> | - | No | X-coordinate of the end point of the line. Attribute animations are supported. | | x2 | &lt;length&gt;\|&lt;percentage&gt; | - | No| X-coordinate of the end point of the line. Attribute animations are supported.|
| y2 | \<length>\|\<percentage> | - | No | Y-coordinate of the end point of the line. Attribute animations are supported. | | y2 | &lt;length&gt;\|&lt;percentage&gt; | - | No| Y-coordinate of the end point of the line. Attribute animations are supported.|
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400"> <svg width="400" height="400">
<line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line> <line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line> <line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line> <line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
// round: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.
<line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line> <line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line>
// butt: The stroke for each path does not extend beyond its two endpoints.
<line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line> <line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line>
// square: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.
<line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line> <line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
</svg> </svg>
</div> </div>
``` ```
![](figures/en-us_image_0000001127284954.png)
![en-us_image_0000001127284954](figures/en-us_image_0000001127284954.png)
en/application-dev/reference/arkui-js/js-components-svg-path.md
浏览文件 @ e059812a
# path # path
The **<path\>** component is used to draw a path. The **\<path>** component is used to draw a path.
> **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported. The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components. The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ---- | ------ | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No| Unique ID of the component.|
| d | string | - | No | Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths.<br/>The meanings of the letters are as follows:<br/>- M/m = moveto<br/>- L/l = lineto<br/>- H/h = horizontal lineto<br/>- V/v = vertical lineto<br/>- C/c = curveto<br/>- S/s = smooth curveto<br/>- Q/q = quadratic Belzier curve<br/>- T/t = smooth quadratic Belzier curveto<br/>- A/a = elliptical Arc<br/>- Z/z = closepath | | d | string | - | No| Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths.<br>The meanings of the letters are as follows:<br>-&nbsp;M/m&nbsp;=&nbsp;moveto<br>-&nbsp;L/l&nbsp;=&nbsp;lineto<br>-&nbsp;H/h&nbsp;=&nbsp;horizontal&nbsp;lineto<br>-&nbsp;V/v&nbsp;=&nbsp;vertical&nbsp;lineto<br>-&nbsp;C/c&nbsp;=&nbsp;curveto<br>-&nbsp;S/s&nbsp;=&nbsp;smooth&nbsp;curveto<br>-&nbsp;Q/q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br>-&nbsp;T/t&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br>-&nbsp;A/a&nbsp;=&nbsp;elliptical&nbsp;Arc<br>-&nbsp;Z/z&nbsp;=&nbsp;closepath |
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400"> <svg width="400" height="400">
...@@ -36,5 +39,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att ...@@ -36,5 +39,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
</div> </div>
``` ```
![](figures/en-us_image_0000001173164891.png)
![en-us_image_0000001173164891](figures/en-us_image_0000001173164891.png)
en/application-dev/reference/arkui-js/js-components-svg-polygon.md
浏览文件 @ e059812a
# polygon # polygon
The **<polygon\>** component is used to draw a polygon. The **\<polygon>** component is used to draw a polygon.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported. The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ------ | ------ | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No| Unique ID of the component.|
| points | string | - | No | Multiple coordinates of the polygon.<br/>The format is [x1,y1 x2,y2 x3,y3].<br/>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid. | | points | string | - | No| Multiple coordinates of the polygon.<br>The format is [x1,y1 x2,y2 x3,y3].<br>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.|
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" stroke="blue" width="400" height="400"> <svg fill="white" stroke="blue" width="400" height="400">
...@@ -35,5 +39,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att ...@@ -35,5 +39,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
</div> </div>
``` ```
![](figures/en-us_image_0000001173324721.png)
![en-us_image_0000001173324721](figures/en-us_image_0000001173324721.png)
en/application-dev/reference/arkui-js/js-components-svg-polyline.md
浏览文件 @ e059812a
# polyline # polyline
The **<polyline\>** component is used to draw a polyline. The **\<polyline>** component is used to draw a polyline.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported. The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The universal attributes as well as the attributes listed below are supported. The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ------ | ------ | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No| Unique ID of the component.|
| points | string | - | No | Multiple coordinates of the polyline.<br/>The format is [x1,y1 x2,y2 x3,y3].<br/>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid. | | points | string | - | No| Multiple coordinates of the polyline.<br>The format is [x1,y1 x2,y2 x3,y3].<br>Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.|
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" stroke="blue" width="400" height="400"> <svg fill="white" stroke="blue" width="400" height="400">
...@@ -35,5 +39,5 @@ The universal attributes as well as the attributes listed below are supported. ...@@ -35,5 +39,5 @@ The universal attributes as well as the attributes listed below are supported.
</div> </div>
``` ```
![](figures/en-us_image_0000001173164845.png)
![en-us_image_0000001173164845](figures/en-us_image_0000001173164845.png)
en/application-dev/reference/arkui-js/js-components-svg-rect.md
浏览文件 @ e059812a
# rect # rect
The **<rect\>** component is used to draw rectangles and rounded rectangles. The **\<rect>** component is used to draw rectangles and rounded rectangles.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**animate**, **animateMotion**, and **animateTransform** are supported. The following are supported: [\<animate>](js-components-svg-animate.md), [\<animateMotion>](js-components-svg-animatemotion.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ------ | ------------------------ | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No| Unique ID of the component.|
| width | \<length>\|\<percentage> | 0 | No | Width of a rectangle. Attribute animations are supported. | | width | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Width of the rectangle. Attribute animations are supported.|
| height | \<length>\|\<percentage> | 0 | No | Height of a rectangle. Attribute animations are supported. | | height | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Height of the rectangle. Attribute animations are supported.|
| x | \<length>\|\<percentage> | 0 | No | X-coordinate of the upper left corner of the rectangle. Attribute animations are supported. | | x | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| X-coordinate of the upper left corner of the rectangle. Attribute animations are supported.|
| y | \<length>\|\<percentage> | 0 | No | Y-coordinate of the upper left corner of the rectangle. Attribute animations are supported. | | y | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Y-coordinate of the upper left corner of the rectangle. Attribute animations are supported.|
| rx | \<length>\|\<percentage> | 0 | No | Radius of the rectangle rounded corner in the x-axis direction. Attribute animations are supported. | | rx | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Radius of the rectangle rounded corner in the x-axis direction. Attribute animations are supported.|
| ry | \<length>\|\<percentage> | 0 | No | Radius of the rectangle rounded corner in the y-axis direction. Attribute animations are supported. | | ry | &lt;length&gt;\|&lt;percentage&gt; | 0 | No| Radius of the rectangle rounded corner in the y-axis direction. Attribute animations are supported.|
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="400" height="400"> <svg fill="white" width="400" height="400">
...@@ -43,5 +47,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att ...@@ -43,5 +47,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
</div> </div>
``` ```
![](figures/0.png)
![0](figures/0.png)
en/application-dev/reference/arkui-js/js-components-svg-text.md
浏览文件 @ e059812a
# text # text
The **<text\>** component is used to display a piece of textual information. The **\<text>** component is used to display a piece of textual information.
> **NOTE**
> **NOTE**
>
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path.
>
> - **\<text>** can be nested only by the parent element label **svg**.
> >
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > - Only the default font **sans-serif** is supported.
> - The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path.
> - **<text\>** can be nested only by the parent element label **svg**.
> - Only the default font **sans-serif** is supported.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**\<tspan>**, **\<textpath>**, **\<animate>**, and **\<animateTransform>** are supported. The following are supported: [\<tspan>](js-components-svg-tspan.md), [\<textpath>](js-components-svg-textpath.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The attributes in the following table are supported. The attributes in the following table are supported.
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------------- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ | | -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No | Unique ID of the component. |
| x | \<length>\|\<percentage> | 0 | No | X-coordinate of the upper left corner of the component. | | x | &lt;length&gt; \| &lt;percentage&gt; | 0 | No | X-coordinate of the upper left corner of the component. |
| y | \<length>\|\<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. | | y | &lt;length&gt; \| &lt;percentage&gt; | 0 | No | Y-coordinate of the upper left corner of the component. |
| dx | \<length>\|\<percentage> | 0 | No | Offset of the text on the x-axis. | | dx | &lt;length&gt; \| &lt;percentage&gt; | 0 | No | Offset of the text on the x-axis. |
| dy | \<length>\|\<percentage> | 0 | No | Offset of the text on the y-axis. | | dy | &lt;length&gt; \| &lt;percentage&gt; | 0 | No | Offset of the text on the y-axis. |
| rotate | number | 0 | No | Rotates the lower left corner of the font based on the circle center. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. | | rotate | number | 0 | No | Rotation of the text around its lower left corner. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. |
| font-size | \<length> | 30px | No | Font size. | | font-size | &lt;length&gt; | 30px | No | Font size. |
| fill | \<color> | black | No | Font fill color. | | fill | &lt;color&gt; | black | No | Fill color of the text. |
| fill-opacity | number | 1.0 | No | Font fill opacity. | | fill-opacity | number | 1.0 | No | Fill opacity of the text. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. | | opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| stroke | \<color> | black | No | Stroke and stroke color. | | stroke | &lt;color&gt; | black | No | Stroke color. |
| stroke-width | number | 1px | No | Stroke width. | | stroke-width | number | 1px | No | Stroke width. |
| stroke-opacity | number | 1.0 | No | Stroke opacity. | | stroke-opacity | number | 1.0 | No | Stroke opacity. |
## Example ## Example
...@@ -61,7 +67,7 @@ The attributes in the following table are supported. ...@@ -61,7 +67,7 @@ The attributes in the following table are supported.
<text dx="20" y="30" dy="50" fill="blue" font-size="30">test dx|dy|fill|font-size</text> <text dx="20" y="30" dy="50" fill="blue" font-size="30">test dx|dy|fill|font-size</text>
<text x="20" y="150" fill="blue" font-size="30" fill-opacity="0.2">test fill-opacity</text> <text x="20" y="150" fill="blue" font-size="30" fill-opacity="0.2">test fill-opacity</text>
<text x="20" y="200" fill="red" font-size="40">test 0123456789</text> <text x="20" y="200" fill="red" font-size="40">test 0123456789</text>
<text x="20" y="250" fill="red" font-size="40" fill-opacity="0.2">Test Chinese</text> <text x="20" y="250" fill="red" font-size="40" fill-opacity="0.2">Test</text>
<text x="20" y="300" rotate="30" fill="red" font-size="40">test rotate</text> <text x="20" y="300" rotate="30" fill="red" font-size="40">test rotate</text>
<text x="20" y="350" fill="blue" font-size="40" stroke="red" stroke-width="2">test stroke</text> <text x="20" y="350" fill="blue" font-size="40" stroke="red" stroke-width="2">test stroke</text>
<text x="20" y="400" fill="white" font-size="40" stroke="red" stroke-width="2" stroke-opacity="0.5">test stroke-opacity</text> <text x="20" y="400" fill="white" font-size="40" stroke="red" stroke-width="2" stroke-opacity="0.5">test stroke-opacity</text>
...@@ -69,7 +75,7 @@ The attributes in the following table are supported. ...@@ -69,7 +75,7 @@ The attributes in the following table are supported.
</div> </div>
``` ```
![](figures/text-part1.png) ![text-part1](figures/text-part1.png)
Attribute animation example Attribute animation example
...@@ -93,13 +99,12 @@ Attribute animation example ...@@ -93,13 +99,12 @@ Attribute animation example
<animate attributeName="x" from="100" by="400" dur="3s" repeatCount="indefinite"></animate> <animate attributeName="x" from="100" by="400" dur="3s" repeatCount="indefinite"></animate>
<animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate>
<animate attributeName="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animate> <animate attributeName="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animate>
text attribute x|opacity|rotate
</text> </text>
</svg> </svg>
</div> </div>
``` ```
![](figures/text-animate-part1.gif) ![text-animate-part1](figures/text-animate-part1.gif)
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
...@@ -114,7 +119,7 @@ Attribute animation example ...@@ -114,7 +119,7 @@ Attribute animation example
</div> </div>
``` ```
![](figures/text-animate-part2.gif) ![text-animate-part2](figures/text-animate-part2.gif)
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
...@@ -133,5 +138,4 @@ Attribute animation example ...@@ -133,5 +138,4 @@ Attribute animation example
</div> </div>
``` ```
![](figures/text-animate-part3.gif) ![text-animate-part3](figures/text-animate-part3.gif)
en/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ e059812a
# textPath # textPath
The **<textPath\>** component is used to draw text along the path. The **\<textPath>** component is used to draw text along the path.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > **NOTE**
>- Draws text based on the specified path. The **tspan** child component can be nested for segmenting. > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>- **<textPath\>** can be nested only by the parent element label **svg**. >
> - The **\<tspan>** component can be nested in the **\<textPath>** component for segmenting.
>
> - The **\<textPath>** component can only be nested in the **\<text>** component.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**tspan** is supported. The **[\<tspan>](js-components-svg-tspan.md)** child component is supported.
## Attributes ## Attributes
The attributes in the following table are supported. The attributes in the following table are supported.
| Name | Type | Default Value | Mandatory | Description |
| -------------- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ | | Name | Type | Mandatory | Description |
| id | string | - | No | Unique ID of the component. | | -------------- | ---------------------------------- | ------ | ------------------------------------------------------------ |
| path | string | 0 | Yes | Shape of the path.<br/>The meanings of the letters are as follows:<br/>- M = moveto<br/>- L = lineto<br/>- H = horizontal lineto<br/>- V = vertical lineto<br/>- C = curveto<br/>- S = smooth curveto<br/>- Q = quadratic Belzier curve<br/>- T = smooth quadratic Belzier curveto<br/>- A = elliptical Arc<br/>- Z = closepath | | id | string | No | Unique ID of the component. |
| startOffset | \<length>\|\<percentage> | 0 | No | Start offset of the text drawing along the path. | | path | string | Yes | Shape of the path.<br>The meanings of the letters are as follows:<br>-&nbsp;M&nbsp;=&nbsp;moveto<br>-&nbsp;L&nbsp;=&nbsp;lineto<br>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br>-&nbsp;C&nbsp;=&nbsp;curveto<br>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br>-&nbsp;Z&nbsp;=&nbsp;closepath<br>Default value: **0**|
| font-size | \<length> | 30px | No | Font size. | | startOffset | &lt;length&gt;\|&lt;percentage&gt; | No | Offset of the text start point relative to the path start point.<br>Default value: **0** |
| fill | \<color> | black | No | Font fill color. | | font-size | &lt;length&gt; | No | Font size.<br>Default value: **30px** |
| by | number | - | No | Attribute offset relative to the specified animation. The default value of **from** is the original attribute value. | | fill | &lt;color&gt; | No | Font fill color.<br>Default value: **black** |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. | | by | number | No | Attribute offset relative to the specified animation. By default, **from** is the original attribute value. |
| fill-opacity | number | 1.0 | No | Font fill opacity. | | opacity | number | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.<br>Default value: **0**|
| stroke | \<color> | black | No | Stroke and stroke color. | | fill-opacity | number | No | Font fill opacity.<br>Default value: **1.0** |
| stroke-width | number | 1px | No | Stroke width. | | stroke | &lt;color&gt; | No | Stroke color.<br>Default value: **black** |
| stroke-opacity | number | 1.0 | No | Stroke opacity. | | stroke-width | number | No | Stroke width.<br>Default value: **1px** |
| stroke-opacity | number | No | Stroke opacity.<br>Default value: **1.0** |
## Example ## Example
The following is an example of the **textspan** attribute. The **textpath** text is drawn along the path specified by the **path** attribute, and the start point is offset by 20% of the **path** length. \(The drawn element **<path\>** curve is for reference only.\) The following is an example of the **\<textspan>** attributes, where text is drawn along the path specified by **path**, and the start point is offset by 20% of the **path** length. (The drawn **\<path>** curve is for reference only.)
``` ```html
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
...@@ -63,11 +59,23 @@ The following is an example of the **textspan** attribute. The **textpath** ...@@ -63,11 +59,23 @@ The following is an example of the **textspan** attribute. The **textpath**
</div> </div>
``` ```
![](figures/textpath-part1.png) ```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
Combination of **textpath** and **tspan**
``` ![textpath-part1](figures/textpath-part1.png)
Combination of **\<textpath>** and **\<tspan>**
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
...@@ -83,9 +91,9 @@ Combination of **textpath** and **tspan** ...@@ -83,9 +91,9 @@ Combination of **textpath** and **tspan**
</div> </div>
``` ```
![](figures/textpath-part2.png) ![textpath-part2](figures/textpath-part2.png)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
...@@ -103,9 +111,9 @@ Combination of **textpath** and **tspan** ...@@ -103,9 +111,9 @@ Combination of **textpath** and **tspan**
</div> </div>
``` ```
![](figures/textpath-part3.png) ![textpath-part3](figures/textpath-part3.png)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
...@@ -124,11 +132,11 @@ Combination of **textpath** and **tspan** ...@@ -124,11 +132,11 @@ Combination of **textpath** and **tspan**
</div> </div>
``` ```
![](figures/textpath-part4.png) ![textpath-part4](figures/textpath-part4.png)
The following is an example of the **startOffset** animation. When the text is drawn, the start offset is moved from 10% to 40%, and the text whose length exceeds the path length range is not drawn. The following is an example of the **startOffset** animation, where the value of **startOffset** changes from 10% to 40%, and the text is not drawn when its length exceeds the path length range.
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: row; flex-direction: row;
...@@ -139,7 +147,7 @@ The following is an example of the **startOffset** animation. When the text is ...@@ -139,7 +147,7 @@ The following is an example of the **startOffset** animation. When the text is
} }
``` ```
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
...@@ -156,11 +164,11 @@ The following is an example of the **startOffset** animation. When the text is ...@@ -156,11 +164,11 @@ The following is an example of the **startOffset** animation. When the text is
</div> </div>
``` ```
![](figures/textpath-animate1.gif) ![textpath-animate1](figures/textpath-animate1.gif)
Animation and effect of the combination of **textpath** and **tspan** Attribute animation of the **\<textPath>** and **\<tspan>** in combination
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
...@@ -187,17 +195,17 @@ Animation and effect of the combination of **textpath** and **tspan** ...@@ -187,17 +195,17 @@ Animation and effect of the combination of **textpath** and **tspan**
</div> </div>
``` ```
![](figures/textpath-animate2.gif) ![textpath-animate2](figures/textpath-animate2.gif)
\(1\) "tspan attribute x|rotate" indicates that the text drawing start point moves from 50 px to 100 px and rotates clockwise by 0 degrees to 360 degrees. (1) **"tspan attribute x|rotate"**: The beginning of the text is offset from 50 px to 100 px, and the text rotates clockwise by 0 degrees to 360 degrees.
\(2\) "tspan attribute dx|opacity" is drawn after the "tspan static." drawing is complete. The offset moves from 0% to 30%, and the opacity changes from shallow to deep. (2) **"tspan attribute dx|opacity"**: The text is drawn after the "tspan static." drawing is complete. The horizontal offset moves from 0% to 30%, and the opacity changes from shallow to deep.
\(3\) **tspan move**: After the previous **tspan** is drawn, the next tspan is drawn with an offset of 5% to show the effect of following the previous **tspan**. (3) **tspan move**: After the previous **\<tspan>** is drawn, the next **\<tspan>** is drawn with an offset of 5%, creating the effect of following the previous **\<tspan>**.
Animation and effect of the combination of **textpath** and **tspan** Attribute animation of the **\<textPath>** and **\<tspan>** in combination
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
...@@ -223,19 +231,19 @@ Animation and effect of the combination of **textpath** and **tspan** ...@@ -223,19 +231,19 @@ Animation and effect of the combination of **textpath** and **tspan**
</div> </div>
``` ```
![](figures/textpath-animate3.gif) ![textpath-animate3](figures/textpath-animate3.gif)
\(1\) **This is TextPath**.: Draw the first paragraph of text on the path without offset. The size is 30px, and the color is "\#D2691E". (1) **"This is TextPath."**: The first segment of text, in the size of 30px and color of \#D2691E is drawn on the path without offset.
\(2\) The value of **tspan attribute fill|fill-opacity** is 20px offset from the end of the previous text segment. The color is from blue to red, and the opacity is from light to deep. (2) **"tspan attribute fill|fill-opacity"**: The new segment of text is 20px offset from the end of the previous text segment. The text color changes from blue to red, and the opacity changes from light to deep.
\(3\) **tspan attribute font-size**: The drawing start point is 20px offset from the end of the previous segment. The start point is static, and the font size ranges from 10px to 50px. The overall length is continuously prolonged. (3) **"tspan attribute font-size"**: The new segment of text is 20px offset from the end of the previous text segment. While the start point of the text is static, the font size shifts from 10px to 50px and the overall length is continuously prolonged.
\(4\) **Single tspan**: Draw a horizontal line at the end of the previous segment to follow the previous segment. (4) **"Single tspan"**: A horizontal line is drawn at the end of the previous segment, creating the effect of following the previous segment.
Animation and effect of the combination of **textpath** and **tspan** Attribute animation of the **\<textPath>** and **\<tspan>** in combination
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
...@@ -260,9 +268,8 @@ Animation and effect of the combination of **textpath** and **tspan** ...@@ -260,9 +268,8 @@ Animation and effect of the combination of **textpath** and **tspan**
</div> </div>
``` ```
![](figures/textpath-animate4.gif) ![textpath-animate4](figures/textpath-animate4.gif)
\(1\) **tspan attribute stroke**: The stroke color gradually changes from red to green.
\(2\) **tspan attribute stroke-width-opacity**: The contour width is changed from 1px to 5px, and the opacity is changed from shallow to deep. (1) **"tspan attribute stroke"**: The stroke color gradually changes from red to green.
(2) **"tspan attribute stroke-width-opacity"**: The stroke width changes from 1px to 5px, and the opacity changes from shallow to deep.
en/application-dev/reference/arkui-js/js-components-svg-tspan.md
浏览文件 @ e059812a
# tspan # tspan
>![](../../public_sys-resources/icon-note.gif) **NOTE:** The **\<tspan>** component is used to add a text style.
>- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>- The text content must be written in the content area. The **<tspan\>** child component can be nested.
>- **<tspan\>** can be nested only by the parent element label **svg**. > **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - This component can have **\<tspan>** child components nested.
>
> - This component can only be nested by the parent element label **svg**.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Tspan is supported. The **[\<tspan>](js-components-svg-tspan.md)** child component is supported.
## Attributes
The attributes in the following table are supported. The attributes in the following table are supported.
| Name | Type | Default Value | Mandatory | Description |
| -------------- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ |
| id | string | - | No | Unique ID of the component. |
| x | \<length>\|\<percentage> | 0 | No | X-coordinate of the upper left corner of the component. |
| y | \<length>\|\<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. This parameter is invalid for the **textpath** child component. |
| dx | \<length>\|\<percentage> | 0 | No | Offset of the text on the x-axis. |
| dy | \<length>\|\<percentage> | 0 | No | Offset of the text on the y-axis. This parameter is invalid for the **textpath** child component. |
| rotate | number | 0 | No | Rotates the lower left corner of the font based on the circle center. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. |
| font-size | \<length> | 30px | No | Font size. |
| fill | \<color> | black | No | Font fill color. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported. |
| fill-opacity | number | 1.0 | No | Font fill opacity. |
| stroke | \<color> | black | No | Stroke and stroke color. |
| stroke-width | number | 1px | No | Stroke width. |
| stroke-opacity | number | 1.0 | No | Stroke opacity. |
| Name | Type | Default Value | Mandatory | Description |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | No | Unique ID of the component. |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | No | X-coordinate of the upper left corner of the component. |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | No | Y-coordinate of the upper left corner of the component. This attribute is invalid when the component is a child component of the **\<textpath>**. |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | No | Offset of the text on the x-axis. |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | No | Offset of the text on the y-axis. This attribute is invalid when the component is a child component of the **\<textpath>**. |
| rotate | number | 0 | No | Rotation of the text around its lower left corner. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. |
| font-size | &lt;length&gt; | 30px | No | Font size. |
| fill | &lt;color&gt; | black | No | Fill color of the text. |
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.|
| fill-opacity | number | 1.0 | No | Fill opacity of the text. |
| stroke | &lt;color&gt; | black | No | Stroke color. |
| stroke-width | number | 1px | No | Stroke width. |
| stroke-opacity | number | 1.0 | No | Stroke opacity. |
## Example ## Example
``` ```html
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1000px;
width: 1080px;
}
```
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg > <svg >
...@@ -65,22 +63,22 @@ The attributes in the following table are supported. ...@@ -65,22 +63,22 @@ The attributes in the following table are supported.
</div> </div>
``` ```
![](figures/tspan-part1.png) ```css
Attribute animation example
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
height: 3000px; height: 1000px;
width: 1080px; width: 1080px;
} }
``` ```
``` ![tspan-part1](figures/tspan-part1.png)
Attribute animation example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -103,9 +101,20 @@ Attribute animation example ...@@ -103,9 +101,20 @@ Attribute animation example
</div> </div>
``` ```
![](figures/tspan-animate-part1.gif) ```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
width: 1080px;
}
``` ```
![tspan-animate-part1](figures/tspan-animate-part1.gif)
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -120,9 +129,9 @@ Attribute animation example ...@@ -120,9 +129,9 @@ Attribute animation example
</div> </div>
``` ```
![](figures/tspan-animate-part2.gif) ![tspan-animate-part2](figures/tspan-animate-part2.gif)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -136,9 +145,9 @@ Attribute animation example ...@@ -136,9 +145,9 @@ Attribute animation example
</div> </div>
``` ```
![](figures/tspan-animate-part3.gif) ![tspan-animate-part3](figures/tspan-animate-part3.gif)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -159,5 +168,4 @@ Attribute animation example ...@@ -159,5 +168,4 @@ Attribute animation example
</div> </div>
``` ```
![](figures/tspan-animate-part4.gif) ![tspan-animate-part4](figures/tspan-animate-part4.gif)
en/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ e059812a
# svg # svg
The **<svg\>** component is a basic container. It can be used as the root node of an SVG document or be used to nest an SVG fragment into an SVG document. The **\<svg>** component is a basic container. It can be used as the root node of an SVG document or be used to nest an SVG fragment into an SVG document.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > **NOTE**
>- The width and height must be defined for the **<svg\>** parent component or **<svg\>** component. Otherwise, the component is not drawn. > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
**svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polygon**, **polyline**, **text**, **animate**, and **animateTransform** are supported. The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](../arkui-js/js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](../arkui-js/js-components-svg-line.md), [\<polygon>](../arkui-js/js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animateTransform.md).
## Attributes ## Attributes
The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components. The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ------- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| id | string | - | No | Unique ID of the component. | | id | string | - | No| Unique ID of the component.|
| width | \<length>\|\<percentage> | - | No | Component width. | | width | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component width.|
| height | \<length>\|\<percentage> | - | No | Component height. | | height | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component height.|
| x | \<length>\|\<percentage> | - | No | X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. | | x | &lt;length&gt;\|&lt;percentage&gt; | - | No| X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| y | \<length>\|\<percentage> | | No | Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. | | y | &lt;length&gt;\|&lt;percentage&gt; | | No| Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| viewBox | string | - | No | View box of the current **\<svg>** component. The supported format is **\<number number number number>**. The four parameters indicate the **min-x**, **min-y**, **width**, and **height**. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. | | viewBox | string | - | No| View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. |
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400"> <svg width="400" height="400">
...@@ -48,5 +52,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att ...@@ -48,5 +52,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
</div> </div>
``` ```
![](figures/en-us_image_0000001173164789.png)
![en-us_image_0000001173164789](figures/en-us_image_0000001173164789.png)
en/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ e059812a
# Badge # Badge
The **\<Badge>** component is a container that can be attached to another component for tagging.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Badge&gt;** component presents event information on a component.
## Required Permissions
None
## Child Components ## Child Components
...@@ -20,88 +14,139 @@ This component supports only one child component. ...@@ -20,88 +14,139 @@ This component supports only one child component.
## APIs ## APIs
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle}) **Method 1**: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})
- Parameters Create a badge.
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| count | number | Yes | - | Number of prompt messages. |
| position | BadgePosition | No | BadgePosition.RightTop | Position to display the badge relative to the parent component. |
| maxCount | number | No | 99 | Maximum number of prompt messages. When the maximum number is reached, only **maxCount+** is displayed. |
| style | BadgeStyle | No | - | Style of the **&lt;Badge&gt;** component, including the text color, text size, badge color, and badge size. |
Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle}) **Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| count | number | Yes| - | Number of notifications.|
| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
| maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.|
| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size. |
Creates a **&lt;Badge&gt;** component based on the string. **Method 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
- Parameters Creates a badge based on the given string.
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | String of the content to prompt. |
| position | BadgePosition | No | BadgePosition.RightTop | Display position of the badge. |
| style | BadgeStyle | No | - | Style of the **&lt;Badge&gt;** component, including the text color, text size, badge color, and badge size. |
- BadgeStyle object **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| color | Color | No | Color.White | Text color. |
| fontSize | number \| string | No | 10 | Text size. |
| badgeSize | number \| string | Yes | - | Size of the badge. |
| badgeColor | Color | No | Color.Red | Color of the badge. |
- BadgePosition enums | Name| Type| Mandatory| Default Value| Description|
| Name | Description | | -------- | -------- | -------- | -------- | -------- |
| -------- | -------- | | value | string | Yes| - | Prompt content.|
| Right | The badge is vertically centered on the right of the parent component. | | position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
| RightTop | The badge is displayed in the upper right corner of the parent component. | | style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size. |
| Left | The badge is vertically centered on the left of the parent component. |
## BadgePosition
## Example | Name| Description|
| -------- | -------- |
| RightTop | The badge is displayed in the upper right corner of the parent component.|
| Right | The badge is vertically centered on the right of the parent component.|
| Left | The badge is vertically centered on the left of the parent component.|
## BadgeStyle
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Font color. |
| fontSize | number&nbsp;\|&nbsp;string | No| 10 | Font size. |
| badgeSize | number&nbsp;\|&nbsp;string | Yes| - | Badge size.|
| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.|
``` ## Example
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BadgeExample { struct BadgeExample {
@State counts: number = 1 @State counts: number = 1;
@State message: string = 'new' @State message: string = 'new';
build() { build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) { Column() {
Badge({ Text('numberBadge').width('80%')
count: this.counts, Row({ space: 10 }) {
maxCount: 99, // Number badge. The default value of maxCount is 99. If the number of notifications exceeds 99, 99+ is displayed.
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } Badge({
}) { count: this.counts,
Button('message') maxCount: 99,
.onClick(() => { position: BadgePosition.RightTop,
this.counts++ style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) }) {
.width(100).height(50).backgroundColor(0x317aff) Button('message')
}.width(100).height(50) .onClick(() => {
this.counts++;
Badge({ })
value: this.message, .width(100).height(50).backgroundColor(0x317aff)
style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } }.width(100).height(50)
}) {
Text('message') // Number badge
.width(80).height(50).fontSize(16).lineHeight(37) Badge({
.borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) count: this.counts,
}.width(80).height(50) maxCount: 99,
position: BadgePosition.Left,
Badge({ style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
value: '', }) {
position: 1, Button('message')
style: { badgeSize: 6, badgeColor: Color.Red } .onClick(() => {
}) { this.counts++;
Text('message') })
.width(90).height(50).fontSize(16).lineHeight(37) .width(100).height(50).backgroundColor(0x317aff)
.borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) }.width(100).height(50)
}.width(90).height(50)
}.width('100%').margin({ top: 5 })
// Number badge
Badge({
count: this.counts,
maxCount: 99,
position: BadgePosition.Right,
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) {
Button('message')
.onClick(() => {
this.counts++;
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
}.margin(10)
Text('stringBadge').width('80%')
Row({ space: 30 }) {
Badge({
value: this.message,
style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue }
}) {
Text('message')
.width(80)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED)
}.width(80).height(50)
// When value is null, the dot-style badge is used.
Badge({
value: '',
position: BadgePosition.Right,
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Text('message')
.width(90)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED)
}.width(90).height(50)
}.margin(10)
}
} }
} }
``` ```
![en-us_image_0000001212218470](figures/en-us_image_0000001212218470.gif) ![badge](figures/badge.png)
en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ e059812a
# Component Area Change Event # Component Area Change Event
The area change event is triggered when the component's size, position, or any other attribute that may affect its display area changes.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Events ## Events
| Name | Bubble Supported | Description | | Name | Bubbling Supported| Description |
| -------- | -------- | -------- | | ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event: (oldValue: Area, newValue: Area) =&gt; void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. | | onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) =&gt; void) | No | Triggered when the component area changes.|
## Example ## Example
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct AreaExample { struct AreaExample {
@State value: string = 'Text' @State value: string = 'Text'
@State size1: string = '' @State sizeValue: string = ''
build() { build() {
Column() { Column() {
...@@ -38,9 +33,9 @@ struct AreaExample { ...@@ -38,9 +33,9 @@ struct AreaExample {
}) })
.onAreaChange((oldValue: Area, newValue: Area) => { .onAreaChange((oldValue: Area, newValue: Area) => {
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
this.size1 = JSON.stringify(newValue) this.sizeValue = JSON.stringify(newValue)
}) })
Text('new area is: \n' + this.size).margin({ right: 30, left: 30 }) Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
} }
.width('100%').height('100%').margin({ top: 30 }) .width('100%').height('100%').margin({ top: 30 })
} }
......
en/application-dev/ui/Readme-EN.md
浏览文件 @ e059812a
# UI Development # UI Development
- [ArkUI Overview](arkui-overview.md) - [ArkUI Overview](arkui-overview.md)
- TypeScript-based Declarative Development Paradigm - UI Development with eTS-based Declarative Development Paradigm
- [Overview](ui-ts-overview.md) - [Overview](ui-ts-overview.md)
- Framework Overview - Framework Overview
- File Organization - File Organization
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
- ["js" Tag](ts-framework-js-tag.md) - ["js" Tag](ts-framework-js-tag.md)
- Resource Management - Resource Management
- [Resource File Categories](ui-ts-basic-resource-file-categories.md) - [Resource File Categories](ui-ts-basic-resource-file-categories.md)
- [Accessing Resources](ts-resource-access.md) - [Resource Access](ts-resource-access.md)
- [Pixel Units](ts-pixel-units.md) - [Pixel Units](ts-pixel-units.md)
- Declarative Syntax - Declarative Syntax
- [Overview](ts-syntax-intro.md) - [Overview](ts-syntax-intro.md)
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
- [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md) - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
- [Recommendations for Improving Performance](ts-performance-improvement-recommendation.md) - [Recommendations for Improving Performance](ts-performance-improvement-recommendation.md)
- JavaScript-based Web-like Development Paradigm - UI Development with JavaScript-compatible Web-like Development Paradig
- [Overview](ui-js-overview.md) - [Overview](ui-js-overview.md)
- Framework - Framework
- [File Organization](js-framework-file.md) - [File Organization](js-framework-file.md)
...@@ -99,14 +99,14 @@ ...@@ -99,14 +99,14 @@
- [Defining Gesture Events](ui-js-building-ui-event.md) - [Defining Gesture Events](ui-js-building-ui-event.md)
- [Defining Page Routes](ui-js-building-ui-routes.md) - [Defining Page Routes](ui-js-building-ui-routes.md)
- Common Component Development Guidelines - Common Component Development Guidelines
- Container Components - Container Component Development
- [List Development](ui-js-components-list.md) - [List Development](ui-js-components-list.md)
- [Dialog Development](ui-js-components-dialog.md) - [Dialog Development](ui-js-components-dialog.md)
- [Form Development](ui-js-components-form.md) - [Form Development](ui-js-components-form.md)
- [Stepper Development](ui-js-components-stepper.md) - [Stepper Development](ui-js-components-stepper.md)
- [Tabs Development](ui-js-component-tabs.md) - [Tabs Development](ui-js-component-tabs.md)
- [Swiper Development](ui-js-components-swiper.md) - [Swiper Development](ui-js-components-swiper.md)
- Basic Components - Basic Component Development
- [Text Development](ui-js-components-text.md) - [Text Development](ui-js-components-text.md)
- [Input Development](ui-js-components-input.md) - [Input Development](ui-js-components-input.md)
- [Button Development](ui-js-components-button.md) - [Button Development](ui-js-components-button.md)
...@@ -127,8 +127,8 @@ ...@@ -127,8 +127,8 @@
- [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md) - [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md)
- [Path2D](ui-js-components-path2d.md) - [Path2D](ui-js-components-path2d.md)
- [OffscreenCanvas](ui-js-components-offscreencanvas.md) - [OffscreenCanvas](ui-js-components-offscreencanvas.md)
- [Grid-container Development](ui-js-components-grid.md) - [Grid Container Development](ui-js-components-grid.md)
- Svg - SVG Development
- [Basics](ui-js-components-svg-overview.md) - [Basics](ui-js-components-svg-overview.md)
- [Graph Drawing](ui-js-components-svg-graphics.md) - [Graph Drawing](ui-js-components-svg-graphics.md)
- [Path Drawing](ui-js-components-svg-path.md) - [Path Drawing](ui-js-components-svg-path.md)
......
en/application-dev/ui/arkui-overview.md
浏览文件 @ e059812a
...@@ -21,7 +21,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap ...@@ -21,7 +21,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts. - Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
- Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability. - Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style. - Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
- Two development paradigms: ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice. - Two development paradigms: ArkUI comes with two development paradigms: eTS-based declarative development paradigm (declarative development paradigm for short) and JavaScript-compatible web-like development paradigm (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
| Development Paradigm | Description | Applicable To | Intended Audience | | Development Paradigm | Description | Applicable To | Intended Audience |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
......
en/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @ e059812a
...@@ -4,18 +4,14 @@ ...@@ -4,18 +4,14 @@
The application code files can be accessed in the following ways: The application code files can be accessed in the following ways:
- Use a relative path to reference the code file. For example, if the upper-level directory is ../common/utils/utils.ets, use ./common/utils/utils.ets for the current directory. - Use a relative path to reference the code file. Specifically, use **../** to refer to the upper-level directory and **./** to refer to the current directory.
- Use the root path of the current module to reference the code file, for example, common/utils/utils.ets.
- Store common code files in the common directory.
- Use the root path of the current module to reference the code file, for example, **common/utils/utils**.
## Example ## Example
``` ```
import { FoodData, FoodList } from "../common/utils/utils.ets"; import { FoodData, FoodList } from "../common/utils/utils";
@Entry @Entry
@Component @Component
...@@ -33,10 +29,9 @@ struct FoodCategoryList { ...@@ -33,10 +29,9 @@ struct FoodCategoryList {
} }
``` ```
Example for importing a code file: Imported **utils.ets** file:
```ts
```
//common/utils/utils.ets //common/utils/utils.ets
export class FoodData { export class FoodData {
......
en/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ e059812a
...@@ -8,27 +8,26 @@ The **&lt;tabs&gt;** component is a common UI component for navigation. It allow ...@@ -8,27 +8,26 @@ The **&lt;tabs&gt;** component is a common UI component for navigation. It allow
Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
``` ```
<!-- index.hml --> <!-- xxx.hml -->
<div class="container" > <div class="container">
<tabs> <tab-bar> <tabs>
<text>item1</text> <tab-bar>
<text>item2</text> <text>item1</text>
</tab-bar> <text>item2</text>
<tab-content> </tab-bar>
<div class="text"> <tab-content>
<text>content1</text> <div class="text">
</div> <text>content1</text>
<div class="text"> </div>
<text>content2</text> <div class="text">
</div> <text>content2</text>
</tab-content> </div>
</tabs> </tab-content>
</tabs>
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
.container { .container {
...@@ -52,7 +51,6 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. ...@@ -52,7 +51,6 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
By default, the active tab of a **&lt;tabs&gt;** component is the one with the specified **index**. To show the **&lt;tabs&gt;** vertically, set the **vertical** attribute to **true**. By default, the active tab of a **&lt;tabs&gt;** component is the one with the specified **index**. To show the **&lt;tabs&gt;** vertically, set the **vertical** attribute to **true**.
``` ```
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
...@@ -77,7 +75,6 @@ By default, the active tab of a **&lt;tabs&gt;** component is the one with the s ...@@ -77,7 +75,6 @@ By default, the active tab of a **&lt;tabs&gt;** component is the one with the s
Set the **mode** attribute to enable the child components of the **&lt;tab-bar&gt;** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **&lt;tab-content&gt;**. Set the **mode** attribute to enable the child components of the **&lt;tab-bar&gt;** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **&lt;tab-content&gt;**.
``` ```
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
...@@ -103,7 +100,7 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g ...@@ -103,7 +100,7 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
## Setting Styles ## Setting Styles
Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component. Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
``` ```
<!-- index.hml --> <!-- index.hml -->
...@@ -125,7 +122,6 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g ...@@ -125,7 +122,6 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
.container { .container {
...@@ -161,7 +157,6 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g ...@@ -161,7 +157,6 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching. Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching.
``` ```
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
...@@ -182,7 +177,6 @@ Add the **change** event for the **&lt;tabs&gt;** component to display the index ...@@ -182,7 +177,6 @@ Add the **change** event for the **&lt;tabs&gt;** component to display the index
</div> </div>
``` ```
``` ```
/* index.js */ /* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
...@@ -198,9 +192,9 @@ export default { ...@@ -198,9 +192,9 @@ export default {
![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif) ![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> >
> A **&lt;tabs&gt;** can wrap at most one [**&lt;tab-bar&gt;**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**&lt;tab-content&gt;**](../reference/arkui-js/js-components-container-tab-content.md). > A **&lt;tabs&gt;** can wrap at most one [**&lt;tab-bar&gt;**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**&lt;tab-content&gt;**](../reference/arkui-js/js-components-container-tab-content.md).
## Example Scenario ## Example Scenario
...@@ -209,7 +203,6 @@ In this example, you can switch between tabs and the active tab has the title te ...@@ -209,7 +203,6 @@ In this example, you can switch between tabs and the active tab has the title te
Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline. Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
``` ```
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
...@@ -238,7 +231,6 @@ Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** compo ...@@ -238,7 +231,6 @@ Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** compo
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
.container{ .container{
...@@ -275,7 +267,6 @@ background-color:#F1F3F5; ...@@ -275,7 +267,6 @@ background-color:#F1F3F5;
} }
``` ```
``` ```
/* index.js */ /* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
......
en/application-dev/ui/ui-js-overview.md
浏览文件 @ e059812a
# Overview # Overview
The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs. The JavaScript-compatible web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
For details about the components, see [Component Reference (JavaScript-based Web-like Development Paradigm)](../reference/arkui-js/js-components-common-attributes.md). For details about the components, see [Component Reference (JavaScript-compatible Web-like Development Paradigm)](../reference/arkui-js/js-components-common-attributes.md).
## Overall Architecture ## Overall Architecture
ArkUI with the JavaScript-based web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer. ArkUI with the JavaScript-compatible web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或