Skip to content

D
Docs

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

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

Update docs (11968) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 0c4f5861
隐藏空白更改
内联 并排
Showing with 601 addition and 469 deletion
en/application-dev/quick-start/start-overview.md
浏览文件 @ 47d9c930
...@@ -16,12 +16,12 @@ Before you begin, there are some basic concepts that will help you better unders ...@@ -16,12 +16,12 @@ Before you begin, there are some basic concepts that will help you better unders
OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities. OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities.
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. 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** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** | | **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
| Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers | | Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers |
| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development. For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development.
......
en/application-dev/reference/arkui-js/js-components-basic-input.md
浏览文件 @ 47d9c930
...@@ -20,23 +20,23 @@ Not supported ...@@ -20,23 +20,23 @@ Not supported
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory| Description | | Name | Type | Default Value | Mandatory | Description |
| -------------------------------- | ----------------------- | --------- | ---- | ------------------------------------------------------------ | | -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- |
| type | string | text<br>| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified. <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.| | type | string | text<br>| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified. <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.|
| checked | boolean | false | No | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | | checked | boolean | false | No | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. |
| name | string | - | No | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**. | | name | string | - | No | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**. |
| value | string | - | No | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.| | value | string | - | No | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**.| | placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text** \|email\|date\|time\|number\|**password**.|
| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.| | maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit. |
| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.| | enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.|
| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.| | headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.|
| showcounter<sup>5+</sup> | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | | showcounter<sup>5+</sup> | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. |
| menuoptions<sup>5+</sup> | Array&lt;MeunOption&gt; | - | No | Menu options displayed after users click the **More** button. | | menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | No | Menu options displayed after users click the **More** button. |
| autofocus<sup>6+</sup> | boolean | false | No | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.| | autofocus<sup>6+</sup> | boolean | false | No | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.|
| selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. | | selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. |
| selectedend<sup>6+</sup> | number | -1 | No | End position for text selection. | | selectedend<sup>6+</sup> | number | -1 | No | End position for text selection. |
| softkeyboardenabled<sup>6+</sup> | boolean | true | No | Whether to display the soft keyboard during editing. | | softkeyboardenabled<sup>6+</sup> | boolean | true | No | Whether to display the soft keyboard during editing. |
| showpasswordicon<sup>6+</sup> | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. | | showpasswordicon<sup>6+</sup> | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. |
**Table 1** MenuOption<sup>5+</sup> **Table 1** MenuOption<sup>5+</sup>
...@@ -50,14 +50,14 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri ...@@ -50,14 +50,14 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory| Description | | Name | Type | Default Value | Mandatory | Description |
| ------------------------ | -------------------------- | ---------- | ---- | ------------------------------------------------------------ | | ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | No | Font color of the single-line text box or button. | | color | &lt;color&gt; | \#e6000000 | No | Font color of the single-line text box or button. |
| font-size | &lt;length&gt; | 16px | No | Font size of the single-line text box or button. | | font-size | &lt;length&gt; | 16px | No | Font size of the single-line text box or button. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| placeholder-color | &lt;color&gt; | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.| | placeholder-color | &lt;color&gt; | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. |
| font-weight | number&nbsp;\|&nbsp;string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md).| | font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md) component. |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the input cursor. | | caret-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the caret. |
## Events ## Events
...@@ -65,30 +65,32 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md ...@@ -65,30 +65,32 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
- When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. - When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported.
| Name | Parameter | Description | | Name | Parameter | Description |
| ------------------------- | ---------------------------------------- | ---------------------------------------- | | ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {<br>&nbsp;value: inputValue<br>&nbsp;} | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.| | change | {<br> value: inputValue<br> } | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.|
| enterkeyclick | {<br>&nbsp;value: enterKey<br>&nbsp;} | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.| | enterkeyclick | {<br> value: enterKey<br> } | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.|
| translate<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.| | translate<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
| share<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.| | share<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
| search<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.| | search<sup>5+</sup> | {<br> value: selectedText<br> } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
| optionselect<sup>5+</sup> | {<br>&nbsp;index: optionIndex,<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.| | optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br> } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
| selectchange<sup>6+</sup> | {<br>start:&nbsp;number,<br>end:&nbsp;number<br>&nbsp;} | Triggered when the text selection changes. | | selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br> } | Triggered when the text selection changes. |
- When **type** is set to **checkbox** or **radio**, the following events are supported. - When **type** is set to **checkbox** or **radio**, the following events are supported.
| Name | Parameter | Description | | Name | Parameter | Description |
| ------ | ---------------------------------------- | ---------------------------------------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| change | {<br>&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;<br>} | Triggered when the checked status of the **checkbox** or **radio** button changes.| | change | {<br> checked:true \| false <br>} | Triggered when the checked status of the **checkbox** or **radio** button changes.|
## Methods ## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name | Parameter | Description | | Name | Parameter | Description |
| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------- | ---------------------------------------- | ---------------------------------------- |
| focus | {<br>&nbsp;focus:&nbsp;true\|false<br>&nbsp;}:<br>If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or password, the input method can be displayed or hidden.| | focus | {<br> focus: true\|false<br> }:<br>If **focus** is not passed, the default value **true** is used. | Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the input method can be displayed or collapsed. |
| showError | {<br>&nbsp;error:&nbsp;string&nbsp;<br>} | Displays the error message. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.| | showError | {<br> error: string <br>} | Displays the error message. This method is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. |
| delete<sup>6+</sup> | - | Deletes the text content based on the current cursor position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the cursor if the current input component does not have a cursor.| | delete<sup>6+</sup> | - | Deletes text based on the current caret position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the caret if the current input component does not have a caret. |
## Example ## Example
...@@ -100,26 +102,28 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -100,26 +102,28 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
headericon="/common/search.svg" placeholder="Please input text" onchange="change" headericon="/common/search.svg" placeholder="Please input text" onchange="change"
onenterkeyclick="enterkeyClick"> onenterkeyclick="enterkeyClick">
</input> </input>
<input class="button" type="button" value="Submit" onclick="buttonClick"></input> <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.content { .content {
width: 60%; width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.input { .input {
width: 60%;
placeholder-color: gray; placeholder-color: gray;
} }
.button { .button {
width: 60%;
background-color: gray; background-color: gray;
margin-top: 20px; margin-top: 20px;
} }
``` ```
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
...@@ -141,11 +145,11 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -141,11 +145,11 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
error: 'error text' error: 'error text'
}); });
}, },
} }
``` ```
![1-2](figures/1-2.png) ![1-2](figures/1-2.png)
2. Common button 2. Common button
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
......
en/application-dev/reference/arkui-js/js-components-basic-label.md
浏览文件 @ 47d9c930
# label # label
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<label>** component defines labels for the **\<input>**, **\<button>**, and **\<textarea>** components. When a label is clicked, the click effect of the component associated with the label will be triggered. The **\<label>** component defines labels for the **\<input>**, **\<button>**, and **\<textarea>** components. When a label is clicked, the click effect of the component associated with the label will be triggered.
## Required Permissions ## Required Permissions
None None
## Child Component
## Child Components
Not supported Not supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| ------ | ------ | ---- | ---- | ----------- |
| target | string | - | No | Attribute ID of the target component.|
| Name | Type | Default Value | Mandatory | Description |
| ------ | ------ | ------------- | --------- | ------------------------------------- |
| target | string | - | No | Attribute ID of the target component. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| ----------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| Name | Type | Default Value | Mandatory | Description | | color | &lt;color&gt; | #e5000000 | No | Font color. |
| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ | | font-size | &lt;length&gt; | 30px | No | Font size. |
| color | \<color> | #e5000000 | No | Text color. | | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
| font-size | \<length> | 30px | No | Font size (px). | | letter-spacing | &lt;length&gt; | 0px | No | Character spacing (px). |
| allow-scale | boolean | true | No | Whether the text size changes with the system's font size settings.NOTE:For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file. | | font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style.<br>- **italic**: italic font style.|
| letter-spacing | \<length> | 0px | No | Character spacing (px). | | font-weight | number \| string | normal | No | Font weight. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a heavier font weight.<br>The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
| font-style | string | normal | No | Font style. Available values are as follows:<br>-**normal**: standard font style<br>-**italic**: italic font style<br/> | | text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| font-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.NOTE:The value must be an integer multiple of 100.The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**. | | text-align | string | start<br>| No | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.|
| text-decoration | 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.<br/> | | line-height | &lt;length&gt; | 0px | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. |
| text-align | string | start | No | Text alignment mode. Available values are as follows:<br/>-**left**: The text is left-aligned.<br/>-**center**: The text is center-aligned.<br/>-**right**: The text is right-aligned.<br/>-**start**: The text is aligned with the direction in which the text is written.<br/>-**end**: The text is aligned with the opposite direction in which the text is written.NOTE:If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container. | | text-overflow | string | clip | No | Takes effect when the maximum number of lines is specified. Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**.|
| line-height | \<length> | 0px | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. | | font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| text-overflow | string | clip | No | Takes effect when the maximum number of lines is specified. Available values are as follows:<br/>-**clip**: The text is clipped and displayed based on the size of the parent container.<br/>-**ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**. | | max-lines | number | - | No | Maximum number of lines in the text. |
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. | | min-font-size | &lt;length&gt; | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| max-lines | number | - | No | Maximum number of lines in the text. | | max-font-size | &lt;length&gt; | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| min-font-size | \<length> | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect. | | font-size-step | &lt;length&gt; | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. |
| max-font-size | \<length> | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect. | | prefer-font-sizes | &lt;array&gt; | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example: prefer-font-sizes: 12px,14px,16px|
| font-size-step | \<length> | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. |
| prefer-font-sizes | \<array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.Example values: **12px,14px,16px** |
## Events ## Events
Not supported Not supported
## Methods ## Methods
Not supported Not supported
## Example Code
``` ## Example
```html
<!--xxx.hml --> <!--xxx.hml -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
...@@ -71,10 +77,13 @@ Not supported ...@@ -71,10 +77,13 @@ Not supported
<input class="input" id="checkboxId" type="checkbox"></input> <input class="input" id="checkboxId" type="checkbox"></input>
</div> </div>
</div> </div>
```
```css
/*xxx.css */ /*xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
align-items: center; margin-left: 20px;
} }
.row { .row {
flex-direction: row; flex-direction: row;
...@@ -89,4 +98,4 @@ Not supported ...@@ -89,4 +98,4 @@ Not supported
} }
``` ```
![img](figures/en-us_image_0000001152834002.png) ![en-us_image_0000001152834002](figures/en-us_image_0000001152834002.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-piece.md
浏览文件 @ 47d9c930
# piece # piece
An entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients. > **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<piece>** component provides an entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
## Child Components ## Child Components
None Not supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Mandatory| Description |
| -------- | ------- | ---- | ------------------------------------------------------------ |
| content | string | Yes | Text content of the operational piece. |
| closable | boolean | No | Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.<br>Default value: **false**|
| icon | string | No | URL of the delete icon for the operational piece. The value can be a local path. |
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| content | string | - | Yes | Text content of the operational piece. |
| closable | boolean | false | No | Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event. |
| icon | string | - | No | URL of the delete icon for the operational piece. The value can be a local path. |
## 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.
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** By default, text and images are placed in the middle of the **\<piece>** component. > **NOTE**
>
> By default, text and images are placed in the middle of the **\<piece>** component.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. ## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| ----- | ---- | ----------------------------------- |
| close | - | Triggered when users click the delete icon of the operational piece. You can delete this component by using the **if** directive.|
| Name | Parameter | Description | ## Methods
| ----- | --------- | ------------------------------------------------------------ |
| close | - | Triggered when users click the delete icon of the operational piece. You can delete this component by using the **if** directive. |
## Method The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example ## Example
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container" > <div class="container" >
<piece if="{{first}}" content="example"></piece> <piece if="{{first}}" content="example"></piece>
<piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece> <piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -53,6 +62,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -53,6 +62,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -65,4 +77,4 @@ export default { ...@@ -65,4 +77,4 @@ export default {
} }
``` ```
![img](figures/11-5.gif) ![11-5](figures/11-5.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-qrcode.md
浏览文件 @ 47d9c930
# qrcode # qrcode
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<qrcode>** component is used to generate and display a QR code. The **\<qrcode>** component is used to generate and display a QR code.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Not supported Not supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | string | - | Yes | Content used to generate the QR code. |
| type | string | rect | No | QR code type. Available values are as follows:<br>- **rect**: rectangular QR code.<br>- **circle**: round QR code.|
| Name | Type | Default Value | Mandatory | Description |
| ----- | ------ | ------------- | --------- | ------------------------------------------------------------ |
| value | string | - | Yes | Content used to generate the QR code |
| type | string | rect | No | QR code type. Available values are as follows:<br/>-**rect**: rectangular QR code<br/>-**circle**: round QR code<br/> |
## 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; | \#000000 | No | Color of the QR code. |
| background-color | &lt;color&gt; | \#ffffff | No | Background color of the QR code.|
> **NOTE**
| Name | Type | Default Value | Mandatory | Description | > - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is centered.
| ---------------- | ------- | ------------- | --------- | ------------------------ | >
| color | \<color> | #000000 | No | QR code color | >
| background-color | \<color> | #ffffff | No | QR code background color | > - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length 200 px is used.
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
> >
> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed.
> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length is 200 px.
## 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.
## Methods ## Methods
Methods in [Universal Methods](js-components-common-methods.md) are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}" <qrcode value="{{qr_value}}" type="{{qr_type}}"
...@@ -63,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -63,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
<option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option> <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
</select> </select>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -79,6 +89,9 @@ select{ ...@@ -79,6 +89,9 @@ select{
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
} }
```
```js
/* index.js */ /* index.js */
export default { export default {
data: { data: {
...@@ -96,9 +109,6 @@ export default { ...@@ -96,9 +109,6 @@ export default {
this.qr_type = 'circle' this.qr_type = 'circle'
} }
}, },
setvalue(e) {
this.qr_value = e.newValue
},
setcol(e) { setcol(e) {
this.qr_col = e.newValue this.qr_col = e.newValue
}, },
...@@ -108,4 +118,4 @@ export default { ...@@ -108,4 +118,4 @@ export default {
} }
``` ```
![img](figures/12.gif) ![12](figures/12.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-span.md
浏览文件 @ 47d9c930
# span # span
The **\<span>** child component of **\<[text](js-components-basic-text.md)>** is used as a text modifier. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
As a child component of **[\<text>](../arkui-js/js-components-basic-text.md)**, the **\<span>** component is used as a text modifier.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
The **\<span>** child component is supported. Not 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.
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** The **focusable** and **disabled** attributes are not supported. > **NOTE**
>
> The **focusable** and **disabled** attributes are not supported.
## Styles
Only the following style attributes are supported. ## Styles
Only the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | - | No | Font color of the modified text. |
| font-size | &lt;length&gt; | 30px | No | Font size of the modified text. |
| allow-scale | boolean | true | No | Whether the font size of the modified text changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style | string | normal | No | Font style of the modified text. For details, see **font-style** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-weight | number \| string | normal | No | Font weight of the modified text. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| text-decoration | string | none | No | Text decoration of the modified text. For details, see **text-decoration** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| Name | Type | Default Value | Mandatory | Description |
| --------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
| color | \<color> | - | No | Font color of the modified text. |
| font-size | \<length> | 30px | No | Font size of the modified text. |
| allow-scale | boolean | true | No | Whether the font size of the modified text changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. |
| font-style | string | normal | No | Font style of the modified text. For details, see [font-style](js-components-basic-text.md) of the **text** component. |
| font-weight | number \| string | normal | No | Font weight of the modified text. For details, see [font-weight](js-components-basic-text.md) of the **text** component. |
| text-decoration | string | none | No | Text decoration of the modified text. For details, see [text-decoration](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 in the family or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
## Events ## Events
Only the click event in [Universal Events](js-components-common-events.md) is supported. Only the click event in [Universal Events](../arkui-js/js-components-common-events.md) is supported.
## Method
## Methods
Not supported Not supported
## Example Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
<span class="spanTxt">span</span> <span class="spanTxt">span</span>
</text> </text>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -67,4 +80,4 @@ Not supported ...@@ -67,4 +80,4 @@ Not supported
} }
``` ```
![img](figures/en-us_image_0000001152588626.png) ![en-us_image_0000001152588626](figures/en-us_image_0000001152588626.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-toggle.md
浏览文件 @ 47d9c930
# toggle # toggle
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<toggle>** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles. The **\<toggle>** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles.
## Required Permissions ## Required Permissions
None None
## Child Component
## Child Components
Not supported Not supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| ------- | ------- | ----- | ---- | ---------- |
| value | string | - | Yes | Text value of the toggle. |
| checked | boolean | false | No | Whether the toggle is selected.|
| Name | Type | Default Value | Mandatory | Description |
| ------- | ------- | ------------- | --------- | ------------------------------- |
| value | string | - | Yes | Text value of the toggle. |
| checked | boolean | false | No | Whether the toggle is selected. |
## 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; | \#E5000000 | No | Text color of the toggle. |
| font-size | &lt;length&gt; | 16px | No | Font size of the toggle. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style | string | normal | No | Font style of the toggle. |
| font-weight | number \| string | normal | No | Font weight of the toggle. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-family | &lt;string&gt; | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| Name | Type | Default Value | Mandatory | Description |
| ----------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
| text-color | \<color> | #E5000000 | No | Text color of the toggle. |
| font-size | \<length> | 16px | No | Font size of the toggle. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. |
| font-style | string | normal | No | Font style of the toggle. |
| font-weight | number \| string | normal | No | Font weight of the toggle. For details, see **font-weight** of the [text](js-components-basic-text.md) 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 font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
## Events ## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| ------ | ------------------------------- | -------------- |
| change | { checked: isChecked } | Triggered when the toggle is selected or unselected.|
| Name | Parameter | Description |
| ------ | ---------------------- | ---------------------------------------------------- |
| change | { checked: isChecked } | Triggered when the toggle is selected or unselected. |
## Methods ## Methods
Methods in [Universal Methods](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/js-components-common-methods.md) are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="flex-direction: column;"> <div style="flex-direction: column;">
<text class="margin">1. Multiple choice example</text> <text class="margin">1. Multiple choice example</text>
...@@ -65,41 +70,64 @@ Methods in [Universal Methods](https://gitee.com/openharmony/docs/blob/OpenHarmo ...@@ -65,41 +70,64 @@ Methods in [Universal Methods](https://gitee.com/openharmony/docs/blob/OpenHarmo
value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle> value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
</div> </div>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.margin { .margin {
margin: 7px; margin: 7px;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
toggle_list: [ toggle_list: [
{ "id":"1001", "name":"Living room", "checked":true }, {
{ "id":"1002", "name":"Bedroom", "checked":false }, "id": "1001", "name": "Living room", "checked": true
{ "id":"1003", "name":"Second bedroom", "checked":false }, },
{ "id":"1004", "name":"Kitchen", "checked":false }, {
{ "id":"1005", "name":"Study", "checked":false }, "id": "1002", "name": "Bedroom", "checked": false
{ "id":"1006", "name":"Garden", "checked":false }, },
{ "id":"1007", "name":"Bathroom", "checked":false }, {
{ "id":"1008", "name":"Balcony", "checked":false }, "id": "1003", "name": "Second bedroom", "checked": false
], },
toggles: ["Living room","Bedroom","Kitchen","Study"], {
idx: "" "id": "1004", "name": "Kitchen", "checked": false
}, },
allclick(arg) { {
this.idx = arg "id": "1005", "name": "Study", "checked": false
}, },
allchange(e) { {
if (e.checked === true) { "id": "1006", "name": "Garden", "checked": false
for (var i = 0; i < this.toggle_list.length; i++) { },
if (this.toggle_list[i].id === this.idx) { {
this.toggle_list[i].checked = true "id": "1007", "name": "Bathroom", "checked": false
} else { },
this.toggle_list[i].checked = false {
"id": "1008", "name": "Balcony", "checked": false
},
],
toggles: ["Living room", "Bedroom", "Kitchen", "Study"],
idx: ""
},
allclick(arg) {
this.idx = arg;
},
allchange(e) {
if (e.checked != true) {
return;
}
for (var i = 0; i < this.toggle_list.length; i++) {
if (this.toggle_list[i].id === this.idx) {
this.toggle_list[i].checked = true;
} else {
this.toggle_list[i].checked = false;
}
} }
}
} }
}
} }
``` ```
![img](figures/screenshot.png) ![screenshot](figures/screenshot.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
浏览文件 @ 47d9c930
# toolbar-item # toolbar-item
The **\<toolbar-item>** component is the child component of **\<toolbar>** to display an operation option on the toolbar. > **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
## Child Component As a child component of **[\<toolbar>](js-components-basic-toolbar.md)**, the **\<toolbar-item>** component is used to display an operation option on the toolbar.
None
## Attributes ## Child Components
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 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | string | - | Yes | Text content of the operation option. |
| icon | string | - | Yes | Icon image path, which is displayed on the option text. The value can be a local path. Supported image formats are PNG, JPG, and SVG.|
| Name | Type | Default Value | Mandatory | Description |
| ----- | ------ | ------------- | --------- | ------------------------------------------------------------ |
| value | string | - | Yes | Text content of the operation option. |
| icon | string | - | Yes | Icon image path, which is displayed on the option text. The value is a local path. Supported image formats are PNG, JPG, and SVG. |
## Styles ## Styles
Only the following style attributes are supported. Only the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| ------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- |
| Name | Type | Default Value | Mandatory | Description | | color | &lt;color&gt; | \#e6000000 | No | Font color. |
| ------------------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | | font-size | &lt;length&gt; | 16px | No | Font size. |
| color | \<color> | #e6000000 | No | Text color. | | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings. |
| font-size | \<length> | 16px | No | Text size. | | font-style | string | normal | No | Font style. Available values are as follows:<br> - **normal**: standard font style<br>- **italic**: italic font style|
| allow-scale | boolean | true | No | Whether the text size changes with the system's font size settings. | | font-weight | number\|string | normal | No | 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**. |
| font-style | string | normal | No | Text font style. Available values are as follows:<br/>-**normal**: standard font style<br/>-**italic**: italic font style | | text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| font-weight | number\|string | normal | No | 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**. | | font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| text-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. | | background | &lt;linear-gradient&gt; | - | No | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
| 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. | | background-color | &lt;color&gt; | - | No | Background color. |
| background | \<linear-gradient> | - | No | This attribute supports [Gradient Styles](js-components-common-gradient.md) only but is not compatible with **background-color** or **background-image**. | | background-image | string | - | No | Background image. Currently, this attribute is not compatible with **background-color** or **background**. Both online and local image resources are supported.|
| background-color | \<color> | - | No | Background color. | | background-size | - string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | auto | No | Background image size.<br>- The available values of the **string** type are as follows:<br> - **contain**: extends the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: retains the original aspect ratio of the image.<br>- Values of the **\<length>** type: The two values are width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- Values of the **\<percentage>** type: The two values are width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
| background-image | string | - | No | Background image. Currently, this attribute is not compatible with **background-color** or **background**. Both online and local image resources are supported. | | background-repeat | string | repeat | No | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along both the x-axis and y-axis.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
| background-size | <br/>-string<br/>-\<length> \<length><br/>-\<percentage> \<percentage> | auto | No | Background image size.<br/>-The **string** values are as follows:<br/> -**contain**: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.<br/> -**cover**: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.<br/> -**auto**: The original image width-height ratio is retained.<br/>-The two **\<length>** values are as follows:Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br/>-The two **\<percentage>** values are as follows:Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. | | background-position | - string string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | 0px 0px | No | Position of the background image.<br>- Values of the **string** type: If you set only one value, the other value is set to **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center in the horizontal or vertical direction.<br>- Values of the **\<length>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0 0 in px (**0px 0px**). If you only set one value, the other value is set to **50%**.<br>- Values of the **\<percentage>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0% 0%**. For the lower right corner, the value is **100% 100%**. If you only set one value, the other value is set to **50%**.<br>- Values of the **\<percentage>** type and **\<length>** type can be used together.|
| background-repeat | string | repeat | No | Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.<br/>-**repeat**: Repeatedly draws images along the x-axis and y-axis at the same time.<br/>-**repeat-x**: Repeatedly draws images along the x-axis.<br/>-**repeat-y**: Repeatedly draws images along the y-axis.<br/>-**no-repeat**: The image is not drawn repeatedly. | | opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| background-position | string string\<length> \<length>\<percentage> \<percentage> | 0px 0px | No | <br/>-Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br/> -**left**: leftmost in the horizontal direction<br/> -**right**: rightmost in the horizontal direction<br/> -**top**: top in the vertical direction<br/> -**bottom**: bottom in the vertical direction<br/> -**center**: center position<br/>-Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0 0** indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is **50%**.<br/>-Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br/>-Using both **\<percentage>** and **\<length>**. | | display | string | flex | No | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| 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. | | visibility | string | visible | No | Whether to display the box containing an element. A hidden box still occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The box is visible.<br>- **hidden**: The box is hidden but still takes up space.<br>If both **visibility** and **display** are set, only **display** takes effect.|
| display | string | flex | No | Type of the box containing an element. Available values are as follows:<br/>-**flex**: flexible layout<br/>-**none**: The box is disabled. |
| visibility | string | visible | No | Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br/>-**visible**: The box is visible.<br/>-**hidden**: The box is hidden but still takes up space.<br/>NOTE:<br/>If both **visibility** and **display** are set, only **display** takes effect. |
## Events ## Events
Events in [Universal Events](js-components-common-events.md) are supported. The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Method ## Methods
Not supported Not supported
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<toolbar style="position: fixed; bottom: 0px; "> <toolbar style="position : fixed; bottom : 0px;">
<toolbar-item icon='common/Icon/location.png' value='Option 1' > </toolbar-item> <toolbar-item icon='common/Icon/location.png' value='Option 1'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 2'> </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 2'></toolbar-item>
<toolbar-item icon='common/Icon/diamond.png' value='Option 3' > </toolbar-item> <toolbar-item icon='common/Icon/diamond.png' value='Option 3'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 4' > </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 4'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 5' > </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 5'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 6'> </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 6'></toolbar-item>
</toolbar> </toolbar>
``` ```
![img](figures/progress-7.jpg) ![progress-7](figures/progress-7.jpg)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
浏览文件 @ 47d9c930
# canvas # canvas
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<canvas>** component is used for customizing drawings. The **\<canvas>** component is used for customizing drawings.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Not supported Not supported
## Attributes ## Attributes
Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
## Styles ## Styles
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.
## 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.
### getContext ### getContext
getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext getContext(type: '2d', options?: ContextAttrOptions): CanvasRenderingContext2D
Obtains the canvas drawing context. This API cannot be called in **onInit** or **onReady**. Obtains the canvas drawing context. This API cannot be called in **onInit** or **onReady**.
- Parameters **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ---------------------------------------------------- | --------- | ------------------------------------------------------------ | | -------------------- | ------------------ | ---- | ---------------------------------------- |
| type | string | Yes | The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component. | | type | string | Yes | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.|
| options6+ | [ContextAttrOptions](js-components-canvas-canvas.md) | No | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. | | options<sup>6+</sup> | ContextAttrOptions | No | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. |
**Table 1** ContextAttrOptions **Table 1** ContextAttrOptions
| Name | Type | Description |
| --------- | ------- | ------------------- |
| antialias | boolean | Whether to enable anti-aliasing. The default value is **false**.|
| Name | Type | Description | **Return value**
| --------- | ------- | ------------------------------------------------------------ |
| antialias | boolean | Whether to enable anti-aliasing. The default value is **false**. |
- Return values | Type | Description |
| ---------------------------------------- | -------------------- |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component.|
### toDataURL<sup>6+</sup>
| Type | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component. |
### toDataURL6+
toDataURL(type?: string, quality?: number): string toDataURL(type?: string, quality?: number): string
Generates a URL containing image display information. Generates a URL containing image display information.
- Parameters **Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------ | --------- | ------------------------------------------------------------ |
| type | string | No | Image format. The default value is **image/png**. |
| quality | number | No | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used. |
- Return values | Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ---------------------------------------- |
| type | string | No | Image format. The default value is **image/png**. |
| quality | number | No | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|
**Return value**
| Type | Description | | Type | Description |
| ------ | ----------- | | ------ | --------- |
| string | Image URL. | | string | Image URL.|
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div> </div>
```
```js
// xxx.js // xxx.js
export default { export default {
handleClick() { handleClick() {
...@@ -97,4 +100,4 @@ export default { ...@@ -97,4 +100,4 @@ export default {
// "data:image/png;base64,xxxxxxxx..." // "data:image/png;base64,xxxxxxxx..."
} }
} }
``` ```
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ 47d9c930
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ------- | ------ | ---- | ---------------------------------------- | | ------- | ------ | ---- | ---------------------------------------- |
| shareid | string | - | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements. | | shareid | string | - | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements.|
### Styles ### Styles
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| --------------------------------- | ------ | -------- | ---------------------------------------- | | --------------------------------- | ------ | -------- | ---------------------------------------- |
| shared-transition-effect | string | exchange | Entry style of a shared element during transition.<br>-&nbsp;**exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>-&nbsp;**static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.| | shared-transition-effect | string | exchange | Entry style of a shared element during transition.<br>- **exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>- **static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.|
| shared-transition-name | string | - | During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by **@keyframes** supporting transform and opacity animations. If the effect of shared elements conflicts with the custom animation, the latter is used.| | shared-transition-name | string | - | During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by **@keyframes** supporting transform and opacity animations. If the effect of shared elements conflicts with the custom animation, the latter is used.|
| shared-transition-timing-function | string | friction | During the transition, the style configured on the target page takes effect preferentially. This style defines the difference curve during the transition of shared elements. If it is not configured, the friction curve is used.| | shared-transition-timing-function | string | friction | During the transition, the style configured on the target page takes effect preferentially. This style defines the difference curve during the transition of shared elements. If it is not configured, the friction curve is used.|
...@@ -52,7 +52,7 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is ...@@ -52,7 +52,7 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is
<image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image> <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
</list-item> </list-item>
<list-item> <list-item>
<text onclick="jump">Click on picture to Jump to the details</text> <text onclick="jump">Click on picture to jump to the details</text>
</list-item> </list-item>
</list> </list>
</div> </div>
...@@ -60,12 +60,12 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is ...@@ -60,12 +60,12 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is
```js ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
jump() { jump() {
router.push({ router.push({
// The path must be the same as that in the config.json file. // The path must be the same as that in the config.json file.
uri: 'pages/detailpage', url: 'pages/detailpage',
}); });
}, },
} }
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
```js ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
jumpBack() { jumpBack() {
router.back(); router.back();
...@@ -117,7 +117,6 @@ export default { ...@@ -117,7 +117,6 @@ export default {
## Widget Transition ## Widget Transition
> **NOTE** > **NOTE**
>
> Widget transitions are not available when other transitions (including shared element transitions and custom transitions) are used. > Widget transitions are not available when other transitions (including shared element transitions and custom transitions) are used.
...@@ -125,7 +124,7 @@ export default { ...@@ -125,7 +124,7 @@ export default {
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ----------------- | ------ | ---- | ---------------------------------------- | | ----------------- | ------ | ---- | ---------------------------------------- |
| transition-effect | string | - | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>-&nbsp;**unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>-&nbsp;**none**: No transition effect is displayed. | | transition-effect | string | - | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>- **unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>- **none**: No transition effect is displayed.|
### Example ### Example
...@@ -140,7 +139,7 @@ The **source_page** has a title area on the top and a widget list. Users can tap ...@@ -140,7 +139,7 @@ The **source_page** has a title area on the top and a widget list. Users can tap
<text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text> <text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
</div> </div>
<list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center"> <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
<list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.uri}})"> <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.url}})">
<text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text> <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
</list-item> </list-item>
</list> </list>
...@@ -149,19 +148,19 @@ The **source_page** has a title area on the top and a widget list. Users can tap ...@@ -149,19 +148,19 @@ The **source_page** has a title area on the top and a widget list. Users can tap
```js ```js
// xxx.js // xxx.js
import router from '@system.router' import router from '@ohos.router'
export default { export default {
data: { list: [] }, data: { list: [] },
onInit() { onInit() {
for(var i = 0; i < 10; i++) { for(var i = 0; i < 10; i++) {
var item = { uri: "pages/card_transition/target_page/index", var item = { url: "pages/card_transition/target_page/index",
title: "this is title" + i, id: "item_" + i } title: "this is title" + i, id: "item_" + i }
this.list.push(item); this.list.push(item);
} }
}, },
jumpPage(id, uri) { jumpPage(id, url) {
var cardId = this.$element(id).ref; var cardId = this.$element(id).ref;
router.push({ uri: uri, params : { ref : cardId } }); router.push({ url: url, params : { ref : cardId } });
} }
} }
``` ```
...@@ -169,6 +168,8 @@ export default { ...@@ -169,6 +168,8 @@ export default {
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #ABDAFF; background-color: #ABDAFF;
...@@ -199,6 +200,8 @@ export default { ...@@ -199,6 +200,8 @@ export default {
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #EBFFD7; background-color: #EBFFD7;
...@@ -223,7 +226,7 @@ export default { ...@@ -223,7 +226,7 @@ export default {
| -------------------------- | ------ | ------------- | ---------------------------------------- | | -------------------------- | ------ | ------------- | ---------------------------------------- |
| transition-enter | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).| | transition-enter | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
| transition-exit | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).| | transition-exit | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
| transition-duration | string | Follows the default page transition time of the device | The unit can be s or ms. The default unit is ms. If no value is specified, the default value is used. | | transition-duration | string | Follows the default page transition time of the device| The unit can be s|or ms. The default unit is ms. If no value is specified, the default value is used.|
| transition-timing-function | string | friction | Speed curve of the transition animation, which makes the animation more fluent. For details, see the description of **animation-timing-function **in [Animation Styles](../arkui-js/js-components-common-animation.md).| | transition-timing-function | string | friction | Speed curve of the transition animation, which makes the animation more fluent. For details, see the description of **animation-timing-function **in [Animation Styles](../arkui-js/js-components-common-animation.md).|
...@@ -255,16 +258,16 @@ export default { ...@@ -255,16 +258,16 @@ export default {
</div> </div>
``` ```
```css ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
data: { data: {
}, },
jump() { jump() {
router.push({ router.push({
uri:'pages/transition2/transition2' url:'pages/transition2/transition2'
}) })
} }
} }
...@@ -288,13 +291,13 @@ export default { ...@@ -288,13 +291,13 @@ export default {
transition-duration: 5s; transition-duration: 5s;
transition-timing-function: friction; transition-timing-function: friction;
} }
@keyframes go_page { @keyframes go_page {
from { from {
opacity: 0; opacity: 0;
transform: translate(0px) rotate(60deg) scale(1.0); transform: translate(0px) rotate(60deg) scale(1.0);
} }
to { to {
opacity: 1; opacity: 1;
transform: translate(100px) rotate(360deg) scale(1.0); transform: translate(100px) rotate(360deg) scale(1.0);
...@@ -305,7 +308,7 @@ export default { ...@@ -305,7 +308,7 @@ export default {
opacity: 1; opacity: 1;
transform: translate(200px) rotate(60deg) scale(2); transform: translate(200px) rotate(60deg) scale(2);
} }
to { to {
opacity: 0; opacity: 0;
transform: translate(200px) rotate(360deg) scale(2); transform: translate(200px) rotate(360deg) scale(2);
...@@ -321,15 +324,15 @@ export default { ...@@ -321,15 +324,15 @@ export default {
<div class="container"> <div class="container">
<text>transition</text> <text>transition</text>
<div class="move_page" onclick="jumpBack"></div> <div class="move_page" onclick="jumpBack"></div>
</div </div>
``` ```
```js ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
data: { data: {
}, },
jumpBack() { jumpBack() {
router.back() router.back()
...@@ -346,7 +349,7 @@ export default { ...@@ -346,7 +349,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.move_page { .move_page {
width: 100px; width: 100px;
height: 100px; height: 100px;
...@@ -356,7 +359,7 @@ export default { ...@@ -356,7 +359,7 @@ export default {
transition-duration: 5s; transition-duration: 5s;
transition-timing-function: ease; transition-timing-function: ease;
} }
@keyframes go_page { @keyframes go_page {
from { from {
opacity: 0; opacity: 0;
...@@ -367,7 +370,7 @@ export default { ...@@ -367,7 +370,7 @@ export default {
transform:translate(100px) rotate(180deg) scale(2.0); transform:translate(100px) rotate(180deg) scale(2.0);
} }
} }
@keyframes exit_page { @keyframes exit_page {
from { from {
opacity: 1; opacity: 1;
......
en/application-dev/reference/arkui-js/js-components-container-list.md
浏览文件 @ 47d9c930
# list # list
The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
## Required Permissions ## Required Permissions
N/A None
## Child Components ## Child Components
\<[list-item](js-components-container-list-item-group.md)> and \<[list-item-group](js-components-container-list-item.md)> The **[\<list-item-group>](../arkui-js/js-components-container-list-item-group.md)** and **[\<list-item>](../arkui-js/js-components-container-list-item.md)** components are supported.
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| --------------------------- | ---------------------------------------- | ------- | ---- | ---------------------------------------- |
| scrollpage | boolean | false | No | Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be **true** (scrolls the non-list part out) or **false** (does not scroll the non-list part out). This attribute is not available when the direction is **row**.|
| cachedcount | number | 0 | No | Minimum number of cached list items when a long list is loaded with delay.<br>When the number of list items cached outside the visible area is less than the value of this attribute, a **requestitem** event is triggered.|
| scrollbar | string | off | No | Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.)<br>- **off**: no display.<br>- **auto**: displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.).<br>- **on**: always displayed.|
| scrolleffect | string | spring | No | Scroll effect. Available values are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.<br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **no**: No effect after the scrollbar is moved to the edge.|
| indexer | boolean \| Array&lt;string&gt; | false | No | Whether to display the alphabetical index bar on the sidebar. If this attribute is set to **true** or a customized indexer, the index bar is displayed at the right boundary of the list. Example:<br>**"indexer" : "true"** indicates the default alphabetical indexer.<br>**"indexer" : "false"** indicates no indexer.<br>"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include **"#"** when using a customized indexer.<br>This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.<br>This attribute must be used together with the **[section](../arkui-js/js-components-container-list-item.md#attributes)** attribute of **\<list-item>**.|
| indexercircle<sup>5+</sup> | boolean | - | No | Whether to use a circle indexer.<br>The default value is **true** for wearables and **false** for other device types. This attribute is invalid if **indexer** is set to **false**.|
| indexermulti<sup>5+</sup> | boolean | false | No | Whether to use a multi-language indexer.<br>This attribute is invalid if **indexer** is set to **false**. |
| indexerbubble<sup>5+</sup> | boolean | true | No | Whether to display the bubble effect when switching among indexes.<br>This attribute is invalid if **indexer** is set to **false**. |
| divider<sup>5+</sup> | boolean | false | No | Whether list items are separated by dividers.<br>For details about divider styles, see **divider-color**, **divider-height**, **divider-length**, and **divider-origin** in the **Styles** table.|
| shapemode | string | default | No | Shape of the side scrollbar.<br>- **default**: not specified (following the theme).<br>- **rect**: rectangle.<br>- **round**: circle.|
| updateeffect | boolean | false | No | Whether a dynamic effect is displayed when an item in the list is deleted or added.<br>- **false**: No dynamic effect is displayed.<br>- **true**: A dynamic effect is displayed when an item is added or deleted.|
| chainanimation<sup>5+</sup> | boolean | false | No | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>- **false**: Chained animations are displayed.<br>- **true**: No chained animation is displayed.<br>Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>This attribute does not take effect if an indexer is used.<br>If this attribute is **true**, the **sticky** attributes set for **\<list-item>** components do not take effect.|
| initialindex | number | 0 | No | Item displayed at the start position of the viewport when the current list is loaded for the first time. The default value is **0**, indicating that the first item is displayed. If the number you set is greater than the index of the last item, the setting does not take effect. When the **initialoffset** attribute is set, this attribute does not take effect. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**.|
| initialoffset | &lt;length&gt; | 0 | No | Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**.|
| selected<sup>5+</sup> | string | - | No | Selected item in the current list. The value can be a **section** value of any list items.|
| Name | Type | Default Value | Mandatory | Description |
| ---------------- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ |
| scrollpage | boolean | false | No | Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be **true** (scrolls the non-list part out) or **false** (does not scroll the non-list part out). This attribute is not available when the direction is **row**. |
| cachedcount | number | 0 | No | Minimum number of cached list items when the long list is loaded with delay.When the number of list items cached outside the visible area is less than the value of this attribute, a **requestitem** event is triggered. |
| scrollbar | string | off | No | Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.) <br>- **off**: No display <br>- **auto**: Displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.) <br>- **on**: Always displayed |
| scrolleffect | string | spring | No | Scroll effect. Available values are as follows: <br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. <br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance. <br>- **no**: No effect after the scrollbar is moved to the edge. |
| indexer | boolean \| Array\<string> | false | No | Whether to display the alphabetical index bar on the sidebar. If this attribute is set to **true** or a customized indexer, the index bar is displayed at the right boundary of the list. Example:<br>**"indexer" : "true"** indicates the default alphabetical indexer.<br>**"indexer" : "false"** indicates no indexer.<br>"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include **"#"** when using a customized indexer.<br>NOTE:<br>- This attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.<br>- This attribute must be used together with the [section](js-components-container-list-item.md#section2907183951110) attribute of **\<list-item>**. |
| indexercircle<sup>5+</sup> | boolean | - | No | Whether to use a circle indexer.<br>The default value is **true** for wearables and **false** for other device types. This attribute is invalid if **indexer** is set to **false**. |
| indexermulti<sup>5+</sup> | boolean | false | No | Whether to use a multi-language indexer.<br>This attribute is invalid if **indexer** is set to **false**. |
| indexerbubble<sup>5+</sup> | boolean | true | No | Whether to display the bubble effect when switching among indexes.<br>This attribute is invalid if **indexer** is set to **false**. |
| divider<sup>5+</sup> | boolean | false | No | Whether list items are separated by dividers.<br>For details about divider styles, see **divider-color**, **divider-height**, **divider-length**, and **divider-origin** in the [Styles](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/en/application-dev/nottoctopics/en-us_topic_0000001131154746.md#section1071433432218) table. |
| shapemode | string | default | No | Shape of the side scrollbar. <br>- **default**: not specified (following the theme) <br>- **rect**: rectangle <br>- **round**: circle |
| updateeffect | boolean | false | No | Whether a dynamic effect is displayed when an item in the list is deleted or added. <br>- **false**: No dynamic effect is displayed. <br>- **true**: A dynamic effect is displayed when an item is added or deleted. |
| chainanimation<sup>5+</sup> | boolean | false | No | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics. <br>- **false**: Chained animations are displayed. <br>- **true**: No chained animation is displayed.<br>NOTE:<br> - Dynamic modification is not supported.<br> - This attribute does not take effect if an indexer is used.<br> - If this attribute is **true**, the **sticky** attributes set for **\<list-item>** components do not take effect. |
| initialindex | number | 0 | No | Item to be displayed at the start position of the viewport when the current list is loaded for the first time. The default value is **0**, indicating that the first item is displayed.<br> The setting does not take effect in any of the following cases:<br>- The value you set is greater than the index of the last item.<br>- The **initialoffset** attribute is set. <br>- **indexer** or **scrollpage** is set to **true**. |
| initialoffset | \<length> | 0 | No | Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**. |
| selected<sup>5+</sup> | string | - | No | Selected item in the current list. The value can be a **section** value of any list items. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
| divider-color<sup>5+</sup> | &lt;color&gt; | transparent | No | Item divider color. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-height<sup>5+</sup> | &lt;length&gt; | 1 | No | Item divider height. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-length<sup>5+</sup> | &lt;length&gt; | Main axis width | No | Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the **divider-origin** parameter. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
| divider-origin<sup>5+</sup> | &lt;length&gt; | 0 | No | Item divider offset relative to the start point of the main axis. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
| flex-direction | string | column | No | Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: The y-axis is the main axis.<br>- **row**: The x-axis is the main axis.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**.|
| columns | number | 1 | No | Number of columns displayed in the cross axis direction of the list. The default value is **1**.<br>When multiple columns are set, the columns are evenly distributed on the cross axis of the **\<list>** component. The size of each column is the same.|
| align-items | string | stretch | No | Alignment of items in each column on the cross axis. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>This style takes effect only on items of each column. Columns are evenly distributed.|
| item-extent | &lt;length&gt; \| &lt;percentage&gt; | - | No | Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint.|
| fade-color | &lt;color&gt; | grey | No | Color of the physical dynamic effect. This attribute is valid only when **scrolleffect** is set to **fade**. |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the scrollbar. |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | No | Width of the scrollbar. |
| scrollbar-offset<sup>6+</sup> | &lt;length&gt; | 0 | No | Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped.|
| Name | Type | Default Value | Mandatory | Description |
| ------------------ | ------------------------ | ------------------- | --------- | ------------------------------------------------------------ |
| divider-color<sup>5+</sup> | \<color> | transparent | No | Item divider color. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-height<sup>5+</sup> | \<length> | 1 | No | Item divider height. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-length<sup>5+</sup> | \<length> | The main axis width | No | Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the **divider-origin** parameter. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| divider-origin<sup>5+</sup> | \<length> | 0 | No | Item divider offset relative to the start point of the main axis. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
| flex-direction | string | column | No | Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: The y-axis is the maim axis.<br>- **row**: The x-axis is the main axis.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**. |
| columns | number | 1 | No | Number of columns displayed in the cross axis direction of the list. The default value is **1**.<br>NOTE:<br>When multiple columns are set, the columns are evenly distributed on the cross axis of the **\<list>** component. The size of each column is the same. |
| align-items | string | stretch | No | Alignment of items in each column on the cross axis. Available values are as follows: <br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction. <br>- **flex-start**: Items are aligned to the start of the cross axis. <br>- **flex-end**: Items are aligned to the end of the cross axis. <br>- **center**: Items are aligned in the middle of the cross axis.NOTE:This style takes effect only on items of each column. Columns are evenly distributed. |
| item-extent | \<length> \| \<percentage> | - | No | Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint. |
| fade-color | \<color> | grey | No | Color of the physical dynamic effect. This attribute is valid only when **scrolleffect** is set to **fade**. |
| scrollbar-color<sup>6+</sup> | \<color> | - | No | Color of the scrollbar. |
| scrollbar-width<sup>6+</sup> | \<length> | - | No | Width of the scrollbar. |
| scrollbar-offset<sup>6+</sup> | \<length> | 0 | No | Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped. |
## Events ## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| -------------------------- | ---------------------------------------- | ---------------------------------------- |
| indexerchange<sup>5+</sup> | { local: booleanValue } | Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both **indexer** and **indexermulti** are set to **true**. The values of **booleanValue** can be:<br>- **true**: The local index is displayed.<br>- **false**: The alphabetic index is displayed.|
| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | Triggered to indicate the offset and status of list scrolling.<br>**stateValue: 0**: The list is not scrolling.<br>**stateValue: 1**: The list is scrolling along with user's touches.<br>**stateValue: 2**: The list is scrolling after the touches stop.|
| scrollbottom | - | Triggered when the list is scrolled to the bottom. |
| scrolltop | - | Triggered when the list is scrolled to the top. |
| scrollend | - | Triggered when the list stops scrolling. |
| scrolltouchup | - | Triggered when the list continues scrolling after the user lifts their fingers. |
| requestitem | - | Triggered for a request to create a list-item.<br>This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay.|
| rotate<sup>7+</sup> | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. |
| Name | Parameter | Description |
| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| indexerchange<sup>5+</sup> | { local: booleanValue } | Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both **indexer** and **indexermulti** are set to **true**. The value of **booleanValue** can be: <br>- **true**: The local index is displayed. <br>- **false**: The alphabetic index is displayed. |
| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | Triggered to indicate the offset and status of list scrolling. <br>- **stateValue: 0**: The list is not scrolling.<br>- **stateValue: 1**: The list is scrolling along with user's touches. <br>- **stateValue: 2**: The list is scrolling after the touches stop. |
| scrollbottom | - | Triggered when the list is scrolled to the bottom. |
| scrolltop | - | Triggered when the list is scrolled to the top. |
| scrollend | - | Triggered when the list stops scrolling. |
| scrolltouchup | - | Triggered when the list continues scrolling after the user lifts their fingers. |
| requestitem | - | Triggered for a request to create a list-item.This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay. |
| rotate<sup>7+</sup> | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. |
## Methods ## Methods
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name | Parameter | Description |
| ------------- | ---------------------------------------- | ---------------------------------------- |
| Name | Parameter | Description | | scrollTo | { index: number(specified position) } | Scrolls the list to the position of the item at the specified index. |
| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | scrollTop | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the top.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the top.|
| scrollTo | { index: number(specified position) } | Scrolls the list to the position of the item at the specified index. | | scrollBottom | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the bottom.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the bottom.|
| scrollBy | [ScrollParam](js-components-container-list.md#t54327f53ea104788bc430b9047ecb47b) | Scrolls the list for a certain distance.<br>This method applies only to smart TVs. | | scrollPage | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.<br>If **reverse** is set to **true**, the previous page is displayed. If there is no previous page, the list scrolls to the top.<br>If **smooth** is set to **false** (default value), the list is directly scrolled to another page.<br>If **smooth** is set to **true**, the list is smoothly scrolled to another page.|
| scrollTop | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the top.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the top. | | scrollArrow | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.<br>If **reverse** is set to **true**, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.<br>If **smooth** is set to **false** (default value), the list is directly scrolled.<br>If **smooth** is set to **true**, the list is smoothly scrolled.|
| scrollBottom | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the bottom.<br/>If **smooth** is set to **true**, the list is smoothly scrolled to the bottom. | | collapseGroup | { groupid: string } | Collapses a group.<br>**groupid**: ID of the group to collapse.<br>All groups are collapsed when **groupid** is not specified.|
| scrollPage | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the next page is displayed.If there is no next page, the list scrolls to the bottom.<br/>If **reverse** is set to **true**, the previous page is displayed. If there is no previous page, the list scrolls to the top.<br/>If **smooth** is set to **false** (default value), the list is directly scrolled to another page.<br/>If **smooth** is set to **true**, the list is smoothly scrolled to another page. | | expandGroup | { groupid: string } | Expands a group.<br>**groupid**: ID of the group to expand.<br>All groups are expanded when **groupid** is not specified.|
| scrollArrow | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.<br/>If **reverse** is set to **true**, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.<br/>If **smooth** is set to **false** (default value), the list is directly scrolled.<br/>If **smooth** is set to **true**, the list is smoothly scrolled. | | currentOffset | - | Returns the offset of the current scrolling. The return value type is Object. For details, see **currentOffset**.|
| collapseGroup | { groupid: string } | Collapses a group.<br/>**groupid**: ID of the group to collapse.<br/>All groups are collapsed when **groupid** is not specified. |
| expandGroup | { groupid: string } | Expands a group.<br/>**groupid**: ID of the group to expand.<br/>All groups are expanded when **groupid** is not specified. | **Table 1** currentOffset
| currentOffset | - | Returns the offset of the current scrolling. The return value type is **Object**. For details, see [Table 2](js-components-container-list.md). |
| Name | Type | Remarks |
**Table 1** ScrollParam | ---- | ------ | ---------------- |
| x | number | Scrolling offset in the x-axis, in px|
| y | number | Scrolling offset in the y-axis, in px|
| Name | Type | Mandatory | Default Value | Remarks | ## Example
| ------ | ------- | --------- | ------------- | ------------------------------------------------------------ |
| dx | number | No | 0 | Offset for scrolling the list in the horizontal direction, in px. | ```html
| dy | number | No | 0 | Offset for scrolling the list in the vertical direction, in px. | <!-- index.hml -->
| smooth | boolean | No | true | Whether a sliding animation is displayed when the list position is changed. | <div class="container">
<list class="todo-wrapper">
**Table 2** Attributes of the currentOffset return object <list-item for="{{todolist}}" class="todo-item">
<div style="flex-direction: column;align-items: center;justify-content: center;">
<text class="todo-title">{{$item.title}}</text>
<text class="todo-title">{{$item.date}}</text>
| Name | Type | Remarks | </div>
| ---- | ------ | ------------------------------------- | </list-item>
| x | number | Scrolling offset in the x-axis, in px | </list>
| y | number | Scrolling offset in the y-axis, in px | </div>
\ No newline at end of file ```
```css
/* index.css */
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.todo-wrapper {
width: 100%;
height: 300px;
}
.todo-item {
width: 100%;
height: 120px;
justify-content:center;
}
.todo-title {
width: 100%;
height: 80px;
text-align: center;
}
```
```js
// index.js
export default {
data: {
todolist: [{
title: 'Prepare for the interview',
date: '2021-12-31 10:00:00'
}, {
title: 'Watch the movie',
date: '2021-12-31 20:00:00'
}],
},
}
```
![en-us_image_0000001185033226](figures/en-us_image_0000001185033226.png)
en/application-dev/reference/arkui-js/js-components-container-swiper.md
浏览文件 @ 47d9c930
# swiper # swiper
The **\<swiper>** component provides a container that allows users to switch among child components by swiping operations. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
All child components except **\<list>** are 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 |
| ------------------------------ | ------- | ------ | ---- | ---------------------------------------- |
| index | number | 0 | No | Index of the child component currently displayed in the container. |
| autoplay | boolean | false | No | Whether to enable autoplay for child component switching. If this attribute is **true**, the indicator does not take effect<sup>5+</sup>. |
| interval | number | 3000 | No | Autoplay interval, in milliseconds, when autoplay is enabled. |
| indicator | boolean | true | No | Whether to enable the indicator. The default value is **true**. |
| digital<sup>5+</sup> | boolean | false | No | Whether to enable the digital indicator. The default value is **false**.<br>The digital indicator takes effect only when **indicator** is set to **true**.|
| indicatordisabled<sup>5+</sup> | boolean | false | No | Whether gesture operations are disabled on the indicator. If this attribute is set to **true**, the indicator does not respond to clicking or dragging operations. |
| loop | boolean | true | No | Whether to enable looping. |
| duration | number | - | No | Duration of the autoplay for child component switching. |
| vertical | boolean | false | No | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator. |
| cachedsize<sup>7+</sup> | number | -1 | No | Minimum number of cached items during delayed loading of the **\<swiper>** component. The value **-1** indicates that all content is cached. |
| scrolleffect<sup>7+</sup> | string | spring | No | Scroll effect. The options 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.<br>This attribute is valid only when **loop** is set to **false**.|
| Name | Type | Default Value | Mandatory | Description |
| ------------------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| index | number | 0 | No | Index of a child component currently displayed in the container. |
| autoplay | boolean | false | No | Whether to enable autoplay for child component switching. If this attribute is **true**, the indicator does not take effect<sup>5+</sup>. |
| interval | number | 3000 | No | Autoplay interval, in milliseconds, when autoplay is enabled. |
| indicator | boolean | true | No | Whether to enable the indicator. The default value is **true**. |
| digital<sup>5+</sup> | boolean | false | No | Whether to enable the digital indicator. The default value is **false**.<br>NOTE:<br>The digital indicator takes effect only when **indicator** is set to **true**. |
| indicatordisabled<sup>5+</sup> | boolean | false | No | Whether gesture operations are disabled on the indicator. If this attribute is set to **true**, the indicator does not respond to clicking or dragging operations. |
| loop | boolean | true | No | Whether to enable looping. |
| duration | number | - | No | Duration of the autoplay for child component switching. |
| vertical | boolean | false | No | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator. |
| cachedsize<sup>7+</sup> | number | -1 | No | Minimum number of cached items during delayed loading of the **\<swiper>** component. The value **-1** indicates that all content is cached. |
| scrolleffect<sup>7+</sup> | string | spring | No | Scroll effect. The options 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.NOTE:This attribute is valid only when **loop** is set to **false**. |
## 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 |
| ---------------------------------- | ---------------------------------------- | ---------- | ---- | -------------------- |
| indicator-color | &lt;color&gt; | - | No | Fill color of the indicator. |
| indicator-selected-color | &lt;color&gt; | \#ff007dff | No | Color of the currently selected indicator. |
| indicator-size | &lt;length&gt; | 4px | No | Diameter of the indicator. |
| indicator-top\|left\|right\|bottom | &lt;length&gt; \| &lt;percentage&gt; | - | No | Relative position of the indicator in the swiper.|
| next-margin<sup>7+</sup> | &lt;length&gt; \| &lt;percentage&gt; | - | No | Next margin, used to reveal a small part of the next item. |
| previous-margin<sup>7+</sup> | &lt;length&gt; \| &lt;percentage&gt; | - | No | Previous margin, used to reveal a small part of the previous item. |
| Name | Type | Default Value | Mandatory | Description |
| ---------------------------------- | -------------------------- | ------------- | --------- | ------------------------------------------------------------ |
| indicator-color | \<color> | - | No | Fill color of the navigation point indicator. |
| indicator-selected-color | \<color> | #ff007dff | No | Color of the currently selected navigation point indicator. |
| indicator-size | \<length> | 4px | No | Diameter of the navigation point indicator. |
| indicator-top\|left\|right\|bottom | \<length> \| \<percentage> | - | No | Relative position of the indicator in the swiper. |
| next-margin<sup>7+</sup> | \<length> \| \<percentage> | - | No | Next margin, used to reveal a small part of the next item. |
| previous-margin<sup>7+</sup> | \<length> \| \<percentage> | - | No | Previous margin, used to reveal a small part of the previous item. |
## Events ## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description | | Name | Parameter | Description |
| ----------------- | ------------------------ | ------------------------------------------------------------ | | ---------------------------- | --------------------------------------- | ------------------ |
| change | { index: currentIndex } | Triggered when the index of the currently displayed component changes. | | change | { index: currentIndex } | Triggered when the index of the currently displayed component changes.|
| rotation | { value: rotationValue } | Triggered when the crown of the wearable rotates. | | rotation | { value: rotationValue } | Triggered when the crown of the wearable rotates. |
| animationfinish<sup>7+</sup> | - | Triggered when the animation is finished. | | animationfinish<sup>7+</sup> | - | Triggered when the animation is finished. |
## 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 |
| ------------ | -------------------------------------- | --------------- |
| swipeTo | { index: number(specificLocation) } | Scrolls the child component to the position at the specified index.|
| showNext | - | Shows the next child component. |
| showPrevious | - | Shows the previous child component. |
| Name | Parameter | Description |
| ------------ | ------------------------------------- | ------------------------------------------------------------ |
| swipeTo | { index: number(specified position) } | Scrolls the child component to the position at the specified index. |
| showNext | None | Shows the next child component. |
| showPrevious | None | Shows the previous child component. |
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1" <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1"
...@@ -90,6 +91,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -90,6 +91,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
<input class="button" type="button" value="showNext" onclick="showNext"></input> <input class="button" type="button" value="showNext" onclick="showNext"></input>
<input class="button" type="button" value="showPrevious" onclick="showPrevious"></input> <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -134,6 +138,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m ...@@ -134,6 +138,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
.text { .text {
font-size: 40px; font-size: 40px;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
swipeTo() { swipeTo() {
...@@ -148,4 +155,4 @@ export default { ...@@ -148,4 +155,4 @@ export default {
} }
``` ```
![img](figures/4-0.gif) ![4-0](figures/4-0.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-media-video.md
浏览文件 @ 47d9c930
...@@ -3,17 +3,7 @@ ...@@ -3,17 +3,7 @@
> **NOTE** > **NOTE**
> >
> - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
>
> - Set **configChanges** under **abilities** in the **config.json** file to **orientation**.
> ```
> "abilities": [
> {
> "configChanges": ["orientation"],
> ...
> }
> ]
> ```
The **\<video>** component provides a video player. The **\<video>** component provides a video player.
...@@ -27,26 +17,26 @@ Not supported ...@@ -27,26 +17,26 @@ Not supported
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------- | ----- | ---- | ---------------------------------------- |
| muted | boolean | false | No| Whether the video is muted.| | muted | boolean | false | No | Whether the video is muted. |
| src | string | - | No| Path of the video content to play.| | src | string | - | No | Path of the video content to play. |
| autoplay | boolean | false | No| Whether the video is played automatically after being rendered.| | autoplay | boolean | false | No | Whether the video is played automatically after being rendered. |
| controls | boolean | true | No| Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.| | controls | boolean | true | No | Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.|
## Styles ## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | ------- | ---- | ---------------------------------------- |
| object-fit | string | contain | No| Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.| | object-fit | string | contain | No | Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.|
**Table 1** object-fit enums **Table 1** object-fit enums
| Type| Description| | Type | Description |
| -------- | -------- | | ---- | ------------------------- |
| fill | The image is resized to fill the display area, and its aspect ratio is not retained.| | fill | The image is resized to fill the display area, and its aspect ratio is not retained.|
...@@ -54,31 +44,31 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md ...@@ -54,31 +44,31 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description| | Name | Parameter | Description |
| -------- | -------- | -------- | | ---------- | ---------------------------------------- | ------------------------------------- |
| prepared | {&nbsp;duration:&nbsp;value&nbsp;}<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.| | prepared | { duration: value }<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
| start | - | Triggered when the video is played.| | start | - | Triggered when the video is played. |
| pause | - | Triggered when the video playback is paused.| | pause | - | Triggered when the video playback is paused. |
| finish | - | Triggered when the video playback is finished.| | finish | - | Triggered when the video playback is finished. |
| error | - | Triggered when the video playback fails.| | error | - | Triggered when the video playback fails. |
| seeking | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the time (in seconds) when the progress bar is being dragged.| | seeking | { currenttime: value } | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| seeked | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.| | seeked | { currenttime: value } | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| timeupdate | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.| | timeupdate | { currenttime: value } | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
## Methods ## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name| Parameter| Description| | Name | Parameter | Description |
| -------- | -------- | -------- | | -------------- | ------------------------------------- | ----------------- |
| start | - | Starts playing a video.| | start | - | Starts playing a video. |
| pause | - | Pauses a video.| | pause | - | Pauses a video. |
| setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | Sets the video playback position, in seconds.| | setCurrentTime | { currenttime: value } | Sets the video playback position, in seconds.|
> **NOTE** > **NOTE**
> >
> The methods in the above table can be called after the **attached** callback is invoked. > The methods in the above table can be called after the **attached** callback is invoked.
## Example ## Example
...@@ -87,7 +77,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -87,7 +77,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
<div class="container"> <div class="container">
<video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false' <video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false'
controls='true' onprepared='preparedCallback' onstart='startCallback' controls='true' onprepared='preparedCallback' onstart='startCallback'
onpaues='pauesCallback' onfinish='finishCallback' onerror='errorCallback' onpause='pauseCallback' onfinish='finishCallback' onerror='errorCallback'
onseeking='seekingCallback' onseeked='seekedCallback' onseeking='seekingCallback' onseeked='seekedCallback'
ontimeupdate='timeupdateCallback' ontimeupdate='timeupdateCallback'
style="object-fit:fill; width:80%; height:400px;" style="object-fit:fill; width:80%; height:400px;"
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或