Skip to content

D
Docs

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

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

update docs (14541) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 2b89f7d0
显示空白变更内容
内联 并排
Showing with 228 addition and 174 deletion
en/application-dev/quick-start/arkts-state-mgmt-application-level.md
浏览文件 @ bd0c62dc
...@@ -106,36 +106,37 @@ One-way data binding can be established between a component and the **LocalStora ...@@ -106,36 +106,37 @@ One-way data binding can be established between a component and the **LocalStora
The **LocalStorage** is loaded through the **loadContent** API. For details, see [loadContent](../reference/apis/js-apis-window.md#loadcontent9-1). The **LocalStorage** is loaded through the **loadContent** API. For details, see [loadContent](../reference/apis/js-apis-window.md#loadcontent9-1).
```ts ```ts
import UIAbility from '@ohos.app.ability.UIAbility'; // MainAbility.ts
import Ability from '@ohos.application.Ability'
export default class EntryAbility extends UIAbility { export default class MainAbility extends Ability {
storage: LocalStorage storage: LocalStorage
onCreate() { onCreate() {
this.storage = new LocalStorage() this.storage = new LocalStorage()
this.storage.setOrCreate('storageSimpleProp', 121) this.storage.setOrCreate('storageSimpleProp', 121)
console.info('[Demo EntryAbility onCreate]') console.info('[Demo MainAbility onCreate]')
} }
onDestroy() { onDestroy() {
console.info('[Demo EntryAbility onDestroy]') console.info('[Demo MainAbility onDestroy]')
} }
onWindowStageCreate(windowStage) { onWindowStageCreate(windowStage) {
// storage is passed to the loadContent API as a parameter. // storage is passed to the loadContent API as a parameter.
windowStage.loadContent('pages/index', this.storage) windowStage.loadContent('pages/Index', this.storage)
} }
onWindowStageDestroy() { onWindowStageDestroy() {
console.info('[Demo] EntryAbility onWindowStageDestroy') console.info('[Demo] MainAbility onWindowStageDestroy')
} }
onForeground() { onForeground() {
console.info('[Demo] EntryAbility onForeground') console.info('[Demo] MainAbility onForeground')
} }
onBackground() { onBackground() {
console.info('[Demo] EntryAbility onBackground') console.info('[Demo] MainAbility onBackground')
} }
} }
``` ```
...@@ -143,7 +144,7 @@ export default class EntryAbility extends UIAbility { ...@@ -143,7 +144,7 @@ export default class EntryAbility extends UIAbility {
The **@Component** decorated component obtains data. The **@Component** decorated component obtains data.
```ts ```ts
// index.ets // Index.ets
let storage = LocalStorage.GetShared() let storage = LocalStorage.GetShared()
@Entry(storage) @Entry(storage)
......
en/application-dev/quick-start/arkts-state-mgmt-page-level.md
浏览文件 @ bd0c62dc
...@@ -91,10 +91,6 @@ The **@Prop** decorated state variable has the following features: ...@@ -91,10 +91,6 @@ The **@Prop** decorated state variable has the following features:
- Support for multiple instances: A component can have multiple attributes decorated by **@Prop**. - Support for multiple instances: A component can have multiple attributes decorated by **@Prop**.
- Support for initialization with a value passed to the @Prop decorated variable: When a new instance of the component is created, all **@Prop** variables must be initialized. Initialization inside the component is not supported. - Support for initialization with a value passed to the @Prop decorated variable: When a new instance of the component is created, all **@Prop** variables must be initialized. Initialization inside the component is not supported.
> **NOTE**
>
> A **@Prop** decorated variable cannot be initialized inside the component.
**Example** **Example**
In the following example, when the user presses **+1** or **-1**, the status of the parent component changes and the **build** method is executed again. In this case, a new **CountDownComponent** instance is created. The **countDownStartValue** attribute of the parent component is used to initialize the **@Prop** decorated variable of the child component. When the **count - costOfOneAttempt** button of the child component is touched, the value of the **@Prop** decorated variable **count** is changed. As a result, the **CountDownComponent** is rendered again. However, the change of the **count** value does not affect the **countDownStartValue** value of the parent component. In the following example, when the user presses **+1** or **-1**, the status of the parent component changes and the **build** method is executed again. In this case, a new **CountDownComponent** instance is created. The **countDownStartValue** attribute of the parent component is used to initialize the **@Prop** decorated variable of the child component. When the **count - costOfOneAttempt** button of the child component is touched, the value of the **@Prop** decorated variable **count** is changed. As a result, the **CountDownComponent** is rendered again. However, the change of the **count** value does not affect the **countDownStartValue** value of the parent component.
...@@ -494,7 +490,7 @@ struct CompA { ...@@ -494,7 +490,7 @@ struct CompA {
this.updateTotal() this.updateTotal()
} }
updateTotal(): number { updateTotal(): void {
let sum = 0; let sum = 0;
this.shopBasket.forEach((i) => { this.shopBasket.forEach((i) => {
sum += i sum += i
......
en/application-dev/reference/apis/js-apis-animator.md
浏览文件 @ bd0c62dc
...@@ -37,10 +37,10 @@ Creates an **Animator** object. ...@@ -37,10 +37,10 @@ Creates an **Animator** object.
```js ```js
let options = { let options = {
duration: 1500, duration: 1500,
easing: 'friction', easing: "friction",
delay: 0, delay: 0,
fill: 'forwards', fill: "forwards",
direction: 'normal', direction: "normal",
iterations: 3, iterations: 3,
begin: 200.0, begin: 200.0,
end: 400.0 end: 400.0
...@@ -80,10 +80,10 @@ For details about the error codes, see [Animator Error Codes](../errorcodes/erro ...@@ -80,10 +80,10 @@ For details about the error codes, see [Animator Error Codes](../errorcodes/erro
```js ```js
let options = { let options = {
duration: 1500, duration: 1500,
easing: 'friction', easing: "friction",
delay: 0, delay: 0,
fill: 'forwards', fill: "forwards",
direction: 'normal', direction: "normal",
iterations: 3, iterations: 3,
begin: 200.0, begin: 200.0,
end: 400.0 end: 400.0
...@@ -99,7 +99,7 @@ try { ...@@ -99,7 +99,7 @@ try {
play(): void play(): void
Plays this animation. Plays this animation. The animation retains the previous playback state. For example, if the animation is set to **reverse** and paused, it will remain in **reverse** when resumed.
**System capability**: SystemCapability.ArkUI.ArkUI.Full **System capability**: SystemCapability.ArkUI.ArkUI.Full
...@@ -247,16 +247,16 @@ Defines animator options. ...@@ -247,16 +247,16 @@ Defines animator options.
**System capability**: SystemCapability.ArkUI.ArkUI.Full **System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description | | Name | Type | Mandatory| Description |
| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | | ---------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
| duration | number | Yes | Duration for playing the animation, in milliseconds. The default value is **0**. | | duration | number | Yes | Duration for playing the animation, in milliseconds. |
| easing | string | Yes | Animation interpolation curve. The default value is **ease**. | | easing | string | Yes | Animation interpolation curve. Only the following values are supported:<br>**"linear"**: The animation speed keeps unchanged.<br>**"ease"**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.<br>**"ease-in"**: The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.<br>**"ease-out"**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>**"ease-in-out"**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.<br>**"fast-out-slow-in"**: The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).<br>**"linear-out-slow-in"**: The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).<br>**"friction"**: The animation uses the damping cubic-bezier curve (0.2, 0.0, 0.2, 1.0).<br>**"extreme-deceleration"**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).<br>**"rhythm"**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).<br>**"sharp"**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).<br>**"smooth"**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).<br>**cubic-bezier(x1, y1, x2, y2)**: The animation uses the defined cubic-bezier curve, where the value of the input parameters must range from 0 to 1.<br>**steps(number, step-position)**: The animation uses a step curve. The **number** must be set and only an integer is supported. **step-position** is optional. It can be set to **start** or **end**. The default value is **end**.|
| delay | number | Yes | Animation delay duration, in milliseconds. The default value is **0**, indicating that there is no delay. | | delay | number | Yes | Animation delay duration, in milliseconds. Value **0** means that there is no delay. |
| fill | "none" \| "forwards" \| "backwards" \| "both" | Yes | State of the animated target after the animation is executed. The default value is **none**, which means that the target will retain its end state (defined by the last keyframe) after the animation is executed.| | fill | "none" \| "forwards" \| "backwards" \| "both" | Yes | State of the animated target after the animation is executed.<br>**"none"**: No style is applied to the target before or after the animation is executed.<br>**"forwards"**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.<br>**"backwards"**: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used.<br>**"both"**: The animation follows the **forwards** and **backwards** rules.|
| direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | Yes | Animation playback mode. The default value is **normal**. | | direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | Yes | Animation playback mode.<br>**"normal"**: plays the animation in forward loop mode.<br>**"reverse"**: plays the animation in reverse loop mode.<br>**"alternate"**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.<br>**"alternate-reverse"**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.|
| iterations | number | Yes | Number of times that the animation is played. The default value is **1**. The value **0** means not to play the animation, and **-1** means to play the animation for an unlimited number of times. | | iterations | number | Yes | Number of times that the animation is played. The value **0** means not to play the animation, and **-1** means to play the animation for an unlimited number of times.<br>**NOTE**<br>If this parameter is set to a negative value other than **-1**, the value is invalid. In this case, the animation is played once.|
| begin | number | Yes | Start point of the animation interpolation. The default value is 0. | | begin | number | Yes | Start point of the animation interpolation. |
| end | number | Yes | End point of animation interpolation. The default value is 1. | | end | number | Yes | End point of animation interpolation. |
## Example ## Example
...@@ -280,9 +280,9 @@ export default { ...@@ -280,9 +280,9 @@ export default {
onInit() { onInit() {
let options = { let options = {
duration: 1500, duration: 1500,
easing: 'friction', easing: "friction",
delay: 0, delay: 0,
fill: 'forwards', fill: "forwards",
direction: "normal", direction: "normal",
iterations: 2, iterations: 2,
begin: 200.0, begin: 200.0,
...@@ -293,10 +293,10 @@ export default { ...@@ -293,10 +293,10 @@ export default {
Show() { Show() {
let options1 = { let options1 = {
duration: 1500, duration: 1500,
easing: 'friction', easing: "friction",
delay: 0, delay: 0,
fill: 'forwards', fill: "forwards",
direction: 'normal', direction: "normal",
iterations: 2, iterations: 2,
begin: 0, begin: 0,
end: 400.0 end: 400.0
...@@ -336,10 +336,10 @@ struct AnimatorTest { ...@@ -336,10 +336,10 @@ struct AnimatorTest {
let _this = this let _this = this
this.backAnimator = animator.create({ this.backAnimator = animator.create({
duration: 2000, duration: 2000,
easing: 'ease', easing: "ease",
delay: 0, delay: 0,
fill: 'none', fill: "none",
direction: 'normal', direction: "normal",
iterations: 1, iterations: 1,
begin: 100, begin: 100,
end: 200 end: 200
...@@ -444,10 +444,10 @@ struct AnimatorTest { ...@@ -444,10 +444,10 @@ struct AnimatorTest {
this.flag = false this.flag = false
this.backAnimator.reset({ this.backAnimator.reset({
duration: 5000, duration: 5000,
easing: 'ease-in', easing: "ease-in",
delay: 0, delay: 0,
fill: 'none', fill: "none",
direction: 'normal', direction: "normal",
iterations: 4, iterations: 4,
begin: 100, begin: 100,
end: 300 end: 300
...@@ -513,10 +513,10 @@ This API is deprecated since API version 9. You are advised to use [create<sup>9 ...@@ -513,10 +513,10 @@ This API is deprecated since API version 9. You are advised to use [create<sup>9
```js ```js
let options = { let options = {
duration: 1500, duration: 1500,
easing: 'friction', easing: "friction",
delay: 0, delay: 0,
fill: 'forwards', fill: "forwards",
direction: 'normal', direction: "normal",
iterations: 3, iterations: 3,
begin: 200.0, begin: 200.0,
end: 400.0 end: 400.0
......
en/application-dev/reference/apis/js-apis-router.md
浏览文件 @ bd0c62dc
...@@ -472,9 +472,9 @@ Describes the page routing state. ...@@ -472,9 +472,9 @@ Describes the page routing state.
| name | string | No | Name of the current page, that is, the file name. | | name | string | No | Name of the current page, that is, the file name. |
| path | string | Yes | Path of the current page. | | path | string | Yes | Path of the current page. |
## router.enableBackPageAlert<sup>9+</sup> ## router.showAlertBeforeBackPage<sup>9+</sup>
enableBackPageAlert(options: EnableAlertOptions): void showAlertBeforeBackPage(options: EnableAlertOptions): void
Enables the display of a confirm dialog box before returning to the previous page. Enables the display of a confirm dialog box before returning to the previous page.
...@@ -498,11 +498,11 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -498,11 +498,11 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
```js ```js
try { try {
router.enableBackPageAlert({ router.showAlertBeforeBackPage({
message: 'Message Info' message: 'Message Info'
}); });
} catch(error) { } catch(error) {
console.error(`enableBackPageAlert failed, code is ${error.code}, message is ${error.message}`); console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`);
} }
``` ```
## EnableAlertOptions ## EnableAlertOptions
...@@ -515,9 +515,9 @@ Describes the confirm dialog box. ...@@ -515,9 +515,9 @@ Describes the confirm dialog box.
| ------- | ------ | ---- | -------- | | ------- | ------ | ---- | -------- |
| message | string | Yes | Content displayed in the confirm dialog box.| | message | string | Yes | Content displayed in the confirm dialog box.|
## router.disableAlertBeforeBackPage ## router.hideAlertBeforeBackPage<sup>9+</sup>
disableAlertBeforeBackPage(): void hideAlertBeforeBackPage(): void
Disables the display of a confirm dialog box before returning to the previous page. Disables the display of a confirm dialog box before returning to the previous page.
...@@ -526,7 +526,7 @@ Disables the display of a confirm dialog box before returning to the previous pa ...@@ -526,7 +526,7 @@ Disables the display of a confirm dialog box before returning to the previous pa
**Example** **Example**
```js ```js
router.disableAlertBeforeBackPage(); router.hideAlertBeforeBackPage();
``` ```
## router.getParams ## router.getParams
...@@ -573,7 +573,7 @@ Enumerates the routing modes. ...@@ -573,7 +573,7 @@ Enumerates the routing modes.
| Name | Description | | Name | Description |
| -------- | ------------------------------------------------------------ | | -------- | ------------------------------------------------------------ |
| Standard | Standard mode.<br>The target page is added to the top of the page stack, regardless of whether a page with the same URL exists in the stack.| | Standard | Standard mode.<br>The target page is added to the top of the page stack, regardless of whether a page with the same URL exists in the stack.<br>**NOTE**<br>If the routing mode is not used, the page is redirected to in standard mode.|
| Single | Singleton mode.<br>If the URL of the target page already exists in the page stack, the page closest to the top of the stack is moved as a new page to the top of the stack.<br>If the URL of the target page does not exist in the page stack, the page is redirected to in standard mode.| | Single | Singleton mode.<br>If the URL of the target page already exists in the page stack, the page closest to the top of the stack is moved as a new page to the top of the stack.<br>If the URL of the target page does not exist in the page stack, the page is redirected to in standard mode.|
## Examples ## Examples
...@@ -748,7 +748,7 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void ...@@ -748,7 +748,7 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void
Enables the display of a confirm dialog box before returning to the previous page. Enables the display of a confirm dialog box before returning to the previous page.
This API is deprecated since API version 9. You are advised to use [enableBackPageAlert<sup>9+</sup>](#routerenablebackpagealert9) instead. This API is deprecated since API version 9. You are advised to use [showAlertBeforeBackPage<sup>9+</sup>](#routershowalertbeforebackpage9) instead.
**System capability**: SystemCapability.ArkUI.ArkUI.Full **System capability**: SystemCapability.ArkUI.ArkUI.Full
...@@ -765,3 +765,19 @@ This API is deprecated since API version 9. You are advised to use [enableBackPa ...@@ -765,3 +765,19 @@ This API is deprecated since API version 9. You are advised to use [enableBackPa
message: 'Message Info' message: 'Message Info'
}); });
``` ```
## router.disableAlertBeforeBackPage<sup>(deprecated)</sup>
disableAlertBeforeBackPage(): void
Disables the display of a confirm dialog box before returning to the previous page.
This API is deprecated since API version 9. You are advised to use [hideAlertBeforeBackPage<sup>9+</sup>](#routerhidealertbeforebackpage9) instead.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Example**
```js
router.disableAlertBeforeBackPage();
```
en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ bd0c62dc
...@@ -70,39 +70,20 @@ struct ImageAnimatorExample { ...@@ -70,39 +70,20 @@ struct ImageAnimatorExample {
ImageAnimator() ImageAnimator()
.images([ .images([
{ {
src: $r('app.media.img1'), src: $r('app.media.img1')
duration: 500,
width: 170,
height: 120,
top: 0,
left: 0
}, },
{ {
src: $r('app.media.img2'), src: $r('app.media.img2')
duration: 500,
width: 170,
height: 120,
top: 0,
left: 170
}, },
{ {
src: $r('app.media.img3'), src: $r('app.media.img3')
duration: 500,
width: 170,
height: 120,
top: 120,
left: 170
}, },
{ {
src: $r('app.media.img4'), src: $r('app.media.img4')
duration: 500,
width: 170,
height: 120,
top: 120,
left: 0
} }
]) ])
.state(this.state).reverse(this.reverse).fixedSize(false) .duration(2000)
.state(this.state).reverse(this.reverse)
.fillMode(FillMode.None).iterations(this.iterations).width(340).height(240) .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
.margin({ top: 100 }) .margin({ top: 100 })
.onStart(() => { .onStart(() => {
......
en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
浏览文件 @ bd0c62dc
...@@ -39,9 +39,10 @@ Rating(options?: { rating: number, indicator?: boolean }) ...@@ -39,9 +39,10 @@ Rating(options?: { rating: number, indicator?: boolean })
| -------- | -------- | | -------- | -------- |
| onChange(callback:(value: number) =&gt; void) | Triggered when the rating value changes.| | onChange(callback:(value: number) =&gt; void) | Triggered when the rating value changes.|
## Example ## Example
### Example 1
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -95,3 +96,37 @@ struct RatingExample { ...@@ -95,3 +96,37 @@ struct RatingExample {
``` ```
![rating](figures/rating.gif) ![rating](figures/rating.gif)
### Example 2
```ts
// xxx.ets
@Entry
@Component
struct RatingExample {
@State rating: number = 3.5
build() {
Column() {
Rating({ rating: this.rating, indicator: false })
.stars(5)
.stepSize(0.5)
.starStyle({
backgroundUri: '/common/imag1.png', // The common folder is at the same level as pages.
foregroundUri: '/common/imag2.png',
secondaryUri: '/common/imag3.png'
})
.margin({ top: 24 })
.onChange((value: number) => {
this.rating = value
})
Text('current score is ' + this.rating)
.fontSize(16)
.fontColor('rgba(24,36,49,0.60)')
.margin({ top: 16 })
}.width('100%').height('100%').backgroundColor('#F1F3F5')
}
}
```
![rating1](figures/rating1.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ bd0c62dc
...@@ -87,7 +87,7 @@ struct SearchExample { ...@@ -87,7 +87,7 @@ struct SearchExample {
.searchButton('SEARCH') .searchButton('SEARCH')
.width(400) .width(400)
.height(40) .height(40)
.backgroundColor(Color.White) .backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey) .placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 }) .placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 }) .textFont({ size: 14, weight: 400 })
......
en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ bd0c62dc
...@@ -75,7 +75,7 @@ struct TextTimerExample { ...@@ -75,7 +75,7 @@ struct TextTimerExample {
build() { build() {
Column() { Column() {
TextTimer({ controller: this.textTimerController, isCountDown: true, count: 30000 }) TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
.format(this.format) .format(this.format)
.fontColor(Color.Black) .fontColor(Color.Black)
.fontSize(50) .fontSize(50)
......
en/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ bd0c62dc
...@@ -35,7 +35,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -35,7 +35,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.| | divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**| | scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
| cachedCount | number | Number of list items or list item groups to be preloaded. A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**| | cachedCount | number | Number of list items or list item groups to be preloaded. A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**|
| editMode<sup>(deprecated)</sup> | boolean | Whether to enter editing mode.<br>This API is deprecated since API version 9.<br>Default value: **false**| | editMode | boolean | Whether to enter editing mode.<br>Default value: **false** |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.<br>Default value: **EdgeEffect.Spring**| | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.<br>Default value: **EdgeEffect.Spring**|
| chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.| | chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.|
| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.| | multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.|
...@@ -65,12 +65,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -65,12 +65,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onItemDelete<sup>(deprecated)</sup>(event: (index: number) => boolean) | Triggered when a list item is deleted.<br>This API is deprecated since API version 9.<br>- **index**: index of the deleted list item.| | onItemDelete(event: (index: number) => boolean) | Triggered when a list item is deleted.<br>- **index**: index of the deleted list item. |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.<br>- **scrollOffset**: scroll offset.<br>- **[scrollState](#scrollstate)**: current scroll state.| | onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.<br>- **scrollOffset**: scroll offset.<br>- **[scrollState](#scrollstate)**: current scroll state.|
| onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.<br>When calculating the index value, the **\<ListItemGroup>** accounts for one index value as a whole, and the index values of the list items within are not calculated.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.| | onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.<br>When calculating the index value, the **\<ListItemGroup>** accounts for one index value as a whole, and the index values of the list items within are not calculated.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.|
| onReachStart(event: () => void) | Triggered when the list reaches the start position.| | onReachStart(event: () => void) | Triggered when the list reaches the start position.|
| onReachEnd(event: () => void) | Triggered when the list reaches the end position.| | onReachEnd(event: () => void) | Triggered when the list reaches the end position.|
| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | 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.<br>- **dx**: amount by which the list will scroll in the horizontal direction.<br>- **dy**: amount by which the list will scroll in the horizontal direction.<br>- **dxRemain**: amount by which the list actually scrolls in the horizontal direction.<br>- **dyRemain**: amount by which the list actually scrolls in the vertical direction.| | onScrollFrameBegin<sup>9+</sup>(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.<br>\- **offset**: amount to scroll by.<br>\- **state**: current sliding status.<br>- **offsetRemain**: required amount to scroll by in the horizontal direction.|
| onScrollStart<sup>9+</sup>(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).|
| onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).| | onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).|
| onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.<br>- **from**: index of the item before moving.<br>- **to**: index of the item after moving.| | onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.<br>- **from**: index of the item before moving.<br>- **to**: index of the item after moving.|
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the dragged list element.| | onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the dragged list element.|
...@@ -89,7 +90,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -89,7 +90,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
> **NOTE** > **NOTE**
> >
> To enable the editable mode for a list, the following conditions must be met: (This feature is deprecated since API version 9.) > To enable the editable mode for a list, the following conditions must be met:
> >
> - **editMode** is set to **true**. > - **editMode** is set to **true**.
> >
...@@ -99,7 +100,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -99,7 +100,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
> >
> To enable dragging for a list item, the following conditions must be met: > To enable dragging for a list item, the following conditions must be met:
> >
> - **editMode** is set to **true**. (This is not required since API version 9.) > - **editMode** is set to **true**.
> >
> - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback. > - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback.
...@@ -112,8 +113,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -112,8 +113,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
@Component @Component
struct ListExample { struct ListExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State editFlag: boolean = false
build() { build() {
Stack({ alignContent: Alignment.TopStart }) {
Column() { Column() {
List({ space: 20, initialIndex: 0 }) { List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => { ForEach(this.arr, (item) => {
...@@ -121,22 +124,32 @@ struct ListExample { ...@@ -121,22 +124,32 @@ struct ListExample {
Text('' + item) Text('' + item)
.width('100%').height(100).fontSize(16) .width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
} }.editable(true)
}, item => item) }, item => item)
} }
.listDirection(Axis.Vertical) // Arrangement direction .listDirection(Axis.Vertical) // Arrangement direction
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider
.edgeEffect(EdgeEffect.Spring) // No effect when the list scrolls to the edge. .edgeEffect(EdgeEffect.None) // No effect when the list scrolls to the edge.
.chainAnimation(false) // No chained animations are displayed.
.onScrollIndex((firstIndex: number, lastIndex: number) => { .onScrollIndex((firstIndex: number, lastIndex: number) => {
console.info('first' + firstIndex) console.info('first' + firstIndex)
console.info('last' + lastIndex) console.info('last' + lastIndex)
}) })
.width('90%') .editMode(this.editFlag)
} .onItemDelete((index: number) => {
.width('100%') console.info(this.arr[index] + 'Delete')
.height('100%') this.arr.splice(index, 1)
.backgroundColor(0xDCDCDC) console.info(JSON.stringify(this.arr))
.padding({ top: 5 }) this.editFlag = false
return true
}).width('90%')
}.width('100%')
Button('edit list')
.onClick(() => {
this.editFlag = !this.editFlag
}).margin({ top: 5, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
} }
} }
``` ```
......
en/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @ bd0c62dc
...@@ -101,8 +101,7 @@ struct ListItemExample2 { ...@@ -101,8 +101,7 @@ struct ListItemExample2 {
Column() { Column() {
List({space:10}) { List({space:10}) {
ListItem() { ListItem() {
Text(this.message) { Text(this.message)
}
.width('100%') .width('100%')
.height(100) .height(100)
.fontSize(16) .fontSize(16)
...@@ -113,8 +112,7 @@ struct ListItemExample2 { ...@@ -113,8 +112,7 @@ struct ListItemExample2 {
.swipeAction({ end:this.itemEnd}) .swipeAction({ end:this.itemEnd})
ListItem() { ListItem() {
Text(this.message) { Text(this.message)
}
.width('100%') .width('100%')
.height(100) .height(100)
.fontSize(16) .fontSize(16)
......
en/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ bd0c62dc
...@@ -36,20 +36,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -36,20 +36,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Horizontal | Only horizontal scrolling is supported. | | Horizontal | Only horizontal scrolling is supported. |
| Vertical | Only vertical scrolling is supported. | | Vertical | Only vertical scrolling is supported. |
| None | Scrolling is disabled. | | None | Scrolling is disabled. |
| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.| | Free<sup>(deprecated)</sup> | Vertical or horizontal scrolling is supported.<br>This API is deprecated since API version 9. |
## Events ## Events
| Name | Description | | Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.| | onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\<Scroll>** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current scrolling status.<br>- **offsetRemain**: required amount to scroll by in the horizontal direction.|
| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. | | onScroll(event: (xOffset: number, yOffset: number) => void) | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge. | | onScrollEdge(event: (side: Edge) => void) | Triggered when scrolling reaches the edge. |
| onScrollEnd(event: () => void) | Invoked when scrolling stops. | | onScrollEnd(event: () => void) | Triggered when scrolling stops.<br>This event is deprecated since API version 9. Use the **onScrollStop** event instead. |
| onScrollStart<sup>9+</sup>(event: () => void) | Triggered when scrolling starts and is initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event will not be triggered if the scrolling is initiated by using [Scroller](#scroller).|
| onScrollStop<sup>9+</sup>(event: () => void) | Triggered when scrolling stops after the user's finger leaves the screen. This event will not be triggered if the scrolling is initiated by using [Scroller](#scroller).|
> **NOTE** > **NOTE**
> >
> If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**. > If the **onScrollFrameBegin** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**.
## Scroller ## Scroller
...@@ -76,7 +78,7 @@ Scrolls to the specified position. ...@@ -76,7 +78,7 @@ Scrolls to the specified position.
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| xOffset | Length | Yes | Horizontal scrolling offset. | | xOffset | Length | Yes | Horizontal scrolling offset. |
| yOffset | Length | Yes | Vertical scrolling offset. | | yOffset | Length | Yes | Vertical scrolling offset. |
| animation | {<br>duration: number,<br>curve: [Curve](ts-animatorproperty.md)<br>} | No | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.| | animation | {<br>duration: number,<br>curve: [Curve](ts-appendix-enums.md#curve)<br>} | No | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
### scrollEdge ### scrollEdge
...@@ -104,7 +106,7 @@ Scrolls to the next or previous page. ...@@ -104,7 +106,7 @@ Scrolls to the next or previous page.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ------------------------------ | | --------- | ------- | ---- | ------------------------------ |
| next | boolean | Yes | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.| | next | boolean | Yes | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical.<br> This API is deprecated since API version 9. | | direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical.<br>This API is deprecated since API version 9. |
### currentOffset ### currentOffset
...@@ -131,7 +133,7 @@ Scrolls to the item with the specified index. ...@@ -131,7 +133,7 @@ Scrolls to the item with the specified index.
> **NOTE** > **NOTE**
> >
> Only the **\<Grid>**, **\<List>**, and **\<WaterFlow>** components are supported. > Only the **\<Grid>** and **\<List>** components are supported.
**Parameters** **Parameters**
...@@ -268,13 +270,13 @@ struct NestedScroll { ...@@ -268,13 +270,13 @@ struct NestedScroll {
.onReachEnd(() => { .onReachEnd(() => {
this.listPosition = 2 this.listPosition = 2
}) })
.onScrollBegin((dx: number, dy: number) => { .onScrollFrameBegin((offset: number) => {
if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) { if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) {
this.scrollerForScroll.scrollBy(0, -dy) this.scrollerForScroll.scrollBy(0, offset)
return { dxRemain: dx, dyRemain: 0 } return { offsetRemain: 0 }
} }
this.listPosition = 1 this.listPosition = 1
return { dxRemain: dx, dyRemain: dy }; return { offsetRemain: offset };
}) })
Text("Scroll Area") Text("Scroll Area")
......
en/application-dev/ui/ui-ts-layout-grid.md
浏览文件 @ bd0c62dc
...@@ -159,7 +159,7 @@ Grid() { ...@@ -159,7 +159,7 @@ Grid() {
.fontSize(16) .fontSize(16)
.textAlign(TextAlign.Center) .textAlign(TextAlign.Center)
.textStyle() .textStyle()
}.rowStart(2).rowEnd(3) // The grid item spans the second and third columns. }.rowStart(2).rowEnd(3) // The grid item spans the second and third rows.
GridItem() { GridItem() {
Text('4') Text('4')
......
en/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ bd0c62dc
# Media Query # Media Query
[Media queries](../reference/apis/js-apis-mediaquery.md) are at the core of responsive design and widely used on mobile devices. You can use them to create different application styles depending on the device type or device state. Specifically, media queries allow you to:
Media queries are widely used on mobile devices. You can use them to modify the application style based on the device type or specific features and device parameters (such as the screen resolution). Specifically, media queries allow you to: 1. Design a layout style based on the device and application attributes (such as display area, dark light color, and resolution).
1. Design a layout style based on the device and app attributes.
2. Update the page layout to adapt to dynamic screen changes (for example, screen splitting or switching between landscape and portrait modes). 2. Update the page layout to adapt to dynamic screen changes (for example, screen splitting or switching between landscape and portrait modes).
## Usage ## 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.
First, import the mediaquery module, as shown below: First, import the **mediaquery** module, as shown below:
```ts ```ts
import mediaquery from '@ohos.mediaquery' import mediaquery from '@ohos.mediaquery'
``` ```
Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below: Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below:
```ts ```ts
listener = mediaquery.matchMediaSync('(orientation: landscape)') listener = mediaquery.matchMediaSync('(orientation: landscape)')
``` ```
Finally, register the 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:
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:
```ts ```ts
onPortrait(mediaQueryResult) { onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) { if (mediaQueryResult.matches) {
...@@ -33,19 +37,25 @@ onPortrait(mediaQueryResult) { ...@@ -33,19 +37,25 @@ onPortrait(mediaQueryResult) {
listener.on('change', onPortrait) listener.on('change', onPortrait)
``` ```
## Syntax of Media Query Conditions ## Media Query Conditions
The media query condition consists of the media type (optional), logical operator, and media feature. The logical operator is used to connect different media types and media features. A media feature must be enclosed in parentheses (). There may be multiple media features. The specific rules are as follows:
### Syntax
``` ```
[media-type] [and|not|only] [(media-feature)] [media-type] [and|not|only] [(media-feature)]
``` ```
Examples are as follows: Examples are as follows:
`screen and (round-screen: true)` // The query is valid when the device screen is round. **screen and (round-screen: true)**: The query is valid when the device screen is round.
`(max-height: 800)` // The query is valid when the height does not exceed 800. **(max-height: 800)**: The query is valid when the height is less than or equal to 800.
`(height <= 800)` // The query is valid when the height does not exceed 800. **(height <= 800)**: The query is valid when the height is less than or equal to 800.
`screen and (device-type: tv) or (resolution < 2)` // The query is valid only when all media features are true. **screen and (device-type: tv) or (resolution < 2)**: The query is valid when the device type is TV or the device resolution is less than 2. This is a multi-condition query that contains multiple media features.
### media-type ### media-type
...@@ -53,37 +63,35 @@ Examples are as follows: ...@@ -53,37 +63,35 @@ Examples are as follows:
| ------ | -------------- | | ------ | -------------- |
| screen | Media query based on screen-related parameters.| | screen | Media query based on screen-related parameters.|
### Media Logic Operation (and|or|not|only)
### Media Logic Operation (and|not|only)
You can use logical operators (**and**, **or**, **not**, and **only**) to compose complex media queries. You can also combine them using comma (,). The following table describes the operators. You can use logical operators (**and**, **or**, **not**, and **only**) to compose complex media queries. You can also combine them using comma (,). The following table describes the operators.
**Table 1** Media logical operators **Table 1** Media logical operators
| Type | Description | | 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.<br>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.| | 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.<br>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.|
| 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.<br>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. | | 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.<br>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.|
| 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.<br>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.<br>**NOTE**<br>When the **not** operator is used, the media type must be specified. | | 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.<br>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.<br>You must specify the media type when using the **not** operator.|
| 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:<br>screen and (min-height: 50)<br>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.<br>**NOTE**<br>When the **only** 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:<br>screen and (min-height: 50)<br>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.<br>You must specify the media type when using the **only** operator.|
| ,(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.<br>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.| | , (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.<br>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.|
At MediaQuery Level 4, range query is imported so that you can use the operators including &lt;=, &gt;=, &lt;, and &gt; besides the max- and min-operators. At MediaQuery Level 4, range query is imported so that you can use the operators including &lt;=, &gt;=, &lt;, and &gt; besides the max- and min-operators.
**Table 2** Logical operators for range query **Table 2** Logical operators for range query
| Type | Description | | Type | Description |
| ----- | ---------------------------------------- | | ----- | ---------------------------------------- |
| &lt;= | Less than or equal to, for example, **screen and (50 &lt;= height)**.| | &lt; = | Less than or equal to, for example, **screen and (50 &lt;= height)**.|
| &gt;= | Greater than or equal to, for example, **screen and (600 &gt;= height)**.| | &gt; = | Greater than or equal to, for example, **screen and (600 &gt;= height)**.|
| &lt; | Less than, for example, **screen and (50 &lt; height)**.| | &lt; | Less than, for example, **screen and (50 &lt; height)**.|
| &gt; | Greater than, for example, **screen and (600 &gt; height)**.| | &gt; | Greater than, for example, **screen and (600 &gt; height)**.|
### media-feature ### media-feature
| Type | Description | | Type | Description |
| ----------------- | ---------------------------------------- | | ----------------- | ------------------------------------------------------------ |
| height | Height of the display area on the application page. | | height | Height of the display area on the application page. |
| min-height | Minimum 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. | | max-height | Maximum height of the display area on the application page. |
...@@ -100,12 +108,13 @@ At MediaQuery Level 4, range query is imported so that you can use the operators ...@@ -100,12 +108,13 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
| device-width | Width of the device. | | device-width | Width of the device. |
| min-device-width | Minimum width of the device. | | min-device-width | Minimum width of the device. |
| max-device-width | Maximum width of the device. | | max-device-width | Maximum width of the device. |
| device-type | Type of the device.<br/>Value range: **default** |
| round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite. | | 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. | | 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 ## Example Scenario
Use media queries to apply different content and styles to the page text when the screen is switched between landscape and portrait modes. In the following example, media queries are used to apply different content and styles to the page text when the screen is switched between landscape and portrait modes.
```ts ```ts
import mediaquery from '@ohos.mediaquery' import mediaquery from '@ohos.mediaquery'
...@@ -142,8 +151,11 @@ struct MediaQueryExample { ...@@ -142,8 +151,11 @@ struct MediaQueryExample {
} }
} }
``` ```
When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.<br>
When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.
![en-us_image_0000001262954829](figures/en-us_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.<br> 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) ![en-us_image_0000001263074739](figures/en-us_image_0000001263074739.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或