From 3fc92cc6b585b4aca71219a1403e2dde17c503bf Mon Sep 17 00:00:00 2001 From: HelloCrease Date: Fri, 29 Apr 2022 14:26:23 +0800 Subject: [PATCH] update docs Signed-off-by: HelloCrease --- .../figures/en-us_image_0000001262954829.png | Bin 0 -> 9707 bytes .../ui/ui-ts-basic-components-button.md | 30 +++---- .../ui/ui-ts-layout-mediaquery.md | 74 +++++++++--------- 3 files changed, 52 insertions(+), 52 deletions(-) create mode 100644 en/application-dev/ui/figures/en-us_image_0000001262954829.png diff --git a/en/application-dev/ui/figures/en-us_image_0000001262954829.png b/en/application-dev/ui/figures/en-us_image_0000001262954829.png new file mode 100644 index 0000000000000000000000000000000000000000..a606cbe3c297f267e77a71816d21def7e3d51d2d GIT binary patch literal 9707 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 literal 0 HcmV?d00001 diff --git a/en/application-dev/ui/ui-ts-basic-components-button.md b/en/application-dev/ui/ui-ts-basic-components-button.md index 8f13accaa1..cbbcab6f93 100644 --- a/en/application-dev/ui/ui-ts-basic-components-button.md +++ b/en/application-dev/ui/ui-ts-basic-components-button.md @@ -11,7 +11,7 @@ You can create a button by invoking either of the following APIs: - Button(options?: {type?: ButtonType, stateEffect?: boolean}) This API creates a button that contains child components. In the syntax, **type** indicates the button type, and **stateEffect** indicates whether to enable the click effect for the button. - + ``` Button({ type: ButtonType.Normal, stateEffect: true }) { Row() { @@ -26,7 +26,7 @@ You can create a button by invoking either of the following APIs: - Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean }) This API creates a button that does not contain any child components. In the syntax, **label** indicates whether the created button contains child components. - + ``` Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) @@ -42,7 +42,7 @@ You can create a button by invoking either of the following APIs: Use the **type** parameter to set the button type to **Capsule**, **Circle**, or **Normal**. - Capsule button (default type) - + ``` Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) @@ -52,7 +52,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ![en-us_image_0000001215645452](figures/en-us_image_0000001215645452.png) - Circle button - + ``` Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) @@ -68,18 +68,18 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or - Set the border radius: In general cases, you can use universal attributes to define the button styles. For example, you can use the **borderRadius** attribute to set the border radius. - + ``` Button('circle border', { type: ButtonType.Normal }) .borderRadius(20) ``` - ![zh-cn_image_0000001190463780](figures/zh-cn_image_0000001190463780.png) + ![en-us_image_0000001215645452](figures/en-us_image_0000001215645452.png) - Setting Text Styles Add a font style for text displayed on the button. - + ``` Button('font style', { type: ButtonType.Normal }) .fontSize(20) @@ -87,12 +87,12 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or .fontWeight(800) ``` - ![zh-cn_image_0000001189744672](figures/zh-cn_image_0000001189744672.png) + ![en-us_image_0000001215965420](figures/en-us_image_0000001215965420.png) - Set the background color: You can do so by adding the **backgroundColor** attribute. - + ``` Button('background color').backgroundColor(0xF55A42) ``` @@ -102,7 +102,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or - Assign a function to the button: In this example, we are creating a button with the delete function. - + ``` Button({ type: ButtonType.Circle, stateEffect: true }) { Image($r('app.media.ic_public_delete_filled')).width(30).height(30) @@ -133,7 +133,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ``` import router from '@ohos.router' - + @Entry @Component struct ButtonCase1 { @@ -144,13 +144,13 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) router.push({ url: 'xxx' }) }) } - + ListItem() { Button("Second").onClick(() => { router.push({ url: 'yyy' }) }) } - + ListItem() { Button("Third").onClick(() => { router.push({ url: 'zzz' }) @@ -170,7 +170,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) - Using the Button for Submitting Forms On the user login/registration page, you can use a button to submit a login or registration request. - + ``` @Entry @Component @@ -184,5 +184,5 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) } } ``` - + ![en-us_image_0000001190466492](figures/en-us_image_0000001190466492.png) diff --git a/en/application-dev/ui/ui-ts-layout-mediaquery.md b/en/application-dev/ui/ui-ts-layout-mediaquery.md index 32238aa487..fa4a03382c 100644 --- a/en/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/en/application-dev/ui/ui-ts-layout-mediaquery.md @@ -45,9 +45,9 @@ screen and (device-type: tv) or (resolution < 2) // This is a multi-condition ### media-type - | Type| Description| -| -------- | -------- | -| screen | Media query based on screen-related parameters.| +| Type | Description | +| ------ | ---------------------------------------- | +| screen | Media query based on screen-related parameters. | ### Media Logic Operation (and|not|only) @@ -56,48 +56,48 @@ You can use logical operators (**and**, **or**, **not**, and **only**) to compos **Table 1** Media logical operators -| Type| Description| -| -------- | -------- | -| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.
For example, **screen and (device-type: wearable) and (max-height: 600) ** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units.| -| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.
For example, **not screen and (min-height: 50) and (max-height: 600) ** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> When the **not** operator is used, the media type must be specified.| -| only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:
screen and (min-height: 50)
The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> When the **only** operator is used, the media type must be specified.| -| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.
For example, **screen and (min-height: 1000),  (round-screen: true) ** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round.| -| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.
For example, **screen and (max-height: 1000) or  (round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round.| +| Type | Description | +| -------- | ---------------------------------------- | +| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.
For example, **screen and (device-type: wearable) and (max-height: 600) ** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units. | +| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.
For example, **not screen and (min-height: 50) and (max-height: 600) ** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> When the **not** operator is used, the media type must be specified. | +| only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:
screen and (min-height: 50)
The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> When the **only** operator is used, the media type must be specified. | +| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.
For example, **screen and (min-height: 1000),  (round-screen: true) ** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round. | +| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.
For example, **screen and (max-height: 1000) or  (round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round. | At MediaQuery Level 4, range query is imported so that you can use the operators including <=, >=, <, and > besides the **max-** and **min-** operators. **Table 2** Logical operators for range query -| Type| Description| -| -------- | -------- | -| <= | Less than or equal to, for example, **screen and (50 <= height)**.| -| >= | Greater than or equal to, for example, **screen and (600 >= height)**.| -| < | Less than, for example, **screen and (50 < height)**.| -| > | Greater than, for example, **screen and (600 > height)**.| +| Type | Description | +| ----- | ---------------------------------------- | +| <= | Less than or equal to, for example, **screen and (50 <= height)**. | +| >= | Greater than or equal to, for example, **screen and (600 >= height)**. | +| < | Less than, for example, **screen and (50 < height)**. | +| > | Greater than, for example, **screen and (600 > height)**. | ### media-feature - | Type| Description| -| -------- | -------- | -| 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.| -| 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.| -| min-resolution | Minimum device resolution.| -| max-resolution | Maximum device resolution.| -| orientation | Screen orientation.
Options are as follows:
- orientation: portrait
- orientation: landscape| -| device-height | Height of the device.| -| min-device-height | Minimum height of the device.| -| max-device-height | Maximum height of the device.| -| device-width | Width of the device.| -| 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.| -| dark-mode | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite.| +| Type | Description | +| ----------------- | ---------------------------------------- | +| 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. | +| 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. | +| min-resolution | Minimum device resolution. | +| max-resolution | Maximum device resolution. | +| orientation | Screen orientation.
Options are as follows:
- orientation: portrait
- orientation: landscape | +| device-height | Height of the device. | +| min-device-height | Minimum height of the device. | +| max-device-height | Maximum height of the device. | +| device-width | Width of the device. | +| 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. | +| dark-mode | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite. | ## Example Scenario @@ -139,7 +139,7 @@ Use media queries to apply different content and styles to the page text when th } ``` When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.
-![zh-cn_image_0000001262954829](figures/zh-cn_image_0000001262954829.png) +![en-us_image_0000001262954829](figures/en-us_image_0000001262954829.png) When the device is not in landscape orientation, the text content is displayed in portrait mode in the color of #DB7093.
![en-us_image_0000001263074739](figures/en-us_image_0000001263074739.png) -- GitLab