diff --git a/en/application-dev/quick-start/arkts-rendering-control.md b/en/application-dev/quick-start/arkts-rendering-control.md index c59ee04dccef3411c25326851c446dcdd3f7164f..13904097ef69fc988fe3b1ed8d5a98714c38c2aa 100644 --- a/en/application-dev/quick-start/arkts-rendering-control.md +++ b/en/application-dev/quick-start/arkts-rendering-control.md @@ -256,7 +256,7 @@ struct MyComponent { this.data.pushData('/path/image' + this.data.totalCount() + '.png') }) }, item => item) - } + }.height('100%').width('100%') } } ``` diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 9b2c8d0277f79df9dc0cc3e59aece289076af677..7d723dc4082fd6f1aa65fe7ff181fc3fcd268621 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -28,7 +28,6 @@ - [Transformation](ts-universal-attributes-transformation.md) - [Image Effect Configuration](ts-universal-attributes-image-effect.md) - [Shape Clipping](ts-universal-attributes-sharp-clipping.md) - - [Text Style](ts-universal-attributes-text-style.md) - [Grid](ts-universal-attributes-grid.md) - [Gradient Color](ts-universal-attributes-gradient-color.md) - [Popup Control](ts-universal-attributes-popup.md) @@ -43,7 +42,8 @@ - [Background Blur](ts-universal-attributes-backgroundBlurStyle.md) - [restoreId](ts-universal-attributes-restoreId.md) - [Foreground Color](ts-universal-attributes-foreground-color.md) - - Gesture Processing + - [Universal Text Attributes](ts-universal-attributes-text-style.md) + - Gesture Handling - [Gesture Binding Methods](ts-gesture-settings.md) - Basic Gestures - [TapGesture](ts-basic-gestures-tapgesture.md) diff --git a/en/application-dev/reference/arkui-ts/figures/align.png b/en/application-dev/reference/arkui-ts/figures/align.png index ffabc26d3ee59984dda6cb375f8b18bb319b4fc7..5cdeb7cfd622b90a6fe52ef8cc94f187847d05b7 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/align.png and b/en/application-dev/reference/arkui-ts/figures/align.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/animation.PNG b/en/application-dev/reference/arkui-ts/figures/animation.PNG deleted file mode 100644 index 92f92e0001a90840d03ebd00e0b0ef736c2a94c8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animation.PNG and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/animation.gif b/en/application-dev/reference/arkui-ts/figures/animation.gif index 6cfbc07fc5122be3ecd69e6b33b6f00c0f676a0f..e1f1e9d8eedba5f4d7e9895fe10c1028cb8e19bd 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/animation.gif and b/en/application-dev/reference/arkui-ts/figures/animation.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/animation1.PNG b/en/application-dev/reference/arkui-ts/figures/animation1.PNG deleted file mode 100644 index 98cc1fa8c0537071549fa8185fa14f7ad103e7f8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animation1.PNG and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/animation1.gif b/en/application-dev/reference/arkui-ts/figures/animation1.gif new file mode 100644 index 0000000000000000000000000000000000000000..d4fae00973755cc243e1d48f10acf9ef4b24682e Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animation1.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104400.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104400.gif new file mode 100644 index 0000000000000000000000000000000000000000..da442c6a4f02d281bafff3f9fde8a51c6ebbf932 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104400.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378420.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378420.gif deleted file mode 100644 index ec293bafaf6cd7204ebb231c4eee7daa504b78c3..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378420.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index f22e531ac3a0f8423c9e8de5af520a92d2828d5f..d5d669429dcb6af79c26cdc49661f1087c871472 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -37,11 +37,11 @@ struct AttrAnimationExample { build() { Column() { - Button('change width and height') + Button('change size') .onClick(() => { if (this.flag) { - this.widthSize = 100 - this.heightSize = 50 + this.widthSize = 150 + this.heightSize = 60 } else { this.widthSize = 250 this.heightSize = 100 @@ -67,8 +67,8 @@ struct AttrAnimationExample { duration: 1200, curve: Curve.Friction, delay: 500, - iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. - playMode: PlayMode.AlternateReverse + iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. + playMode: PlayMode.Alternate }) }.width('100%').margin({ top: 20 }) } diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md index 75d67936b62bf0ac72456673ef1474e4840cb9fd..de00ad6ba70f1ddb0cf8bff57e2f8ef7bfec26cf 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -25,10 +25,9 @@ Since API version 9, this API is supported in ArkTS widgets. | type | ButtonType | No | Button type.
Default value: **ButtonType.Capsule** | | stateEffect | boolean | No | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**| - **API 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean }) - Creates a button component based on text content. In this case, the component cannot contain child components. +Creates a button component based on text content. In this case, the component cannot contain child components. Since API version 9, this API is supported in ArkTS widgets. @@ -46,6 +45,7 @@ Since API version 9, this API is supported in ArkTS widgets. | ----------- | ----------- | --------------------------------- | | type | ButtonType | Button type.
Default value: **ButtonType.Capsule**
Since API version 9, this API is supported in ArkTS widgets.| | stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| +| labelStyle10+ | [LabelStyle](#labelstyle10) | Label style of the button.| ## ButtonType enums @@ -58,11 +58,22 @@ Since API version 9, this API is supported in ArkTS widgets. | Normal | Normal button (without rounded corners by default). | > **NOTE** -> - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md), rather than by using the **border** API. Only a button-wide rounded corner setting is supported. -> - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and its rounded corner is always half of the button height. +> - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md), rather than by using the **border** API. Only a rounded corner whose parameter is [Length](ts-types.md#length) is supported. +> - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and the radius of its rounded corner is always half of the button height or width, whichever is smaller. > - For a button of the **Circle** type, its radius is the value of **borderRadius** (if set) or the width or height (whichever is smaller). > - The button text is set using the [text style attributes](ts-universal-attributes-text-style.md). - +> - Before setting the [gradient color](ts-universal-attributes-gradient-color.md), you need to set [backgroundColor](ts-universal-attributes-background.md) to transparent. + +## LabelStyle10+ + +| Name | Type | Mandatory| Description | +| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the label text is too long. Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.| +| maxLines | number | No | Maximum number of lines in the label text. By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.| +| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Minimum font size of the label text. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.| +| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Maximum font size of the label text. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.| +| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No | How the adaptive height is determined for the label text. | +| font | [Font](ts-types.md#Font) | No | Font of the label text. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index 08d913698286ee0cb2cbfbc66386cd4a52a45bc9..8a01f73b82fcccfbaa80831fce2839a9b19a3429 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -28,6 +28,16 @@ Since API version 9, this API is supported in ArkTS widgets. | max | number | No | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.
- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.
Default value: **100**| | type8+ | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).
Default value: **DataPanelType.Circle**| +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| ----------- | ------- | -------------------------------------------- | +| closeEffect | boolean | Whether to disable the rotation effect for the component.
Default value: **false**| + + + ## DataPanelType Since API version 9, this API is supported in ArkTS widgets. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md index cee85008404560b115d9dc021ed98e59da47d36a..3555f55586004554735bbf5cf4c4aa582e25e925 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -26,15 +26,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | ----------- | ---------- | ------------------ | | vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.
**true**: A vertical divider is used.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| | color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeWidth | number \| string | Width of the divider.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | number \| string | Width of the divider.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute cannot be set to a percentage.| | lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.
Default value: **LineCapStyle.Butt**
Since API version 9, this API is supported in ArkTS widgets.| -## Events - -The universal events are not supported. - - ## Example ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index 1562815bc640f37d2c83043be7d4c45bf0de2c8b..ed564ed02da8ab3d1c7332aaeb4e4a05543685b9 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -81,11 +81,11 @@ Since API version 9, this API is supported in ArkTS widgets. In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name | Description | +| Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
Since API version 9, this API is supported in ArkTS widgets.| -| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
Since API version 9, this API is supported in ArkTS widgets.| -| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.
Since API version 9, this API is supported in ArkTS widgets.| +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status. The value **1** means that the image is successfully loaded, and **0** means the opposite.
Since API version 9, this API is supported in ArkTS widgets. | +| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
Since API version 9, this API is supported in ArkTS widgets. | +| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.
Since API version 9, this API is supported in ArkTS widgets. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index e5dfa9aa5304d58c76fdfe87aaf7ade4623db417..85745ba42d26583d369fe5f652c756ae318440f5 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -36,7 +36,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## Events -Among all the universal events, only the [click event](ts-universal-events-click.md) is supported. +Among the universal events, the [click event](ts-universal-events-click.md), [touch event](ts-universal-events-touch.md), and [show/hide event](ts-universal-events-show-hide.md) are supported. ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md index d78f3a705501daf305b4d3ee01a33a57c568a6a0..eb3d4489f8cadd3df86f727fe68be24596b407ee 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md @@ -32,7 +32,7 @@ Since API version 9, this API is supported in ArkTS widgets. | -------- | -------- | -------- | | stars | number | Total number of stars.
Default value: **5**
Since API version 9, this API is supported in ArkTS widgets.| | stepSize | number | Step of an operation.
Default value: **0.5**
Since API version 9, this API is supported in ArkTS widgets.| -| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.
**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.
**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.
Since API version 9, this API is supported in ArkTS widgets.| +| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | Star style.
**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.
**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.
**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).
Local and online images are supported, but not **PixelMap** and **Resource** objects.
By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md index bea534a1a1861e1ad2183d0ed1455127f762c65c..4c32cb2686c2f6e3abc7dd4b3ee4af2c9355d6fa 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -50,9 +50,35 @@ Except touch target attributes, the universal attributes are supported. | trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.
Since API version 9, this API is supported in ArkTS widgets.| | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.
Since API version 9, this API is supported in ArkTS widgets.| | showSteps | boolean | Whether to display the current step.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| -| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When **direction** is set to **Axis.Horizontal**, the bubble is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the bubble is displayed on the left of the slider.
The drawing area of the bubble is the overlay of the slider.
If no margin is set for the slider or the margin is not large enough, the bubble will be clipped.| | trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.
Since API version 9, this API is supported in ArkTS widgets.| +| blockBorderColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.| +| blockBorderWidth10+ | [Length](ts-types.md#length) | Border width of the slider in the block direction.| +| stepColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Step color.| +| trackBorderRadius10+ | [Length](ts-types.md#length) | Radius of the rounded corner of the slider track.| +| blockSize10+ | [SizeOptions](ts-types.md#sizeoptions) | Size of the slider in the block direction.| +| blockStyle10+ | [SliderBlockStyle](#sliderblockstyle10) | Style of the slider in the block direction.| +| stepSize10+ | [Length](ts-types.md#length) | Step size (diameter).| +## SliderBlockStyle10+ + +Desribes the style of the slider in the block direction. + +| Name | Type | Mandatory| Description | +| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| type | [SliderBlockType](#sliderblocktype10) | Yes | Type of the slider in the block direction.
Default value: **SliderBlockType.DEFAULT**, indicating the round slider.| +| image | [ResourceStr](ts-types.md#resourcestr) | No | Image resource of the slider.
The area size for displaying the image is subject to the **blockSize** attribute. Be mindful of the image size when selecting an image.| +| shape | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | No | Custom shape of the slider. | + +## SliderBlockType10+ + +Enumerates the types of the slider in the block direction. + +| Name | Description | +| ------- | ---------------------- | +| DEFAULT | Round slider. | +| IMAGE | Slider with an image background. | +| SHAPE | Slider in a custom shape.| ## Events @@ -60,7 +86,7 @@ In addition to the **OnAppear** and **OnDisAppear** universal events, the follow | Name| Description| | -------- | -------- | -| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider slides.
**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.
**mode**: dragging state.
Since API version 9, this API is supported in ArkTS widgets.| +| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider is dragged or clicked.
**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.
**mode**: state triggered by the event.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The **Begin** and **End** states are triggered when the slider is clicked with a gesture. The **Moving** and **Click** states are triggered when the value of **value** changes.
If the coherent action is a drag action, the **Click** state will not be triggered.
The value range of **value** is the **steps** value array.| ## SliderChangeMode @@ -68,9 +94,9 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Value| Description| | -------- | -------- | -------- | -| Begin | 0 | The user starts to drag the slider.| +| Begin | 0 | The user touches or presses the slider with a gesture or mouse.| | Moving | 1 | The user is dragging the slider.| -| End | 2 | The user stops dragging the slider.| +| End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse.| | Click | 3 | The user moves the slider by touching the slider track.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index e4b6ba1ad47c9e06f3f26e6b47f4afd505b6aa36..0a05c9ce7311a0ab826543540dc95dda25699987 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -38,6 +38,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.
- **value**: regular expression to set.
- **error**: filtered-out content to return when regular expression matching fails.| | copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.| +> **NOTE** +> +> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows: { top: 8 vp, right: 16 vp, bottom: 16 vp, left: 8 vp } + ## Events @@ -72,6 +76,18 @@ Sets the position of the caret. | ------ | -------- | ---- | -------------------------------------- | | value | number | Yes | Length from the start of the string to the position where the caret is located.| +### setTextSelection10+ + +setTextSelection(selectionStart: number, selectionEnd: number): void + +Sets the text selection range. + +**Parameters** + +| Name | Type| Mandatory| Description | +| -------------- | -------- | ---- | ------------------ | +| selectionStart | number | Yes | Start of the selection range.| +| selectionEnd | number | Yes | End of the selection range.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 3769a949422ac922318ad203fb2a7bebd676e44c..4a6457aeda349129f035fa428710b36f32e68d3b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -34,14 +34,21 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | type | [InputType](#inputtype) | Input box type.
Default value: **InputType.Normal** | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.| | placeholderFont | [Font](ts-types.md#font) | Placeholder text font.| -| enterKeyType | [EnterKeyType](#enterkeytype) | Type of the Enter key. Currently, only the default value is supported.
Default value: **EnterKeyType.Done**| +| enterKeyType | [EnterKeyType](#enterkeytype) | Type of the Enter key. Only the default value is supported.
Default value: **EnterKeyType.Done**| | caretColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the caret in the text box. | | maxLength | number | Maximum number of characters in the text input. | -| inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.
- **value**: regular expression to set.
- **error**: filtered-out content to return when regular expression matching fails.| +| inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The regular expression can match single characters, but not strings.
- **value**: regular expression to set.
- **error**: filtered-out content to return when regular expression matching fails.| | copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.| | showPasswordIcon9+ | boolean | Whether to display the show password icon at the end of the password text box.
Default value: **true**| | style9+ | [TextInputStyle](#textinputstyle9) | Text input style.
Default value: **TextInputStyle.Default**| | textAlign9+ | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.
Default value: **TextAlign.Start** | +| selectedBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.| +| caretStyle10+ | {
caretWidth: [Length](ts-types.md#length)
} | Caret style. | +| caretPosition10+ | number | Caret position.| + +> **NOTE** +> +> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 8 vp,
right: 16 vp,
bottom: 16 vp,
left: 8 vp
} ## EnterKeyType @@ -103,7 +110,18 @@ Sets the position of the caret. | Name| Type| Mandatory| Description | | ------ | -------- | ---- | -------------------------------------- | | value | number | Yes | Length from the start of the string to the position where the caret is located.| +### setTextSelection10+ + +setTextSelection(selectionStart: number, selectionStart: number): void + +Sets the text selection area, which will be highlighted. + +**Parameters** +| Name | Type| Mandatory| Description | +| -------------- | -------- | ---- | ---------------------- | +| selectionStart | number | Yes | Start position of the text selection area. The start position of the text in the text box is 0.| +| selectionEnd | number | Yes | End position of the text selection area.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index 7c3994074a9bf4124800346196515150f020ffc6..f5acbb698cb3c77954cd8bd51a8e489f3ad2f1d4 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -35,9 +35,9 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Description | | -------- | ---------------- | -| Checkbox | Check box type.
**NOTE**
The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right: 6 vp,
bottom: 14 vp,
left: 6 vp
} | +| Checkbox | Check box type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | | Button | Button type. The set string, if any, will be displayed inside the button. | -| Switch | Switch type.
**NOTE**
The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | +| Switch | Switch type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right:6 vp,
bottom: 6 vp,
left: 14 vp
} | ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md index 6a5908578950850fbedda096b33f03c858097cd0..8a98f8237eb7656f48eeb5b2eeba442a64b9b4c6 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md @@ -5,7 +5,8 @@ The **\** component allows for flexible layout of child components. > **NOTE** > > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -> - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\](ts-container-column.md)** or **[\](ts-container-row.md)** instead under scenarios where consistently high performance is required. +> - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required. +> - If the main axis of the **\** component is not set, it follows the size of the parent container. On the contrary, if the main axis of the [\](ts-container-column.md) or [\](ts-container-row.md) component is not set, it follows the size of their child component. ## Child Components diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md index 20754962479003639e3e000f799b42946c3077ad..9efd6ab6e939ee495789cde41a294e15da37a3a7 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-list.md +++ b/en/application-dev/reference/arkui-ts/ts-container-list.md @@ -76,7 +76,7 @@ This API is supported in ArkTS widgets. | onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.
When calculating the index value, the **\** accounts for one index value as a whole, and the index values of the list items within are not calculated.
- **start**: index of the scroll start position.
- **end**: index of the scroll end position.
Since API version 9, this API is supported in ArkTS widgets.| | onReachStart(event: () => void) | Triggered when the list reaches the start position.
Since API version 9, this API is supported in ArkTS widgets.| | onReachEnd(event: () => void) | Triggered when the list reaches the end position.
Since API version 9, this API is supported in ArkTS widgets.| -| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.
\- **offset**: amount to scroll by.
\- **state**: current sliding status.
- **offsetRemain**: actual amount by which the list scrolls.
This API is supported in ArkTS widgets.| +| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.
\- **offset**: amount to scroll by.
\- **state**: current sliding status.
- **offsetRemain**: actual amount by which the list scrolls.
This API is supported in ArkTS widgets.
**NOTE**
If **listDirection** is set to **Axis.Vertical**, the return value is the amount by which the list needs to scroll in the vertical direction. If **listDirection** is set to **Axis.Horizontal**, the return value is the amount by which the list needs to scroll in the horizontal direction.| | onScrollStart9+(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) starts.
This API is supported in ArkTS widgets.| | onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) stops.
Since API version 9, this API is supported in ArkTS widgets.| | onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.
- **from**: index of the item before moving.
- **to**: index of the item after moving.| diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md index 1cee9be56077b524b2bb71e098336701e7dd9593..3e756f519e74b7f851b3af2401e7272eb133a4a9 100644 --- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -42,7 +42,7 @@ struct AnimateToExample { build() { Column() { - Button('change width and height') + Button('change size') .width(this.widthSize) .height(this.heightSize) .margin(30) @@ -57,8 +57,8 @@ struct AnimateToExample { console.info('play end') } }, () => { - this.widthSize = 100 - this.heightSize = 50 + this.widthSize = 150 + this.heightSize = 60 }) } else { animateTo({}, () => { @@ -77,7 +77,7 @@ struct AnimateToExample { curve: Curve.Friction, delay: 500, iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. - playMode: PlayMode.AlternateReverse, + playMode: PlayMode.Alternate, onFinish: () => { console.info('play end') } @@ -90,10 +90,4 @@ struct AnimateToExample { } ``` -The figure below shows two buttons in their initial state. - -![animation](figures/animation.PNG) - -Clicking the first button plays the animation of resizing the button, and clicking the second button plays the animation of rotating the button clockwise by 90 degrees. The figure below shows the two buttons when the animations have finished. - -![animation1](figures/animation1.PNG) +![animation1](figures/animation1.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md index feb0d96571dd263205252f8c849b5a0f6ee967b1..0c143bd234578db616fb7a86fccca80cb592b983 100644 --- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -118,9 +118,9 @@ Requests full-screen mode. **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------- | ---- | --------------------- | -| value | boolean | Yes | Whether the playback is in full-screen mode.
Default value: **false**| +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------------------- | +| value | boolean | Yes | Whether to play the video in full screen mode within the application window.
Default value: **false**| ### exitFullscreen @@ -173,7 +173,7 @@ struct VideoCreateComponent { previewUri: this.previewUri, currentProgressRate: this.curRate, controller: this.controller - }).width(800).height(600) + }).width('100%').height(600) .autoPlay(this.isAutoPlay) .controls(this.showControls) .onStart(() => { @@ -186,7 +186,7 @@ struct VideoCreateComponent { console.info('onFinish') }) .onError(() => { - console.info('onFinish') + console.info('onError') }) .onPrepared((e) => { console.info('onPrepared is ' + e.duration) diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md index f32762ea1dd342ff52e4ff80c4bc7fb4245b6137..37f51638b8383dfab8aba2ddb3f6e7c441419b8a 100644 --- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -11,7 +11,7 @@ The motion path animation is used to animate a component along a custom path. | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z'
For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {
'',
0.0,
1.0,
false
} | Motion path of the component.
- **path**: motion path of the translation animation. The value is an SVG path string.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path. | +| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z'
For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {
'',
0.0,
1.0,
false
} | Motion path of the component.
- **path**: motion path of the translation animation. The value is an SVG path string.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path.| ## Example @@ -25,7 +25,7 @@ struct MotionPathExample { build() { Column() { - Button('click me') + Button('click me').margin(50) // Execute the animation: Move from the start point to (300,200), then to (300,500), and finally to the end point. .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true }) .onClick(() => { @@ -38,4 +38,4 @@ struct MotionPathExample { } ``` -![en-us_image_0000001212378420](figures/en-us_image_0000001212378420.gif) +![en-us_image_0000001174104400](figures/en-us_image_0000001174104400.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index 2c43828da9bc9d793b0fb75047e76cf862892712..37c96bd580acac247e9b7cbc51c7e30618ceb741 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md @@ -32,19 +32,15 @@ struct PositionExample1 { Column({ space: 10 }) { // When the component content is within the area specified by the component width and height, set the alignment mode of the content in the component. Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') - Text('top start') - .align(Alignment.TopStart) - .height(50) - .width('90%') - .fontSize(16) - .backgroundColor(0xFFE4C4) - - Text('Bottom end') - .align(Alignment.BottomEnd) - .height(50) - .width('90%') - .fontSize(16) - .backgroundColor(0xFFE4C4) + Stack() { + Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) + Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) + }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) + .align(Alignment.BottomEnd) + Stack() { + Text('top start') + }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) + .align(Alignment.TopStart) // To arrange the child components from left to right, set direction of the parent container to Direction.Ltr. Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') @@ -86,6 +82,7 @@ struct PositionExample2 { Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') Row() { Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + .textAlign(TextAlign.Center) Text('2 position(30, 10)') .size({ width: '60%', height: '30' }) .backgroundColor(0xbbb2cb) @@ -94,6 +91,7 @@ struct PositionExample2 { .align(Alignment.Start) .position({ x: 30, y: 10 }) Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + .textAlign(TextAlign.Center) Text('4 position(50%, 70%)') .size({ width: '50%', height: '50' }) .backgroundColor(0xbbb2cb) @@ -110,14 +108,20 @@ struct PositionExample2 { .size({ width: '100', height: '100' }) .backgroundColor(0xdeb887) Text('text') + .fontSize('30px') + .textAlign(TextAlign.Center) .size({ width: 25, height: 25 }) .backgroundColor(Color.Green) .markAnchor({ x: 25, y: 25 }) Text('text') + .fontSize('30px') + .textAlign(TextAlign.Center) .size({ width: 25, height: 25 }) .backgroundColor(Color.Green) .markAnchor({ x: -100, y: -25 }) Text('text') + .fontSize('30px') + .textAlign(TextAlign.Center) .size({ width: 25, height: 25 }) .backgroundColor(Color.Green) .markAnchor({ x: 25, y: -25 }) @@ -127,6 +131,7 @@ struct PositionExample2 { Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') Row() { Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + .textAlign(TextAlign.Center) Text('2 offset(15, 30)') .size({ width: 120, height: '50' }) .backgroundColor(0xbbb2cb) @@ -135,6 +140,7 @@ struct PositionExample2 { .align(Alignment.Start) .offset({ x: 15, y: 30 }) Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + .textAlign(TextAlign.Center) Text('4 offset(-10%, 20%)') .size({ width: 100, height: '50' }) .backgroundColor(0xbbb2cb) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index 3fe2fd67e04bb818ccc5625f7f7d9d61e9347ea2..bba053499cccf91804f860a217b78af3ace9c390 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -1,6 +1,6 @@ -# Text Style +# Universal Text Attributes -The text style attributes set the style for text in a component. +Universal text attributes include text style attributes applicable to text containers. > **NOTE** > @@ -18,6 +18,8 @@ The text style attributes set the style for text in a component. | fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.
Default value: **FontStyle.Normal** | | fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, **400**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.
Default value: **FontWeight.Normal** | | fontFamily | string \| [Resource](ts-types.md#resource) | Font family.
Default value: **'HarmonyOS Sans'**
Currently, only the default font is supported. | +| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.| +| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None,
color: Color.Black
} | ## Example diff --git a/en/application-dev/ui/ui-ts-animation-feature.md b/en/application-dev/ui/ui-ts-animation-feature.md index f7933b9555ff6fb6312c4e8fabc1d2a5be30d168..3d6467e08cc112b6b9a953aa4d0a649486042bd2 100644 --- a/en/application-dev/ui/ui-ts-animation-feature.md +++ b/en/application-dev/ui/ui-ts-animation-feature.md @@ -132,7 +132,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte .onAppear(() => { animateTo({ - duration: 2000, + duration: 1000, curve: this.curve1, delay: 100, onFinish: () => { @@ -199,7 +199,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte .opacity(this.opacityValue) .onAppear(() => { animateTo({ - duration: 2000, + duration: 1000, curve: this.curve1, delay: 100, onFinish: () => { diff --git a/en/application-dev/ui/ui-ts-layout-mediaquery.md b/en/application-dev/ui/ui-ts-layout-mediaquery.md index 205265a30d244ad6100e0f1fc0a19c81859ae3d3..c37468c67f14b37878f22c9138612aebba805975 100644 --- a/en/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/en/application-dev/ui/ui-ts-layout-mediaquery.md @@ -10,32 +10,32 @@ ## Usage -Invoke the **mediaquery** API to set the media query condition and the callback, and change the page layout or implement service logic in the callback corresponding to the condition. +Invoke the **mediaquery** API to set the media query condition and the callback, and change the page layout or implement service logic in the callback corresponding to the condition. The procedure is as follows: -First, import the **mediaquery** module, as shown below: +1. Import the **mediaquery** module, as shown below: -```ts -import mediaquery from '@ohos.mediaquery' -``` + ```ts + import mediaquery from '@ohos.mediaquery' + ``` -Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below: +2. Use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below: -```ts -listener = mediaquery.matchMediaSync('(orientation: landscape)') -``` + ```ts + listener = mediaquery.matchMediaSync('(orientation: landscape)') + ``` -Finally, register the **onPortrait** callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows: +3. Register the **onPortrait** callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows: -```ts -onPortrait(mediaQueryResult) { - if (mediaQueryResult.matches) { - // do something here - } else { - // do something here - } -} -listener.on('change', onPortrait) -``` + ```ts + onPortrait(mediaQueryResult) { + if (mediaQueryResult.matches) { + // do something here + } else { + // do something here + } + } + listener.on('change', onPortrait) + ``` ## Media Query Conditions @@ -95,10 +95,10 @@ At MediaQuery Level 4, range query is imported so that you can use the operators | height | Height of the display area on the application page. | | min-height | Minimum height of the display area on the application page. | | max-height | Maximum height of the display area on the application page. | -| width | Width of the display area on the app page. | +| width | Width of the display area on the application page. | | min-width | Minimum width of the display area on the application page. | | max-width | Maximum width of the display area on the application page. | -| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.
- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.
- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.
- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.| +| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.
- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.
- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.
- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.| | min-resolution | Minimum device resolution. | | max-resolution | Maximum device resolution. | | orientation | Screen orientation.
Options are as follows:
- orientation: portrait
- orientation: landscape| @@ -106,7 +106,7 @@ At MediaQuery Level 4, range query is imported so that you can use the operators | min-device-height | Minimum height of the device. | | max-device-height | Maximum height of the device. | | device-width | Width of the device. | -| device-type | Type of the device.
Value range: **default** | +| device-type | Type of the device.
Options: **default** and tablet | | min-device-width | Minimum width of the device. | | max-device-width | Maximum width of the device. | | round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite. |