Skip to content

D
Docs

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

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

!12561 翻译完成 11968 

Merge pull request !12561 from ester.zhou/C1-1215
上级 13ae9fae 8e42f079
隐藏空白更改
内联 并排
Showing with 470 addition and 384 deletion
en/application-dev/quick-start/start-overview.md
浏览文件 @ e1c30813
...@@ -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
浏览文件 @ e1c30813
...@@ -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
浏览文件 @ e1c30813
# 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
浏览文件 @ e1c30813
# 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
浏览文件 @ e1c30813
# 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
浏览文件 @ e1c30813
# 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
浏览文件 @ e1c30813
# 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
浏览文件 @ e1c30813
# 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
浏览文件 @ e1c30813
# 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
浏览文件 @ e1c30813
...@@ -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
浏览文件 @ e1c30813
...@@ -153,4 +153,5 @@ export default { ...@@ -153,4 +153,5 @@ export default {
``` ```
![en-us_image_0000001185033226](figures/en-us_image_0000001185033226.png) ![en-us_image_0000001185033226](figures/en-us_image_0000001185033226.png)
en/application-dev/reference/arkui-js/js-components-container-swiper.md
浏览文件 @ e1c30813
# 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
浏览文件 @ e1c30813
...@@ -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.
先完成此消息的编辑！
想要评论请 注册 或