提交 4d72b1d9 编写于 作者: E ester.zhou

Update docs (11478)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 63884015
...@@ -21,18 +21,18 @@ Not supported ...@@ -21,18 +21,18 @@ 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\|**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;MenuOption&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. |
...@@ -41,9 +41,9 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri ...@@ -41,9 +41,9 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
**Table 1** MenuOption<sup>5+</sup> **Table 1** MenuOption<sup>5+</sup>
| Name | Type | Description | | Name | Type | Description |
| ------- | ------ | ----------------------------------- | | ------- | ------ | ----------- |
| icon | string | Path of the icon for a menu option. | | icon | string | Path of the icon for a menu option.|
| content | string | Text content of a menu option. | | content | string | Text content of a menu option.|
## Styles ## Styles
...@@ -51,11 +51,11 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri ...@@ -51,11 +51,11 @@ 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 only 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 \| 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. | | 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 caret. | | caret-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the caret. |
...@@ -68,19 +68,19 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md ...@@ -68,19 +68,19 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
| Name | Parameter | Description | | Name | Parameter | Description |
| ------------------------- | ---------------------------------------- | ---------------------------------------- | | ------------------------- | ---------------------------------------- | ---------------------------------------- |
| 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. | | 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> 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. | | 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> 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. | | 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> 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. | | 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> 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. | | 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> 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. | | 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: number,<br>end: number<br> } | 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> checked:true \| false <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
...@@ -102,21 +102,23 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -102,21 +102,23 @@ 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;
} }
...@@ -124,16 +126,16 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -124,16 +126,16 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import promptAction from '@ohos.promptAction'
export default { export default {
change(e){ change(e){
prompt.showToast({ promptAction.showToast({
message: "value: " + e.value, message: "value: " + e.value,
duration: 3000, duration: 3000,
}); });
}, },
enterkeyClick(e){ enterkeyClick(e){
prompt.showToast({ promptAction.showToast({
message: "enterkey clicked", message: "enterkey clicked",
duration: 3000, duration: 3000,
}); });
...@@ -190,10 +192,10 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -190,10 +192,10 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import promptAction from '@ohos.promptAction'
export default { export default {
checkboxOnChange(e) { checkboxOnChange(e) {
prompt.showToast({ promptAction.showToast({
message:'checked: ' + e.checked, message:'checked: ' + e.checked,
duration: 3000, duration: 3000,
}); });
...@@ -225,11 +227,11 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -225,11 +227,11 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import promptAction from '@ohos.promptAction'
export default { export default {
onRadioChange(inputValue, e) { onRadioChange(inputValue, e) {
if (inputValue === e.value) { if (inputValue === e.value) {
prompt.showToast({ promptAction.showToast({
message: 'The chosen radio is ' + e.value, message: 'The chosen radio is ' + e.value,
duration: 3000, duration: 3000,
}); });
......
...@@ -35,8 +35,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md ...@@ -35,8 +35,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| font-size | &lt;length&gt; | 30px | No | Font size. | | font-size | &lt;length&gt; | 30px | No | Font size. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.| | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
| letter-spacing | &lt;length&gt; | 0px | No | Character spacing (px). | | letter-spacing | &lt;length&gt; | 0px | No | Character spacing (px). |
| font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style| | font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style.<br>- **italic**: italic font style.|
| font-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.<br>The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.| | font-weight | number \| string | normal | No | Font weight. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a heavier font weight.<br>The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
| text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.| | text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| text-align | string | start<br>| No | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.| | text-align | string | start<br>| No | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.|
| line-height | &lt;length&gt; | 0px | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. | | line-height | &lt;length&gt; | 0px | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. |
...@@ -46,7 +46,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md ...@@ -46,7 +46,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| min-font-size | &lt;length&gt; | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| | min-font-size | &lt;length&gt; | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| max-font-size | &lt;length&gt; | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| | max-font-size | &lt;length&gt; | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| font-size-step | &lt;length&gt; | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. | | font-size-step | &lt;length&gt; | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. |
| prefer-font-sizes | &lt;array&gt; | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example values: **12px,14px,16px**| | prefer-font-sizes | &lt;array&gt; | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example: prefer-font-sizes: 12px,14px,16px|
## Events ## Events
...@@ -83,7 +83,7 @@ Not supported ...@@ -83,7 +83,7 @@ Not supported
/*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;
......
# qrcode # qrcode
The **\<qrcode>** component is used to generate and display a QR code.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<qrcode>** component is used to generate and display a QR code.
## Required Permissions ## Required Permissions
...@@ -24,7 +23,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri ...@@ -24,7 +23,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| ----- | ------ | ---- | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | string | - | Yes | Content used to generate the QR code. | | value | string | - | Yes | Content used to generate the QR code. |
| type | string | rect | No | QR code type. Available values are as follows:<br>- **rect**: rectangular QR code<br>- **circle**: round QR code| | type | string | rect | No | QR code type. Available values are as follows:<br>- **rect**: rectangular QR code.<br>- **circle**: round QR code.|
## Styles ## Styles
...@@ -60,8 +59,6 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support ...@@ -60,8 +59,6 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
<div class="container"> <div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}" <qrcode value="{{qr_value}}" type="{{qr_type}}"
style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode> style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
<text class="txt">Value</text>
<input onChange="setValue">123</input>
<text class="txt">Type</text> <text class="txt">Type</text>
<switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch> <switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch>
<text class="txt">Color</text> <text class="txt">Color</text>
...@@ -98,7 +95,6 @@ select{ ...@@ -98,7 +95,6 @@ select{
/* index.js */ /* index.js */
export default { export default {
data: { data: {
qr_value:'',
qr_type: 'rect', qr_type: 'rect',
qr_size: '300px', qr_size: '300px',
qr_col: '#87ceeb', qr_col: '#87ceeb',
...@@ -113,9 +109,6 @@ export default { ...@@ -113,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
}, },
......
...@@ -11,7 +11,7 @@ The **\<canvas>** component is used for customizing drawings. ...@@ -11,7 +11,7 @@ The **\<canvas>** component is used for customizing drawings.
None None
## Child Component ## Child Components
Not supported Not supported
...@@ -38,7 +38,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -38,7 +38,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
### 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**.
...@@ -49,7 +49,7 @@ Obtains the canvas drawing context. This API cannot be called in **onInit** or * ...@@ -49,7 +49,7 @@ Obtains the canvas drawing context. This API cannot be called in **onInit** or *
| type | string | Yes | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.| | type | string | Yes | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.|
| options<sup>6+</sup> | ContextAttrOptions | No | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. | | 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 | | Name | Type | Description |
| --------- | ------- | ------------------- | | --------- | ------- | ------------------- |
...@@ -59,7 +59,7 @@ Obtains the canvas drawing context. This API cannot be called in **onInit** or * ...@@ -59,7 +59,7 @@ Obtains the canvas drawing context. This API cannot be called in **onInit** or *
| Type | Description | | Type | Description |
| ---------------------------------------- | -------------------- | | ---------------------------------------- | -------------------- |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the canvas component. | | [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component.|
### toDataURL<sup>6+</sup> ### toDataURL<sup>6+</sup>
......
...@@ -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'
}) })
} }
} }
...@@ -321,12 +324,12 @@ export default { ...@@ -321,12 +324,12 @@ 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: {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
> >
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Swiper>** component provides a container that allows users to switch among child components using swipe gestures. The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures.
## Required Permissions ## Required Permissions
......
...@@ -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.
...@@ -28,11 +18,11 @@ Not supported ...@@ -28,11 +18,11 @@ 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
...@@ -40,14 +30,14 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri ...@@ -40,14 +30,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 |
| ---------- | ------ | ------------- | --------- | ---------------------------------------- | | ---------- | ------ | ------- | ---- | ---------------------------------------- |
| 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.|
## Events ## Events
...@@ -55,15 +45,15 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md ...@@ -55,15 +45,15 @@ 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
...@@ -71,10 +61,10 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md ...@@ -71,10 +61,10 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
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**
> >
......
...@@ -133,17 +133,18 @@ onBreakpointChange(callback: (breakpoints: string) => void) ...@@ -133,17 +133,18 @@ onBreakpointChange(callback: (breakpoints: string) => void)
struct GridRowExample { struct GridRowExample {
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown] @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
@State currentBp: string = 'unknown' @State currentBp: string = 'unknown'
build() { build() {
Column() { Column() {
GridRow({ GridRow({
columns: 5, columns: 5,
gutter: {x:5, y:10}, gutter: { x: 5, y: 10 },
breakpoints: {value:["400vp", "600vp", "800vp"], breakpoints: { value: ["400vp", "600vp", "800vp"],
reference: BreakpointsReference.WindowSize}, reference: BreakpointsReference.WindowSize },
direction: GridRowDirection.Row direction: GridRowDirection.Row
}) { }) {
ForEach(this.bgColors, (color)=>{ ForEach(this.bgColors, (color) => {
GridCol({ span: {xs:1, sm:2, md:3, lg:4}}) { GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row().width("100%").height("20vp") Row().width("100%").height("20vp")
}.borderColor(color).borderWidth(2) }.borderColor(color).borderWidth(2)
}) })
...@@ -151,8 +152,8 @@ struct GridRowExample { ...@@ -151,8 +152,8 @@ struct GridRowExample {
.onBreakpointChange((breakpoint) => { .onBreakpointChange((breakpoint) => {
this.currentBp = breakpoint this.currentBp = breakpoint
}) })
}.width('80%').margin({ left: 10,top: 5, bottom:5 }).height(200) }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
.border({color:Color.Blue, width:2}) .border({ color: '#880606', width: 2 })
} }
} }
``` ```
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册