Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 101b76b0 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (19556) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 2e62eefd
隐藏空白更改
内联 并排
Showing with 2383 addition and 232 deletion
en/application-dev/application-models/common-event-static-subscription.md
浏览文件 @ 101b76b0
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
## When to Use ## When to Use
A static subscriber is started once it receives a target event published by the system or application. At the same time, the [onReceiveEvent()](../reference/apis/js-apis-application-staticSubscriberExtensionAbility.md#staticsubscriberextensionabilityonreceiveevent) callback is triggered. A static subscriber is started once it receives a target event published by the system or application. At the same time, the [onReceiveEvent()](../reference/apis/js-apis-application-staticSubscriberExtensionAbility.md#staticsubscriberextensionabilityonreceiveevent) callback is triggered, in which you can implement the service logic. For example, if an application needs to execute some initialization tasks during device power-on, the application can subscribe to the power-on event in static mode. After receiving the power-on event, the application is started to execute the initialization tasks.
You can implement the service logic in the [onReceiveEvent()](../reference/apis/js-apis-application-staticSubscriberExtensionAbility.md#staticsubscriberextensionabilityonreceiveevent) callback. For example, if an application needs to execute some initialization tasks during device power-on, the application can subscribe to the power-on event in static mode. After receiving the power-on event, the application is started to execute the initialization tasks.
Subscribing to a common event in static mode is achieved by configuring a declaration file and implementing a class that inherits from [StaticSubscriberExtensionAbility](../reference/apis/js-apis-application-staticSubscriberExtensionAbility.md). Subscribing to a common event in static mode is achieved by configuring a declaration file and implementing a class that inherits from [StaticSubscriberExtensionAbility](../reference/apis/js-apis-application-staticSubscriberExtensionAbility.md).
...@@ -18,7 +16,7 @@ Subscribing to a common event in static mode is achieved by configuring a declar ...@@ -18,7 +16,7 @@ Subscribing to a common event in static mode is achieved by configuring a declar
To declare a static subscriber, create an ExtensionAbility, which is derived from the **StaticSubscriberExtensionAbility** class, in the project. To declare a static subscriber, create an ExtensionAbility, which is derived from the **StaticSubscriberExtensionAbility** class, in the project.
You can implement service logic in the **onReceiveEvent()** callback. You can implement service logic in the [**onReceiveEvent()**](../reference/apis/js-apis-application-staticSubscriberExtensionAbility.md#staticsubscriberextensionabilityonreceiveevent) callback.
```ts ```ts
import StaticSubscriberExtensionAbility from '@ohos.application.StaticSubscriberExtensionAbility' import StaticSubscriberExtensionAbility from '@ohos.application.StaticSubscriberExtensionAbility'
...@@ -93,23 +91,24 @@ Subscribing to a common event in static mode is achieved by configuring a declar ...@@ -93,23 +91,24 @@ Subscribing to a common event in static mode is achieved by configuring a declar
- **permission**: permission required for the publisher. If a publisher without the required permission attempts to publish an event, the event is regarded as invalid and will not be published. - **permission**: permission required for the publisher. If a publisher without the required permission attempts to publish an event, the event is regarded as invalid and will not be published.
- **events**: list of target events to subscribe to. - **events**: list of target events to subscribe to.
4. Modify the [preset configuration file](https://gitee.com/openharmony/vendor_hihope/blob/master/rk3568/preinstall-config/install_list_permissions.json) of the device, that is, the **/system/etc/app/install_list_permission.json** file on the device. When the device is started, this file is read. During application installation, the common event type specified by **allowCommonEvent** in the file is authorized. The **install_list_permission.json** file contains the following fields: 4. Modify the [preset configuration file](https://gitee.com/openharmony/vendor_hihope/blob/master/rk3568/preinstall-config/install_list_capability.json) of the device, that is, the **/system/etc/app/install_list_capability.json** file on the device. When the device is started, this file is read. During application installation, the common event type specified by **allowCommonEvent** in the file is authorized. The **install_list_capability.json** file contains the following fields:
- **bundleName**: bundle name of the application. - **bundleName**: bundle name of the application.
- **app_signature**: fingerprint information of the application. For details, see [Application Privilege Configuration Guide](../../device-dev/subsystems/subsys-app-privilege-config-guide.md#configuration-in-install_list_capabilityjson). - **app_signature**: fingerprint information of the application. For details, see [Configuration in install_list_capability.json](../../device-dev/subsystems/subsys-app-privilege-config-guide.md#configuration-in-install_list_capabilityjson).
- **allowCommonEvent**: type of common event that can be started by static broadcast. - **allowCommonEvent**: type of common event that can be started by static broadcast.
> **NOTE**
>
> The **install_list_permissions.json** file is available only for preinstalled applications.
```json ```json
[ [
...
{ {
"bundleName": "com.example.myapplication", "bundleName": "com.example.myapplication", // Bundle name.
"app_signature": ["****"], "app_signature": ["****"], // Fingerprint information.
"allowCommonEvent": ["usual.event.A", "usual.event.B"] "allowCommonEvent": ["usual.event.A", "usual.event.B"] // Type of common event that can be started by static broadcast.
} }
] ]
``` ```
> **NOTE**
>
> The **install_list_capability.json** file is available only for preinstalled applications.
en/application-dev/reference/apis/js-apis-animator.md
浏览文件 @ 101b76b0
...@@ -7,7 +7,10 @@ The **Animator** module provides APIs for applying animation effects, including ...@@ -7,7 +7,10 @@ The **Animator** module provides APIs for applying animation effects, including
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> >
> This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md). > This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md).
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the [createAnimator](./js-apis-arkui-UIContext.md#createanimator) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the UI context.
## Modules to Import ## Modules to Import
......
en/application-dev/reference/apis/js-apis-arkui-UIContext.md 0 → 100644
浏览文件 @ 101b76b0
# @ohos.arkui.UIContext (UIContext)
In the stage model, a window stage or window can use the **loadContent** API to load pages, create a UI instance, and render page content to the associated window. Naturally, UI instances and windows are associated on a one-by-one basis. Some global UI APIs are executed in the context of certain UI instances. When calling these APIs, you must identify the UI context, and consequently UI instance, by tracing the call chain. If these APIs are called on a non-UI page or in some asynchronous callback, the current UI context may fail to be identified, resulting in failure in API execution.
**@ohos.window** adds the [getUIContext](./js-apis-window.md#getuicontext10) API in API version 10 for obtaining the **UIContext** object of a UI instance. The API provided by the **UIContext** object can be directly applied to the corresponding UI instance.
> **NOTE**
>
> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
## UIContext
In the following API examples, you must first use [getUIContext()](./js-apis-window.md#getuicontext10) in **@ohos.window** to obtain a **UIContext** instance, and then call the APIs using the obtained instance. In this document, the **UIContext** instance is represented by **uiContext**.
### getFont
getFont(): Font
Obtains a **Font** object.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Return value**
| Type | Description |
| ----- | ----------------- |
| [Font](#font) | **Font** object.|
**Example**
```ts
uiContext.getFont();
```
### getMediaQuery
getMediaQuery(): MediaQuery
Obtains a **MediaQuery** object.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Return value**
| Type | Description |
| ----- | ----------------- |
| [MediaQuery](#mediaquery) | **MediaQuery** object.|
**Example**
```ts
uiContext.getMediaQuery();
```
### getRouter
getRouter(): Router
Obtains a **Router** object.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Return value**
| Type | Description |
| ----- | ----------------- |
| [Router](#router) | **Router** object.|
**Example**
```ts
uiContext.getRouter();
```
### getPromptAction
getPromptAction(): PromptAction
Obtains a **PromptAction** object.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Return value**
| Type | Description |
| ----- | ----------------- |
| [PromptAction](#promptaction) | **PromptAction** object.|
**Example**
```ts
uiContext.getPromptAction();
```
### animateTo
animateTo(value: AnimateParam, event: () => void): void
Applies a transition animation for state changes.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Name | Type | Mandatory | Description |
| ---------------- | ------------ | -------------------- | -------------------- |
| value | [AnimateParam](../arkui-ts/ts-explicit-animation.md#animateparam) | Yes| Animation settings.|
| event | () => void | Yes| Closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct AnimateToExample {
@State widthSize: number = 250
@State heightSize: number = 100
@State rotateAngle: number = 0
private flag: boolean = true
build() {
Column() {
Button('change size')
.width(this.widthSize)
.height(this.heightSize)
.margin(30)
.onClick(() => {
if (this.flag) {
uiContext.animateTo({
duration: 2000,
curve: Curve.EaseOut,
iterations: 3,
playMode: PlayMode.Normal,
onFinish: () => {
console.info('play end')
}
}, () => {
this.widthSize = 150
this.heightSize = 60
})
} else {
uiContext.animateTo({}, () => {
this.widthSize = 250
this.heightSize = 100
})
}
this.flag = !this.flag
})
Button('change rotate angle')
.margin(50)
.rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
.onClick(() => {
uiContext.animateTo({
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.Alternate,
onFinish: () => {
console.info('play end')
}
}, () => {
this.rotateAngle = 90
})
})
}.width('100%').margin({ top: 5 })
}
}
```
### showAlertDialog
showAlertDialog(options: AlertDialogParamWithConfirm | AlertDialogParamWithButtons): void
Shows an alert dialog box.
**Parameters**
| Name | Type | Description|
| ---- | --------------- | -------- |
| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm)&nbsp;\|&nbsp;[AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons) | Defines and displays the **\<AlertDialog>** component.|
**Example**
```ts
uiContext.showAlertDialog(
{
title: 'title',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -20 },
gridCount: 3,
confirm: {
value: 'button',
action: () => {
console.info('Button-clicking callback')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
```
### showActionSheet
showActionSheet(value: ActionSheetOptions): void
Defines and shows the action sheet.
**ActionSheetOptions parameters**
| Name | Type | Mandatory | Description |
| ---------- | -------------------------- | ------- | ----------------------------- |
| title | [Resource](../arkui-ts/ts-types.md#resource)&nbsp;\|&nbsp;string | Yes | Title of the dialog box.|
| message | [Resource](../arkui-ts/ts-types.md#resource)&nbsp;\|&nbsp;string | Yes | Content of the dialog box. |
| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**|
| confirm | {<br>value:&nbsp;[ResourceStr](../arkui-ts/ts-types.md#resourcestr),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br>} | No | Text content of the confirm button and callback upon button clicking.<br>Default value:<br>**value**: button text.<br>**action**: callback upon button clicking.|
| cancel | ()&nbsp;=&gt;&nbsp;void | No | Callback invoked when the dialog box is closed after the overlay is clicked. |
| alignment | [DialogAlignment](../arkui-ts/ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Bottom**|
| offset | {<br>dx:&nbsp;[Length](../arkui-ts/ts-types.md#length),<br>dy:&nbsp;[Length](../arkui-ts/ts-types.md#length)<br>} | No | Offset of the dialog box relative to the alignment position.{<br>dx:&nbsp;0,<br>dy:&nbsp;0<br>} |
| sheets | Array&lt;SheetInfo&gt; | Yes | Options in the dialog box. Each option supports the image, text, and callback.|
**SheetInfo parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ----------------- |
| title | [ResourceStr](../arkui-ts/ts-types.md#resourcestr) | Yes | Text of the option. |
| icon | [ResourceStr](../arkui-ts/ts-types.md#resourcestr) | No | Sheet icon. By default, no icon is displayed. |
| action | ()=&gt;void | Yes | Callback when the sheet is selected.|
**Example**
```ts
uiContext.showActionSheet({
title: 'ActionSheet title',
message: 'message',
autoCancel: true,
confirm: {
value: 'Confirm button',
action: () => {
console.log('Get Alert Dialog handled')
}
},
cancel: () => {
console.log('actionSheet canceled')
},
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -10 },
sheets: [
{
title: 'apples',
action: () => {
console.log('apples')
}
},
{
title: 'bananas',
action: () => {
console.log('bananas')
}
},
{
title: 'pears',
action: () => {
console.log('pears')
}
}
]
})
```
### showDatePickerDialog
showDatePickerDialog(options: DatePickerDialogOptions): void
Shows a date picker dialog box.
**DatePickerDialogOptions parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| start | Date | No| Date('1970-1-1') | Start date of the picker.|
| end | Date | No| Date('2100-12-31') | End date of the picker.|
| selected | Date | No| Current system date| Selected date.|
| lunar | boolean | No| false | Whether to display the lunar calendar.|
| showTime | boolean | No| false | Whether to display the time item.|
| useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
| disappearTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width for the top and bottom items.|
| textStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of all items except the top, bottom, and selected items.|
| selectedTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of the selected item.|
| onAccept | (value: [DatePickerResult](../arkui-ts/ts-basic-components-datepicker.md#datepickerresult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [DatePickerResult](../arkui-ts/ts-basic-components-datepicker.md#datepickerresult)) => void | No| - | Callback invoked when the selected item in the picker changes.|
**Example**
```ts
let selectedDate: Date = new Date("2010-1-1")
uiContext.showDatePickerDialog({
start: new Date("2000-1-1"),
end: new Date("2100-12-31"),
selected: selectedDate,
onAccept: (value: DatePickerResult) => {
// Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed.
selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
},
onChange: (value: DatePickerResult) => {
console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
}
})
```
### showTimePickerDialog
showTimePickerDialog(options: TimePickerDialogOptions): void
Shows a time picker dialog box.
**TimePickerDialogOptions parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| selected | Date | No| Selected time.<br>Default value: current system time|
| useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**|
| disappearTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.|
| textStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.|
| selectedTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.|
| onAccept | (value: [TimePickerResult](../arkui-ts/ts-basic-components-timepicker.md#timepickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TimePickerResult](../arkui-ts/ts-basic-components-timepicker.md#timepickerresult)) => void | No| Callback invoked when the selected time changes.|
**Example**
```ts
let selectTime: Date = new Date('2020-12-25T08:30:00')
uiContext.showTimePickerDialog({
selected: this.selectTime,
onAccept: (value: TimePickerResult) => {
// Set selectTime to the time when the OK button is clicked. In this way, when the dialog box is displayed again, the selected time is the time when the operation was confirmed last time.
this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
```
### showTextPickerDialog
showTextPickerDialog(options: TextPickerDialogOptions): void
Shows a text picker in the given settings.
**TextPickerDialogOptions parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| range | string[]&nbsp;\|&nbsp;[Resource](../arkui-ts/ts-types.md#resource)\|[TextPickerRangeContent](../arkui-ts/ts-basic-components-textpicker.md#textpickerrangecontent10)[] | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.|
| selected | number | No| Index of the selected item.<br>Default value: **0**|
| value | string | No | Text of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.|
| defaultPickerItemHeight | number \| string | No| Height of the picker item.|
| disappearTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.|
| textStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.|
| selectedTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.|
| onAccept | (value: [TextPickerResult](../arkui-ts/ts-methods-textpicker-dialog.md#textpickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TextPickerResult](../arkui-ts/ts-methods-textpicker-dialog.md#textpickerresult)) => void | No| Callback invoked when the selected item changes.|
**Example**
```ts
let select: number = 2
let fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
uiContext.showTextPickerDialog({
range: this.fruits,
selected: this.select,
onAccept: (value: TextPickerResult) => {
// Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed.
this.select = value.index
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TextPickerDialog:onCancel()")
},
onChange: (value: TextPickerResult) => {
console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
}
})
```
### createAnimator
createAnimator(options: AnimatorOptions): AnimatorResult
Creates an **Animator** object.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | ------- |
| options | [AnimatorOptions](./js-apis-animator.md#animatoroptions) | Yes | Animator options.|
**Return value**
| Type | Description |
| --------------------------------- | ------------- |
| [AnimatorResult](./js-apis-animator.md#animatorresult) | Animator result.|
**Example**
```ts
let options = {
duration: 1500,
easing: "friction",
delay: 0,
fill: "forwards",
direction: "normal",
iterations: 3,
begin: 200.0,
end: 400.0
};
uiContext.createAnimator(options);
```
### runScopedTask
runScopedTask(callback: () => void): void
Executes the specified callback in this UI context.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | ------- |
| callback | () => void | Yes | Callback used to return the result.|
**Example**
```ts
uiContext.runScopedTask(
() => {
console.log('Succeeded in runScopedTask');
}
);
```
## Font
In the following API examples, you must first use [getFont()](#getfont) in **UIContext** to obtain a **Font** instance, and then call the APIs using the obtained instance.
### registerFont
registerFont(options: FontOptions): void
Registers a custom font with the font manager.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | --------------------------- | ---- | ----------- |
| options | [FontOptions](js-apis-font.md#fontoptions) | Yes | Information about the custom font to register.|
**Example**
```ts
let font = uiContext.getFont();
font.registerFont({
familyName: 'medium',
familySrc: '/font/medium.ttf'
});
```
## MediaQuery
In the following API examples, you must first use [getMediaQuery()](#getmediaquery) in **UIContext** to obtain a **MediaQuery** instance, and then call the APIs using the obtained instance.
### matchMediaSync
matchMediaSync(condition: string): MediaQueryListener
Sets the media query criteria and returns the corresponding listening handle.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ---------------------------------------- |
| condition | string | Yes | Media query condition. For details, see [Syntax](../../ui/arkts-layout-development-media-query.md#syntax).|
**Return value**
| Type | Description |
| ------------------ | ---------------------- |
| MediaQueryListener | Listening handle to a media event, which is used to register or deregister the listening callback.|
**Example**
```ts
let mediaquery = uiContext.getMediaQuery();
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
```
## Router
In the following API examples, you must first use [getRouter()](#getrouter) in **UIContext** to obtain a **Router** instance, and then call the APIs using the obtained instance.
### pushUrl
pushUrl(options: RouterOptions): Promise&lt;void&gt;
Navigates to a specified page in the application.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | --------- |
| options | [RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100002 | if the uri is not exist. |
| 100003 | if the pages are pushed too much. |
**Example**
```ts
let router = uiContext.getRouter();
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
})
```
### pushUrl
pushUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
Navigates to a specified page in the application.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | --------- |
| options | [RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100002 | if the uri is not exist. |
| 100003 | if the pages are pushed too much. |
**Example**
```ts
let router = uiContext.getRouter();
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushUrl success');
})
```
### pushUrl
pushUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
Navigates to a specified page in the application.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters. |
| mode | [RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100002 | if the uri is not exist. |
| 100003 | if the pages are pushed too much. |
**Example**
```ts
let router = uiContext.getRouter();
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, router.RouterMode.Standard)
.then(() => {
// success
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
})
```
### pushUrl
pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;void&gt;): void
Navigates to a specified page in the application.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters. |
| mode | [RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100002 | if the uri is not exist. |
| 100003 | if the pages are pushed too much. |
**Example**
```ts
let router = uiContext.getRouter();
router.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushUrl success');
})
```
### replaceUrl
replaceUrl(options: RouterOptions): Promise&lt;void&gt;
Replaces the current page with another one in the application and destroys the current page.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found, only throw in standard system. |
| 200002 | if the uri is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
})
```
### replaceUrl
replaceUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
Replaces the current page with another one in the application and destroys the current page.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found, only throw in standard system. |
| 200002 | if the uri is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
})
```
### replaceUrl
replaceUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
Replaces the current page with another one in the application and destroys the current page.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page. |
| mode | [RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if can not get the delegate, only throw in standard system. |
| 200002 | if the uri is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, router.RouterMode.Standard)
.then(() => {
// success
})
.catch(err => {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
})
```
### replaceUrl
replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;void&gt;): void
Replaces the current page with another one in the application and destroys the current page.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page. |
| mode | [RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found, only throw in standard system. |
| 200002 | if the uri is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message'
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
```
### pushNamedRoute
pushNamedRoute(options: NamedRouterOptions): Promise&lt;void&gt;
Navigates to a page using the named route. This API uses a promise to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | --------- |
| options | [NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100003 | if the pages are pushed too much. |
| 100004 | if the named route is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
```
### pushNamedRoute
pushNamedRoute(options: NamedRouterOptions, callback: AsyncCallback&lt;void&gt;): void
Navigates to a page using the named route. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | --------- |
| options | [NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100003 | if the pages are pushed too much. |
| 100004 | if the named route is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, (err) => {
if (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushNamedRoute success');
})
```
### pushNamedRoute
pushNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise&lt;void&gt;
Navigates to a page using the named route. This API uses a promise to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters. |
| mode | [RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100003 | if the pages are pushed too much. |
| 100004 | if the named route is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, router.RouterMode.Standard)
.then(() => {
// success
})
.catch(err => {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
```
### pushNamedRoute
pushNamedRoute(options: NamedRouterOptions, mode: RouterMode, callback: AsyncCallback&lt;void&gt;): void
Navigates to a page using the named route. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters. |
| mode | [RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100003 | if the pages are pushed too much. |
| 100004 | if the named route is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushNamedRoute success');
})
```
### replaceNamedRoute
replaceNamedRoute(options: NamedRouterOptions): Promise&lt;void&gt;
Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100004 | if the named route is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.replaceNamedRoute({
name: 'myPage',
params: {
data1: 'message'
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
```
### replaceNamedRoute
replaceNamedRoute(options: NamedRouterOptions, callback: AsyncCallback&lt;void&gt;): void
Replaces the current page with another one using the named route and destroys the current page. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100004 | if the named route is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.replaceNamedRoute({
name: 'myPage',
params: {
data1: 'message'
}
}, (err) => {
if (err) {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceNamedRoute success');
})
```
### replaceNamedRoute
replaceNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise&lt;void&gt;
Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page. |
| mode | [RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if can not get the delegate. |
| 100004 | if the named route is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.replaceNamedRoute({
name: 'myPage',
params: {
data1: 'message'
}
}, router.RouterMode.Standard)
.then(() => {
// success
})
.catch(err => {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
```
### replaceNamedRoute
replaceNamedRoute(options: NamedRouterOptions, mode: RouterMode, callback: AsyncCallback&lt;void&gt;): void
Replaces the current page with another one using the named route and destroys the current page. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page. |
| mode | [RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100004 | if the named route is not exist. |
**Example**
```ts
let router = uiContext.getRouter();
router.replaceNamedRoute({
name: 'myPage',
params: {
data1: 'message'
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceNamedRoute success');
});
```
### back
back(options?: RouterOptions ): void
Returns to the previous page or a specified page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------------------------------------------------ |
| options | [RouterOptions](js-apis-router.md#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the application returns to the previous page, and the page is not rebuilt. The page in the page stack is not reclaimed. It will be reclaimed after being popped up.|
**Example**
```ts
let router = uiContext.getRouter();
router.back({url:'pages/detail'});
```
### clear
clear(): void
Clears all historical pages in the stack and retains only the current page at the top of the stack.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Example**
```ts
let router = uiContext.getRouter();
router.clear();
```
### getLength
getLength(): string
Obtains the number of pages in the current stack.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Return value**
| Type | Description |
| ------ | ------------------ |
| string | Number of pages in the stack. The maximum value is **32**.|
**Example**
```ts
let router = uiContext.getRouter();
let size = router.getLength();
console.log('pages stack size = ' + size);
```
### getState
getState(): RouterState
Obtains state information about the current page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Return value**
| Type | Description |
| --------------------------- | ------- |
| [RouterState](js-apis-router.md#routerstate) | Page routing state.|
**Example**
```ts
let router = uiContext.getRouter();
let page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);
```
### showAlertBeforeBackPage
showAlertBeforeBackPage(options: EnableAlertOptions): void
Enables the display of a confirm dialog box before returning to the previous page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ---------------------------------------- | ---- | --------- |
| options | [EnableAlertOptions](js-apis-router.md#enablealertoptions) | Yes | Description of the dialog box.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
**Example**
```ts
let router = uiContext.getRouter();
try {
router.showAlertBeforeBackPage({
message: 'Message Info'
});
} catch(error) {
console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`);
}
```
### hideAlertBeforeBackPage
hideAlertBeforeBackPage(): void
Disables the display of a confirm dialog box before returning to the previous page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Example**
```ts
let router = uiContext.getRouter();
router.hideAlertBeforeBackPage();
```
### getParams
getParams(): Object
Obtains the parameters passed from the page that initiates redirection to the current page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Return value**
| Type | Description |
| ------ | ---------------------------------- |
| object | Parameters passed from the page that initiates redirection to the current page.|
**Example**
```ts
let router = uiContext.getRouter();
router.getParams();
```
## PromptAction
In the following API examples, you must first use [getPromptAction()](#getpromptaction) in **UIContext** to obtain a **PromptAction** instance, and then call the APIs using the obtained instance.
### showToast
showToast(options: ShowToastOptions): void
Shows a toast.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------------- | ---- | ------- |
| options | [ShowToastOptions](js-apis-promptAction.md#showtoastoptions) | Yes | Toast options.|
**Error codes**
For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
**Example**
```ts
let promptAction = uiContext.getPromptAction();
try {
promptAction.showToast({
message: 'Message Info',
duration: 2000
});
} catch (error) {
console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
};
```
### showDialog
showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSuccessResponse&lt;): void
Shows a dialog box. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ------------ |
| options | [ShowDialogOptions](js-apis-promptAction.md#showdialogoptions) | Yes | Dialog box options.|
| callback | AsyncCallback&lt;[ShowDialogSuccessResponse](js-apis-promptAction.md#showdialogsuccessresponse)&gt; | Yes | Callback used to return the dialog box response result. |
**Error codes**
For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
**Example**
```ts
let promptAction = uiContext.getPromptAction();
try {
promptAction.showDialog({
title: 'showDialog Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000'
},
{
text: 'button2',
color: '#000000'
}
]
}, (err, data) => {
if (err) {
console.info('showDialog err: ' + err);
return;
}
console.info('showDialog success callback, click button: ' + data.index);
});
} catch (error) {
console.error(`showDialog args error code is ${error.code}, message is ${error.message}`);
};
```
### showDialog
showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
Shows a dialog box. This API uses a promise to return the result synchronously.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | --------------------------------------- | ---- | ------ |
| options | [ShowDialogOptions](js-apis-promptAction.md#showdialogoptions) | Yes | Dialog box options.|
**Return value**
| Type | Description |
| ---------------------------------------- | -------- |
| Promise&lt;[ShowDialogSuccessResponse](js-apis-promptAction.md#showdialogsuccessresponse)&gt; | Promise used to return the dialog box response result.|
**Error codes**
For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
**Example**
```ts
let promptAction = uiContext.getPromptAction();
try {
promptAction.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000'
},
{
text: 'button2',
color: '#000000'
}
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.index);
})
.catch(err => {
console.info('showDialog error: ' + err);
})
} catch (error) {
console.error(`showDialog args error code is ${error.code}, message is ${error.message}`);
};
```
### showActionMenu
showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenuSuccessResponse&gt;):void
Shows an action menu. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | --------- |
| options | [ActionMenuOptions](js-apis-promptAction.md#actionmenuoptions) | Yes | Action menu options. |
| callback | AsyncCallback&lt;[ActionMenuSuccessResponse](js-apis-promptAction.md#actionmenusuccessresponse)> | Yes | Callback used to return the action menu response result.|
**Error codes**
For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
**Example**
```ts
let promptAction = uiContext.getPromptAction();
try {
promptAction.showActionMenu({
title: 'Title Info',
buttons: [
{
text: 'item1',
color: '#666666'
},
{
text: 'item2',
color: '#000000'
},
]
}, (err, data) => {
if (err) {
console.info('showActionMenu err: ' + err);
return;
}
console.info('showActionMenu success callback, click button: ' + data.index);
})
} catch (error) {
console.error(`showActionMenu args error code is ${error.code}, message is ${error.message}`);
};
```
### showActionMenu
showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse&gt;
Shows an action menu. This API uses a promise to return the result synchronously.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | --------------------------------------- | ---- | ------- |
| options | [ActionMenuOptions](js-apis-promptAction.md#actionmenuoptions) | Yes | Action menu options.|
**Return value**
| Type | Description |
| ---------------------------------------- | ------- |
| Promise&lt;[ActionMenuSuccessResponse](js-apis-promptAction.md#actionmenusuccessresponse)&gt; | Promise used to return the action menu response result.|
**Error codes**
For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
**Example**
```ts
let promptAction = uiContext.getPromptAction();
try {
promptAction.showActionMenu({
title: 'showActionMenu Title Info',
buttons: [
{
text: 'item1',
color: '#666666'
},
{
text: 'item2',
color: '#000000'
},
]
})
.then(data => {
console.info('showActionMenu success, click button: ' + data.index);
})
.catch(err => {
console.info('showActionMenu error: ' + err);
})
} catch (error) {
console.error(`showActionMenu args error code is ${error.code}, message is ${error.message}`);
};
```
en/application-dev/reference/apis/js-apis-curve.md
浏览文件 @ 101b76b0
...@@ -25,9 +25,9 @@ Implements initialization for the interpolation curve, which is used to create a ...@@ -25,9 +25,9 @@ Implements initialization for the interpolation curve, which is used to create a
**Parameters** **Parameters**
| Name| Type | Mandatory| Default Value | Description | | Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | | ------ | ----------------------------------------------- | ---- | ----------------------------------- |
| curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve.Linear | Curve type.| | curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve type.<br>Default value: **Curve.Linear**|
**Return value** **Return value**
...@@ -151,16 +151,16 @@ Creates a spring animation curve. If multiple spring animations are applied to t ...@@ -151,16 +151,16 @@ Creates a spring animation curve. If multiple spring animations are applied to t
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- | | --------- | ------ | ---- | ----- |
| response | number | No | Duration of one complete oscillation,<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.| | response | number | No | Duration of one complete oscillation.<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.| | dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.| | overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------------------------------- | ---------------- | | ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.| | [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
**Example** **Example**
...@@ -187,13 +187,13 @@ Creates a responsive spring animation curve. It is a special case of [springMoti ...@@ -187,13 +187,13 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
| --------- | ------ | ---- | ----- | | --------- | ------ | ---- | ----- |
| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.| | response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.| | dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.| | overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------------------------------- | ---------------- | | ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.| | [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate9) function of the curve.|
**Example** **Example**
...@@ -260,7 +260,7 @@ import Curves from '@ohos.curves' ...@@ -260,7 +260,7 @@ import Curves from '@ohos.curves'
interpolate(fraction) { interpolate(fraction) {
return Math.sqrt(fraction); return Math.sqrt(fraction);
} }
Curves.customCurve(this.interpolate) // Create a custom curve. private curve = Curves.customCurve(this.interpolate) // Create a custom curve.
``` ```
...@@ -268,7 +268,7 @@ Curves.customCurve(this.interpolate) // Create a custom curve. ...@@ -268,7 +268,7 @@ Curves.customCurve(this.interpolate) // Create a custom curve.
## ICurve ## ICurve
### interpolate ### interpolate<sup>9+</sup>
interpolate(fraction: number): number interpolate(fraction: number): number
...@@ -310,9 +310,9 @@ Implements initialization to create a curve. This API is deprecated since API ve ...@@ -310,9 +310,9 @@ Implements initialization to create a curve. This API is deprecated since API ve
**Parameters** **Parameters**
| Name| Type | Mandatory| Default Value | Description | | Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | | ------ | ----------------------------------------------- | ---- | ----------------------------------- |
| curve |[Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve.Linear | Curve type.| | curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve type.<br>Default value: **Curve.Linear**|
## Curves.steps<sup>(deprecated)</sup> ## Curves.steps<sup>(deprecated)</sup>
......
en/application-dev/reference/apis/js-apis-font.md
浏览文件 @ 101b76b0
...@@ -7,6 +7,10 @@ The **font** module provides APIs for registering custom fonts. ...@@ -7,6 +7,10 @@ The **font** module provides APIs for registering custom fonts.
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> >
> The APIs provided by this module are system APIs. > The APIs provided by this module are system APIs.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the [getFont](./js-apis-arkui-UIContext.md#getfont) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [Font](./js-apis-arkui-UIContext.md#font) object associated with the current UI context.
## Modules to Import ## Modules to Import
...@@ -165,3 +169,4 @@ struct FontExample { ...@@ -165,3 +169,4 @@ struct FontExample {
} }
} }
``` ```
en/application-dev/reference/apis/js-apis-matrix4.md
浏览文件 @ 101b76b0
...@@ -16,7 +16,7 @@ import matrix4 from '@ohos.matrix4' ...@@ -16,7 +16,7 @@ import matrix4 from '@ohos.matrix4'
## matrix4.init ## matrix4.init
init(array: Array&lt;number&gt;): Matrix4Transit init(option: [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number]): Matrix4Transit
Matrix constructor, which is used to create a 4 x 4 matrix by using the input parameter. Column-major order is used. Matrix constructor, which is used to create a 4 x 4 matrix by using the input parameter. Column-major order is used.
...@@ -25,17 +25,17 @@ Matrix constructor, which is used to create a 4 x 4 matrix by using the input pa ...@@ -25,17 +25,17 @@ Matrix constructor, which is used to create a 4 x 4 matrix by using the input pa
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | Name| Type | Mandatory| Description |
| ------ | ------------------- | ---- | ------------------------------------------------------------ | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| array | Array&lt;number&gt; | Yes | A number array whose length is 16 (4 x 4). For details, see **array** parameters.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] | | option | [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number] | Yes | A number array whose length is 16 (4 x 4). For details, see **Description of a 4 x 4 matrix**.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------------- | | --------------------------------- | ---------------------------- |
| Matrix4Transit | 4 x 4 matrix object created based on the input parameter.| | [Matrix4Transit](#matrix4transit) | 4 x 4 matrix object created based on the input parameter.|
**array** parameters **Description of a 4 x 4 matrix**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------------------- | | ---- | ------ | ---- | -------------------- |
...@@ -91,9 +91,9 @@ Constructs an identity matrix. ...@@ -91,9 +91,9 @@ Constructs an identity matrix.
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | -------------- | | --------------------------------- | -------------- |
| Matrix4Transit | Identity matrix object.| | [Matrix4Transit](#matrix4transit) | Identity matrix object.|
**Example** **Example**
...@@ -136,9 +136,9 @@ Copies this matrix object. ...@@ -136,9 +136,9 @@ Copies this matrix object.
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | -------------------- | | --------------------------------- | -------------------- |
| Matrix4Transit | Copy object of the current matrix.| | [Matrix4Transit](#matrix4transit) | Copy object of the current matrix.|
**Example** **Example**
...@@ -171,12 +171,12 @@ struct Test { ...@@ -171,12 +171,12 @@ struct Test {
![en-us_image_0000001219744181](figures/en-us_image_0000001219744181.png) ![en-us_image_0000001219744181](figures/en-us_image_0000001219744181.png)
## Matrix4 ## Matrix4Transit
### combine ### combine
combine(matrix: Matrix4): Matrix4Transit combine(option: Matrix4Transit): Matrix4Transit
Combines the effects of two matrices to generate a new matrix object. Combines the effects of two matrices to generate a new matrix object.
...@@ -185,15 +185,15 @@ Combines the effects of two matrices to generate a new matrix object. ...@@ -185,15 +185,15 @@ Combines the effects of two matrices to generate a new matrix object.
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------ | | ------ | --------------------------------- | ---- | ------------------ |
| matrix | Matrix4 | Yes | Matrix object to be combined.| | option | [Matrix4Transit](#matrix4transit) | Yes | Matrix object to be combined.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ------------------ | | --------------------------------- | ------------------ |
| Matrix4Transit | Object after matrix combination.| | [Matrix4Transit](#matrix4transit) | Object after matrix combination.|
**Example** **Example**
...@@ -238,9 +238,9 @@ Inverts this matrix object. ...@@ -238,9 +238,9 @@ Inverts this matrix object.
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------- | | --------------------------------- | ---------------------- |
| Matrix4Transit | Inverse matrix object of the current matrix.| | [Matrix4Transit](#matrix4transit) | Inverse matrix object of the current matrix.|
**Example** **Example**
...@@ -273,7 +273,7 @@ struct Tests { ...@@ -273,7 +273,7 @@ struct Tests {
### translate ### translate
translate({x?: number, y?: number, z?: number}): Matrix4Transit translate(option: TranslateOption): Matrix4Transit
Translates this matrix object along the x, y, and z axes. Translates this matrix object along the x, y, and z axes.
...@@ -281,17 +281,15 @@ Translates this matrix object along the x, y, and z axes. ...@@ -281,17 +281,15 @@ Translates this matrix object along the x, y, and z axes.
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ----------------------------------------------------------- | | ------ | ----------------------------------- | ---- | -------------- |
| x | number | No | Translation distance along the x-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)| | option | [TranslateOption](#translateoption) | Yes | Translation configuration.|
| y | number | No | Translation distance along the y-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| z | number | No | Translation distance along the z-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------------- | | --------------------------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the translation effect is added.| | [Matrix4Transit](#matrix4transit) | Matrix object after the translation.|
**Example** **Example**
...@@ -319,7 +317,7 @@ struct Test { ...@@ -319,7 +317,7 @@ struct Test {
### scale ### scale
scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Matrix4Transit scale(option: ScaleOption): Matrix4Transit
Scales this matrix object along the x, y, and z axes. Scales this matrix object along the x, y, and z axes.
...@@ -328,19 +326,16 @@ Scales this matrix object along the x, y, and z axes. ...@@ -328,19 +326,16 @@ Scales this matrix object along the x, y, and z axes.
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name| Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------------ | | ------ | --------------------------- | ---- | -------------- |
| x | number | No | Scaling multiple along the x-axis. If the value is greater than 1, the image is scaled up along the x-axis. If the value is less than 1, the image is scaled down along the x-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.| | option | [ScaleOption](#scaleoption) | Yes | Scaling configuration.|
| y | number | No | Scaling multiple along the y-axis. If the value is greater than 1, the image is scaled up along the y-axis. If the value is less than 1, the image is scaled down along the y-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| z | number | No | Scaling multiple along the z-axis. If the value is greater than 1, the image is scaled up along the z-axis. If the value is less than 1, the image is scaled down along the z-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------------- | | --------------------------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the scaling effect is added.| | [Matrix4Transit](#matrix4transit) | Matrix object after the scaling.|
**Example** **Example**
...@@ -367,7 +362,7 @@ struct Test { ...@@ -367,7 +362,7 @@ struct Test {
### rotate ### rotate
rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Matrix4Transit rotate(option: RotateOption): Matrix4Transit
Rotates this matrix object along the x, y, and z axes. Rotates this matrix object along the x, y, and z axes.
...@@ -376,20 +371,16 @@ Rotates this matrix object along the x, y, and z axes. ...@@ -376,20 +371,16 @@ Rotates this matrix object along the x, y, and z axes.
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name| Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------- | | ------ | ----------------------------- | ---- | -------------- |
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)| | option | [RotateOption](#rotateoption) | Yes | Rotation configuration.|
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| angle | number | No | Rotation angle.<br>Default value: **0** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0** |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0** |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------------- | | --------------------------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the rotation effect is added.| | [Matrix4Transit](#matrix4transit) | Matrix object after the rotation.|
**Example** **Example**
...@@ -417,7 +408,7 @@ struct Test { ...@@ -417,7 +408,7 @@ struct Test {
### transformPoint ### transformPoint
transformPoint(point: Point): Point transformPoint(option: [number, number]): [number, number]
Applies the current transformation effect to a coordinate point. Applies the current transformation effect to a coordinate point.
...@@ -426,15 +417,15 @@ Applies the current transformation effect to a coordinate point. ...@@ -426,15 +417,15 @@ Applies the current transformation effect to a coordinate point.
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | Name| Type | Mandatory| Description |
| ------ | ----- | ---- | ------------------ | | ------ | ---------------- | ---- | ------------------ |
| point | Point | Yes | Point to be transformed.| | option | [number, number] | Yes | Point to be transformed.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ----- | ---------------- | | ---------------- | --------------------------- |
| Point | Point object after matrix transformation| | [number, number] | Point object after matrix transformation|
**Example** **Example**
...@@ -472,3 +463,32 @@ struct Test { ...@@ -472,3 +463,32 @@ struct Test {
``` ```
![en-us_image_0000001219864133](figures/en-us_image_0000001219864133.PNG) ![en-us_image_0000001219864133](figures/en-us_image_0000001219864133.PNG)
## TranslateOption
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ----------------------------------------------------------- |
| x | number | No | Translation distance along the x-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| y | number | No | Translation distance along the y-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| z | number | No | Translation distance along the z-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
## ScaleOption
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------------ |
| x | number | No | Scaling multiple along the x-axis. If the value is greater than 1, the image is scaled up along the x-axis. If the value is less than 1, the image is scaled down along the x-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| y | number | No | Scaling multiple along the y-axis. If the value is greater than 1, the image is scaled up along the y-axis. If the value is less than 1, the image is scaled down along the y-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| z | number | No | Scaling multiple along the z-axis. If the value is greater than 1, the image is scaled up along the z-axis. If the value is less than 1, the image is scaled down along the z-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
## RotateOption
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------- |
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| angle | number | No | Rotation angle.<br>Default value: **0** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0** |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0** |
en/application-dev/reference/apis/js-apis-measure.md
浏览文件 @ 101b76b0
...@@ -112,7 +112,7 @@ Provides attributes of the measured text. ...@@ -112,7 +112,7 @@ Provides attributes of the measured text.
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- | | -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- |
| textContent<sup>10+</sup> | string | Yes | Content of the measured text. | | textContent | string | Yes | Content of the measured text. |
| constraintWidth<sup>10+</sup> | number \| string \| [Resource](../arkui-ts/ts-types.md#resource) | No | Layout width of the measured text.<br>The default unit is vp. | | constraintWidth<sup>10+</sup> | number \| string \| [Resource](../arkui-ts/ts-types.md#resource) | No | Layout width of the measured text.<br>The default unit is vp. |
| fontSize | number \| string \| [Resource](../arkui-ts/ts-types.md#resource) | No | Font size of the measured text. If the value is of the number type, the unit fp is used.<br>Default value: **16fp**<br>**NOTE**<br>The value cannot be a percentage. | | fontSize | number \| string \| [Resource](../arkui-ts/ts-types.md#resource) | No | Font size of the measured text. If the value is of the number type, the unit fp is used.<br>Default value: **16fp**<br>**NOTE**<br>The value cannot be a percentage. |
| fontStyle | number \| [FontStyle](../arkui-ts/ts-appendix-enums.md#fontstyle) | No | Font style of the measured text.<br>Default value: **FontStyle.Normal** | | fontStyle | number \| [FontStyle](../arkui-ts/ts-appendix-enums.md#fontstyle) | No | Font style of the measured text.<br>Default value: **FontStyle.Normal** |
......
en/application-dev/reference/apis/js-apis-mediaquery.md
浏览文件 @ 101b76b0
...@@ -7,6 +7,10 @@ The **mediaquery** module provides different styles for different media types. ...@@ -7,6 +7,10 @@ The **mediaquery** module provides different styles for different media types.
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> >
> This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md). > This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md).
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the [getMediaQuery](./js-apis-arkui-UIContext.md#getmediaquery) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [MediaQuery](./js-apis-arkui-UIContext.md#mediaquery) object associated with the current UI context.
## Modules to Import ## Modules to Import
......
en/application-dev/reference/apis/js-apis-promptAction.md
浏览文件 @ 101b76b0
...@@ -7,6 +7,10 @@ The **PromptAction** module provides APIs for creating and showing toasts, dialo ...@@ -7,6 +7,10 @@ The **PromptAction** module provides APIs for creating and showing toasts, dialo
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> >
> This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md). > This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md).
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the [getPromptAction](./js-apis-arkui-UIContext.md#getpromptaction) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [PromptAction](./js-apis-arkui-UIContext.md#promptaction) object associated with the current UI context.
## Modules to Import ## Modules to Import
...@@ -62,7 +66,7 @@ Describes the options for showing the toast. ...@@ -62,7 +66,7 @@ Describes the options for showing the toast.
| -------- | ---------------------------------------- | ---- | ---------------------------------------- | | -------- | ---------------------------------------- | ---- | ---------------------------------------- |
| message | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup>| Yes | Text to display. | | message | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup>| Yes | Text to display. |
| duration | number | No | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.| | duration | number | No | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.|
| bottom | string\| number | No | Distance between the toast border and the bottom of the screen. | | bottom | string\| number | No | Distance between the toast border and the bottom of the screen.<br>Default value: **80vp** |
## promptAction.showDialog ## promptAction.showDialog
...@@ -319,7 +323,7 @@ Describes the options for showing the action menu. ...@@ -319,7 +323,7 @@ Describes the options for showing the action menu.
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| title | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup>| No | Title of the dialog box. | | title | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup>| No | Title of the dialog box. |
| buttons | [[Button](#button),[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?] | Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.| | buttons | [[Button](#button),[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?] | Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, only the first six buttons will be displayed.|
## ActionMenuSuccessResponse ## ActionMenuSuccessResponse
......
en/application-dev/reference/apis/js-apis-router.md
浏览文件 @ 101b76b0
...@@ -7,6 +7,10 @@ The **Router** module provides APIs to access pages through URLs. You can use th ...@@ -7,6 +7,10 @@ The **Router** module provides APIs to access pages through URLs. You can use th
> - The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version. > - The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> >
> - Page routing APIs can be invoked only after page rendering is complete. Do not call these APIs in **onInit** and **onReady** when the page is still in the rendering phase. > - Page routing APIs can be invoked only after page rendering is complete. Do not call these APIs in **onInit** and **onReady** when the page is still in the rendering phase.
>
> - The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext).
>
> - Since API version 10, you can use the [getRouter](./js-apis-arkui-UIContext.md#getrouter) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [Router](./js-apis-arkui-UIContext.md#router) object associated with the current UI context.
## Modules to Import ## Modules to Import
...@@ -46,7 +50,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -46,7 +50,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
router.pushUrl({ router.pushUrl({
url: 'pages/routerpage2', url: 'pages/routerpage2',
params: { params: {
...@@ -91,7 +95,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -91,7 +95,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
router.pushUrl({ router.pushUrl({
url: 'pages/routerpage2', url: 'pages/routerpage2',
params: { params: {
...@@ -141,7 +145,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -141,7 +145,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
router.pushUrl({ router.pushUrl({
url: 'pages/routerpage2', url: 'pages/routerpage2',
params: { params: {
...@@ -187,7 +191,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -187,7 +191,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
router.pushUrl({ router.pushUrl({
url: 'pages/routerpage2', url: 'pages/routerpage2',
params: { params: {
...@@ -236,7 +240,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -236,7 +240,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
router.replaceUrl({ router.replaceUrl({
url: 'pages/detail', url: 'pages/detail',
params: { params: {
...@@ -277,7 +281,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -277,7 +281,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
router.replaceUrl({ router.replaceUrl({
url: 'pages/detail', url: 'pages/detail',
params: { params: {
...@@ -325,7 +329,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -325,7 +329,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
router.replaceUrl({ router.replaceUrl({
url: 'pages/detail', url: 'pages/detail',
params: { params: {
...@@ -367,7 +371,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -367,7 +371,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
router.replaceUrl({ router.replaceUrl({
url: 'pages/detail', url: 'pages/detail',
params: { params: {
...@@ -383,6 +387,375 @@ router.replaceUrl({ ...@@ -383,6 +387,375 @@ router.replaceUrl({
``` ```
## router.pushNamedRoute<sup>10+</sup>
pushNamedRoute(options: NamedRouterOptions): Promise&lt;void&gt;
Navigates to a page using the named route. This API uses a promise to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | --------- |
| options | [NamedRouterOptions](#namedrouteroptions10) | Yes | Page routing parameters.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100003 | if the pages are pushed too much. |
| 100004 | if the named route is not exist. |
**Example**
```ts
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
```
## router.pushNamedRoute<sup>10+</sup>
pushNamedRoute(options: NamedRouterOptions, callback: AsyncCallback&lt;void&gt;): void
Navigates to a page using the named route. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | --------- |
| options | [NamedRouterOptions](#namedrouteroptions10) | Yes | Page routing parameters.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100003 | if the pages are pushed too much. |
| 100004 | if the named route is not exist. |
**Example**
```ts
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, (err) => {
if (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushNamedRoute success');
})
```
## router.pushNamedRoute<sup>10+</sup>
pushNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise&lt;void&gt;
Navigates to a page using the named route. This API uses a promise to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [NamedRouterOptions](#namedrouteroptions10) | Yes | Page routing parameters. |
| mode | [RouterMode](#routermode9) | Yes | Routing mode.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100003 | if the pages are pushed too much. |
| 100004 | if the named route is not exist. |
**Example**
```ts
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, router.RouterMode.Standard)
.then(() => {
// success
})
.catch(err => {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
```
## router.pushNamedRoute<sup>10+</sup>
pushNamedRoute(options: NamedRouterOptions, mode: RouterMode, callback: AsyncCallback&lt;void&gt;): void
Navigates to a page using the named route. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [NamedRouterOptions](#namedrouteroptions10) | Yes | Page routing parameters. |
| mode | [RouterMode](#routermode9) | Yes | Routing mode.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100003 | if the pages are pushed too much. |
| 100004 | if the named route is not exist. |
**Example**
```ts
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushNamedRoute success');
})
```
## router.replaceNamedRoute<sup>10+</sup>
replaceNamedRoute(options: NamedRouterOptions): Promise&lt;void&gt;
Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [NamedRouterOptions](#namedrouteroptions10) | Yes | Description of the new page.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100004 | if the named route is not exist. |
**Example**
```ts
router.replaceNamedRoute({
name: 'myPage',
params: {
data1: 'message'
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
```
## router.replaceNamedRoute<sup>10+</sup>
replaceNamedRoute(options: NamedRouterOptions, callback: AsyncCallback&lt;void&gt;): void
Replaces the current page with another one using the named route and destroys the current page. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [NamedRouterOptions](#namedrouteroptions10) | Yes | Description of the new page.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100004 | if the named route is not exist. |
**Example**
```ts
router.replaceNamedRoute({
name: 'myPage',
params: {
data1: 'message'
}
}, (err) => {
if (err) {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceNamedRoute success');
})
```
## router.replaceNamedRoute<sup>10+</sup>
replaceNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise&lt;void&gt;
Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [NamedRouterOptions](#namedrouteroptions10) | Yes | Description of the new page. |
| mode | [RouterMode](#routermode9) | Yes | Routing mode.|
**Return value**
| Type | Description |
| ------------------- | --------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if can not get the delegate. |
| 100004 | if the named route is not exist. |
**Example**
```ts
router.replaceNamedRoute({
name: 'myPage',
params: {
data1: 'message'
}
}, router.RouterMode.Standard)
.then(() => {
// success
})
.catch(err => {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
```
## router.replaceNamedRoute<sup>10+</sup>
replaceNamedRoute(options: NamedRouterOptions, mode: RouterMode, callback: AsyncCallback&lt;void&gt;): void
Replaces the current page with another one using the named route and destroys the current page. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------- |
| options | [NamedRouterOptions](#namedrouteroptions10) | Yes | Description of the new page. |
| mode | [RouterMode](#routermode9) | Yes | Routing mode.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md).
| ID | Error Message|
| --------- | ------- |
| 100001 | if UI execution context not found. |
| 100004 | if the named route is not exist. |
**Example**
```ts
router.replaceNamedRoute({
name: 'myPage',
params: {
data1: 'message'
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceNamedRoute success');
});
```
## router.back ## router.back
back(options?: RouterOptions ): void back(options?: RouterOptions ): void
...@@ -399,7 +772,7 @@ Returns to the previous page or a specified page. ...@@ -399,7 +772,7 @@ Returns to the previous page or a specified page.
**Example** **Example**
```js ```ts
router.back({url:'pages/detail'}); router.back({url:'pages/detail'});
``` ```
...@@ -413,7 +786,7 @@ Clears all historical pages in the stack and retains only the current page at th ...@@ -413,7 +786,7 @@ Clears all historical pages in the stack and retains only the current page at th
**Example** **Example**
```js ```ts
router.clear(); router.clear();
``` ```
...@@ -433,7 +806,7 @@ Obtains the number of pages in the current stack. ...@@ -433,7 +806,7 @@ Obtains the number of pages in the current stack.
**Example** **Example**
```js ```ts
let size = router.getLength(); let size = router.getLength();
console.log('pages stack size = ' + size); console.log('pages stack size = ' + size);
``` ```
...@@ -454,7 +827,7 @@ Obtains state information about the current page. ...@@ -454,7 +827,7 @@ Obtains state information about the current page.
**Example** **Example**
```js ```ts
let page = router.getState(); let page = router.getState();
console.log('current index = ' + page.index); console.log('current index = ' + page.index);
console.log('current name = ' + page.name); console.log('current name = ' + page.name);
...@@ -497,15 +870,15 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -497,15 +870,15 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```js ```ts
try { try {
router.showAlertBeforeBackPage({ router.showAlertBeforeBackPage({
message: 'Message Info' message: 'Message Info'
}); });
} catch(error) { } catch(error) {
console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`); console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`);
} }
``` ```
## EnableAlertOptions ## EnableAlertOptions
Describes the confirm dialog box. Describes the confirm dialog box.
...@@ -526,7 +899,7 @@ Disables the display of a confirm dialog box before returning to the previous pa ...@@ -526,7 +899,7 @@ Disables the display of a confirm dialog box before returning to the previous pa
**Example** **Example**
```js ```ts
router.hideAlertBeforeBackPage(); router.hideAlertBeforeBackPage();
``` ```
...@@ -563,7 +936,6 @@ Describes the page routing options. ...@@ -563,7 +936,6 @@ Describes the page routing options.
> **NOTE** > **NOTE**
>
> The page routing stack supports a maximum of 32 pages. > The page routing stack supports a maximum of 32 pages.
## RouterMode<sup>9+</sup> ## RouterMode<sup>9+</sup>
...@@ -577,11 +949,22 @@ Enumerates the routing modes. ...@@ -577,11 +949,22 @@ Enumerates the routing modes.
| Standard | Multi-instance mode. It is the default routing 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 multi-instance mode.| | Standard | Multi-instance mode. It is the default routing 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 multi-instance 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 to the top and becomes a new page.<br>If the URL of the target page does not exist in the page stack, the page is redirected to in multi-instance 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 to the top and becomes a new page.<br>If the URL of the target page does not exist in the page stack, the page is redirected to in multi-instance mode.|
## NamedRouterOptions<sup>10+</sup>
Describes the named route options.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| name | string | Yes | Name of the target named route.|
| params | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
## Examples ## Examples
### JavaScript-based Web-like Development Paradigm ### JavaScript-based Web-like Development Paradigm
```js ```ts
// Current page // Current page
export default { export default {
pushPage() { pushPage() {
...@@ -594,7 +977,7 @@ export default { ...@@ -594,7 +977,7 @@ export default {
} }
} }
``` ```
```js ```ts
// detail page // detail page
export default { export default {
onInit() { onInit() {
...@@ -704,7 +1087,7 @@ This API is deprecated since API version 9. You are advised to use [pushUrl<sup> ...@@ -704,7 +1087,7 @@ This API is deprecated since API version 9. You are advised to use [pushUrl<sup>
**Example** **Example**
```js ```ts
router.push({ router.push({
url: 'pages/routerpage2', url: 'pages/routerpage2',
params: { params: {
...@@ -734,7 +1117,7 @@ This API is deprecated since API version 9. You are advised to use [replaceUrl<s ...@@ -734,7 +1117,7 @@ This API is deprecated since API version 9. You are advised to use [replaceUrl<s
**Example** **Example**
```js ```ts
router.replace({ router.replace({
url: 'pages/detail', url: 'pages/detail',
params: { params: {
...@@ -761,11 +1144,11 @@ This API is deprecated since API version 9. You are advised to use [showAlertBef ...@@ -761,11 +1144,11 @@ This API is deprecated since API version 9. You are advised to use [showAlertBef
**Example** **Example**
```js ```ts
router.enableAlertBeforeBackPage({ router.enableAlertBeforeBackPage({
message: 'Message Info' message: 'Message Info'
}); });
``` ```
## router.disableAlertBeforeBackPage<sup>(deprecated)</sup> ## router.disableAlertBeforeBackPage<sup>(deprecated)</sup>
...@@ -779,6 +1162,6 @@ This API is deprecated since API version 9. You are advised to use [hideAlertBef ...@@ -779,6 +1162,6 @@ This API is deprecated since API version 9. You are advised to use [hideAlertBef
**Example** **Example**
```js ```ts
router.disableAlertBeforeBackPage(); router.disableAlertBeforeBackPage();
``` ```
en/application-dev/reference/apis/js-apis-system-router.md
浏览文件 @ 101b76b0
...@@ -343,8 +343,8 @@ Defines the page routing parameters. ...@@ -343,8 +343,8 @@ Defines the page routing parameters.
| Name | Type| Mandatory| Description | | Name | Type| Mandatory| Description |
| ------ | -------- | ---- | ------------------------------------------------------------ | | ------ | -------- | ---- | ------------------------------------------------------------ |
| uri<sup>7+</sup> | string | Yes | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.| | uri | string | Yes | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.|
| params<sup>7+</sup> | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.| | params | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
## BackRouterOptions ## BackRouterOptions
......
en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 101b76b0
...@@ -30,12 +30,12 @@ Creates a date picker in the given date range. ...@@ -30,12 +30,12 @@ Creates a date picker in the given date range.
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| -------------------------------- | ---------------------------------------- | ---------------------------------------- | | -------------------------------- | --------------------------------------------- | ------------------------------------------------------------ |
| lunar | boolean | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.<br>Default value: **false**| | lunar | boolean | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.<br>Default value: **false**|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width for the top and bottom items. | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items. | | textStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width of the selected item. | | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
## PickerTextStyle<sup>10+</sup> ## PickerTextStyle<sup>10+</sup>
......
en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
浏览文件 @ 101b76b0
...@@ -28,10 +28,10 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -28,10 +28,10 @@ Since API version 9, this API is supported in ArkTS widgets.
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| --------- | ---------------------------------------- | ---------------------------------------- | | --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| stars | number | Total number of ratings.<br>Default value: **5**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.| | stars | number | Total number of ratings.<br>Default value: **5**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.|
| stepSize | number | Step of an operation.<br>Default value: **0.5**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>Value range: [0.1, stars]| | stepSize | number | Step of an operation.<br>Default value: **0.5**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>Value range: [0.1, stars]|
| starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | Star style.<br>**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.<br>**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.<br>**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).<br>Local and online images are supported, but not **PixelMap** and **Resource** objects.<br>By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.<br>If this parameter is set to **undefined** or an empty string, the **\<Rating>** component loads the default star image source.| | starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | Star style.<br>**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.<br>**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.<br>**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).<br>Local and online images are supported, but not **PixelMap** and **Resource** objects.<br>By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.<br>If this parameter is set to **undefined** or an empty string, the **\<Rating>** component loads the default star image source.|
> **NOTE** > **NOTE**
......
en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 101b76b0
...@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| value | number | No| Current progress.<br>Default value: min<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | value | number | No| Current progress.<br>Default value: value of **min**<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| min | number | No| Minimum value.<br>Default value: **0**| | min | number | No| Minimum value.<br>Default value: **0**|
| max | number | No| Maximum value.<br>Default value: **100**<br>**NOTE**<br>If the value of **min** is greater than or equal to the value of **max**, the default value **0** is used for **min** and the default value **100** is used for **max**.<br>If the value is not within the [min, max] range, the value of **min** or **max**, whichever is closer.| | max | number | No| Maximum value.<br>Default value: **100**<br>**NOTE**<br>If the value of **min** is greater than or equal to the value of **max**, the default value **0** is used for **min** and the default value **100** is used for **max**.<br>If the value is not within the [min, max] range, the value of **min** or **max**, whichever is closer.|
| step | number | No| Step of the slider.<br>Default value: **1**<br>Value range: [0.01, max]<br>**NOTE**<br>If this parameter is set to a value less than 0 or a percentage, the default value is used.| | step | number | No| Step of the slider.<br>Default value: **1**<br>Value range: [0.01, max]<br>**NOTE**<br>If this parameter is set to a value less than 0 or a percentage, the default value is used.|
...@@ -47,7 +47,7 @@ Except touch target attributes, the universal attributes are supported. ...@@ -47,7 +47,7 @@ Except touch target attributes, the universal attributes are supported.
| trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.| | trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.<br>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.<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| | showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>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.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>The drawing area of the bubble is the overlay of the slider.<br>If no margin is set for the slider or the margin is not large enough, the bubble will be clipped.| | showTips | value: boolean,<br>content<sup>10+</sup>?: [ResourceStr](ts-types.md#resourcestr) | **value**: whether to display a tooltip when the user drags the slider.<br>Default value: **false**<br>**content**: text content of the tooltip. The default value is the current percentage.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When **direction** is set to **Axis.Horizontal**, the tooltip is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the tooltip is displayed on the left of the slider.<br>The drawing area of the tooltip is the overlay of the slider.<br>If no margin is set for the slider or the margin is not large enough, the tooltip will be clipped.|
| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.| | trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| blockBorderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.| | blockBorderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.|
| blockBorderWidth<sup>10+</sup> | [Length](ts-types.md#length) | Border width of the slider in the block direction.| | blockBorderWidth<sup>10+</sup> | [Length](ts-types.md#length) | Border width of the slider in the block direction.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 101b76b0
...@@ -14,7 +14,7 @@ Not supported ...@@ -14,7 +14,7 @@ Not supported
## APIs ## APIs
TextPicker(options?: {range: string[]|Resource|TextPickerRangeContent[], selected?: number, value?: string}) TextPicker(options?: {range: string[] | string[][] | Resource | TextPickerRangeContent[] | TextCascadePickerRangeContent[], selected?: number, value?: string})
Creates a text picker based on the selection range specified by **range**. Creates a text picker based on the selection range specified by **range**.
...@@ -22,9 +22,9 @@ Creates a text picker based on the selection range specified by **range**. ...@@ -22,9 +22,9 @@ Creates a text picker based on the selection range specified by **range**.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| range | string[] \| [Resource](ts-types.md#resource) \| [TextPickerRangeContent](#textpickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed. If it is dynamically changed to an empty array, the current value remains displayed.| | range | string[] \| string[][]<sup>10+</sup> \| [Resource](ts-types.md#resource) \|<br>[TextPickerRangeContent](#textpickerrangecontent10)[]<sup>10+</sup> \| [TextCascadePickerRangeContent](#textcascadepickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed. If it is dynamically changed to an empty array, the current value remains displayed.<br>**NOTE**<br>For a single-column picker, use a value of the string[], Resource, or TextPickerRangeContent[] type.<br>For a multi-column picker, use a value of the string[] type.<br>For a multi-column linked picker, use a value of the TextCascadePickerRangeContent[] type.<br>The Resource type supports only [strarray.json](../../quick-start/resource-categories-and-access.md#resource-group-subdirectories).|
| selected | number | No| Index of the default item in the range.<br>Default value: **0**<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | selected | number \| number[]<sup>10+</sup> | No| Index of the default item in the range.<br>Default value: **0**<br>**NOTE**<br>For a single-column picker, use a value of the number type.<br>For a multi-column (linked) picker, use a value of the number[] type.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item<br>**NOTE**<br>This parameter works only for a text list. It does not work for an image list or a list consisting of text and images.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables. | | value | string \| string[]<sup>10+</sup> | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item<br>**NOTE**<br>This parameter works only when the picker contains text only. <br>For a single-column picker, use a value of the string type.<br>For a multi-column (linked) picker, use a value of the string[] type.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables. |
## TextPickerRangeContent<sup>10+</sup> ## TextPickerRangeContent<sup>10+</sup>
...@@ -33,6 +33,13 @@ Creates a text picker based on the selection range specified by **range**. ...@@ -33,6 +33,13 @@ Creates a text picker based on the selection range specified by **range**.
| icon | string \| [Resource](ts-types.md#resource) | Yes | Image resource.| | icon | string \| [Resource](ts-types.md#resource) | Yes | Image resource.|
| text | string \| [Resource](ts-types.md#resource) | No | Text information.| | text | string \| [Resource](ts-types.md#resource) | No | Text information.|
## TextCascadePickerRangeContent<sup>10+</sup>
| Name| Type | Mandatory| Description |
| ------ | -------------------------------------------------------- | ---- | ---------- |
| text | string \| [Resource](ts-types.md#resource) | Yes | Text information.|
| children | [TextCascadePickerRangeContent](#textcascadepickerrangecontent10)[] | No | Linkage data.|
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
...@@ -40,9 +47,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -40,9 +47,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| defaultPickerItemHeight | number \| string | Height of each item in the picker.| | defaultPickerItemHeight | number \| string | Height of each item in the picker.|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items.| | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items.| | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of the selected item.| | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
| selectedIndex<sup>10+</sup> | number \| number[] | Sets the index value of the default selected item in the array. The priority is higher than that of the selected value in options.<br>**NOTE**<br>For a single-column picker, use a value of the number type. For a multi-column (linked) picker, use a value of the number[] type.|
## Events ## Events
...@@ -50,9 +58,9 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ...@@ -50,9 +58,9 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onAccept(callback: (value: string, index: number) => void) | Triggered when the OK button in the dialog box is clicked.<br><br>- **value**: value of the selected item.<br>- **index**: index of the selected item.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).| | onAccept(callback: (value: string, index: number) => void)<sup>(deprecated) </sup> | Triggered when the OK button in the dialog box is clicked.<br>- **value**: value of the selected item.<br>- **index**: index of the selected item.<br>This API is deprecated since API version 10.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).|
| onCancel(callback: () => void) | Triggered when the Cancel button in the dialog box is clicked.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).| | onCancel(callback: () => void)<sup>(deprecated) </sup> | Triggered when the Cancel button in the dialog box is clicked.<br>This API is deprecated since API version 10.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).|
| onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item.<br>**NOTE**<br>For a text list or a list consisting of text and images, **value** indicates the text value of the selected item. For an image list, **value** is empty.<br>- **index**: index of the selected item.| | onChange(callback: (value: string \| string[]<sup>10+</sup>, index: number \| number[]<sup>10+</sup>) =&gt; void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item. (For a multi-column picker, **value** is of the array type.)<br>- **index**: index of the selected item. (For a multi-column picker, **index** is of the array type.)<br>**NOTE**<br>When the picker contains text only or both text and imagery, **value** indicates the text value of the selected item.When the picker contains imagery only, **value** is empty.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 101b76b0
...@@ -28,12 +28,12 @@ Creates a time picker, which is in 24-hour format by default. ...@@ -28,12 +28,12 @@ Creates a time picker, which is in 24-hour format by default.
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| -------------------------------- | ---------------------------------------- | ----------------------------------- | | -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| useMilitaryTime | boolean | Whether to display time in 24-hour format. The value cannot be modified dynamically.<br>Default value: **false**| | useMilitaryTime | boolean | Whether the display time is in 24-hour format.<br>Default value: **false** |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items. | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items. | | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of the selected item. | | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
## Events ## Events
......
en/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md
浏览文件 @ 101b76b0
...@@ -170,14 +170,14 @@ Obtains the drawing context of the offscreen canvas. ...@@ -170,14 +170,14 @@ Obtains the drawing context of the offscreen canvas.
| Name | Type | Mandatory| Default Value| Description | | Name | Type | Mandatory| Default Value| Description |
| ----------- | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ | | ----------- | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| contextType | string | Yes | "2d" | Type of the drawing context of the offscreen canvas. | | contextType | string | Yes | "2d" | Type of the drawing context of the offscreen canvas. The value can only be **"2d"**. |
| option | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No | - | For details, see [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings).| | option | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No | - | For details, see [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings).|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------------------------------------------------------------ | --------------------------------- | | ------------------------------------------------------------ | --------------------------------- |
| [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) | Drawing context of the offscreen canvas.| | [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) | Drawing context of the offscreen canvas. If **contextType** in **getContext** is set to a value other than **"2d"** (including **null** and **undefined**), **null** is returned.|
**Example** **Example**
......
en/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 101b76b0
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
The **\<Badge>** component is a container that can be attached to another component for tagging. The **\<Badge>** component is a container that can be attached to another component for tagging.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -11,6 +11,10 @@ The **\<Badge>** component is a container that can be attached to another compon ...@@ -11,6 +11,10 @@ The **\<Badge>** component is a container that can be attached to another compon
This component supports only one child component. This component supports only one child component.
> **NOTE**
>
> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
## APIs ## APIs
...@@ -22,12 +26,12 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -22,12 +26,12 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| count | number | Yes| - | Number of notifications.| | count | number | Yes| Number of notifications.<br>**NOTE**<br>If the value is less than or equal to 0, no badge is displayed.<br>Value range: [-2147483648, 2147483647]<br>If the value is not an integer, it is rounded off to the nearest integer. For example, 5.5 is rounded off to 5.|
| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| | position | [BadgePosition](#badgeposition) | No| Position to display the badge relative to the parent component.<br>Default value: **BadgePosition.RightTop**|
| maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.| | maxCount | number | No| Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.<br>Default value: **99**<br>Value range: [-2147483648, 2147483647]<br>If the value is not an integer, it is rounded off to the nearest integer. For example, 5.5 is rounded off to 5.|
| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.| | style | [BadgeStyle](#badgestyle) | Yes| Style of the badge, including the font color, font size, badge color, and badge size.|
**API 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) **API 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
...@@ -57,15 +61,23 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -57,15 +61,23 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory| Default Value | Description | | Name | Type | Mandatory| Description |
| ------------------------- | ------------------------------------------------------------ | ---- | ----------------- | ------------------------------------------------------------ | | ------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. | | color | [ResourceColor](ts-types.md#resourcecolor) | No | Font color.<br>Default value: **Color.White** |
| fontSize | number \| string | No | 10 | Font size, in vp. | | fontSize | number \| string | No | Font size.<br>Default value: **10**<br>Unit: vp<br>**NOTE**<br>This parameter cannot be set in percentage.|
| badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| | badgeSize | number \| string | No | Badge size.<br>Default value: **16**<br>Unit: vp<br>**NOTE**<br>This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.|
| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Badge color. | | badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Badge color.<br>Default value: **Color.Red** |
| fontWeight<sup>10+</sup> | number \|[FontWeight](ts-appendix-enums.md#fontweight) \| string | No | FontWeight.Normal | Font weight of the text. | | fontWeight<sup>10+</sup> | number \|[FontWeight](ts-appendix-enums.md#fontweight) \| string | No | Font weight of the text.<br>Default value: **FontWeight.Normal**<br>**NOTE**<br>This parameter cannot be set in percentage.|
| borderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Border color of the background. | | borderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Border color of the background. |
| borderWidth<sup>10+</sup> | [Length](ts-types.md#length) | No | 1.0vp | Border width of the background. | | borderWidth<sup>10+</sup> | [Length](ts-types.md#length) | No | Border width of the background.<br>Default value: **1**<br>Unit: vp<br>**NOTE**<br>This parameter cannot be set in percentage.|
## Attributes
The [universal attributes](ts-universal-attributes-size.md) are supported.
## Events
The [universal events](ts-universal-events-click.md) are supported.
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ 101b76b0
...@@ -5,8 +5,10 @@ An action sheet is a dialog box that displays actions a user can take. ...@@ -5,8 +5,10 @@ An action sheet is a dialog box that displays actions a user can take.
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the [showActionSheet](../apis/js-apis-arkui-UIContext.md#showactionsheet) API in [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) to obtain the UI context.
## ActionSheet.show ## ActionSheet.show
......
en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ 101b76b0
...@@ -5,7 +5,10 @@ You can set the text content and response callback for an alert dialog box. ...@@ -5,7 +5,10 @@ You can set the text content and response callback for an alert dialog box.
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the[showAlertDialog](../apis/js-apis-arkui-UIContext.md#showalertdialog) API in [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) to obtain the UI context.
## Attributes ## Attributes
......
en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @ 101b76b0
...@@ -4,8 +4,11 @@ A date picker dialog box is a dialog box that allows users to select a date from ...@@ -4,8 +4,11 @@ A date picker dialog box is a dialog box that allows users to select a date from
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the [showDatePickerDialog](../apis/js-apis-arkui-UIContext.md#showdatepickerdialog) API in [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) to obtain the UI context.
## DatePickerDialog.show ## DatePickerDialog.show
...@@ -15,20 +18,20 @@ Shows a date picker dialog box. ...@@ -15,20 +18,20 @@ Shows a date picker dialog box.
**DatePickerDialogOptions** **DatePickerDialogOptions**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| start | Date | No| Date('1970-1-1') | Start date of the picker.| | start | Date | No| Start date of the picker.<br>Default value: **Date('1970-1-1')**|
| end | Date | No| Date('2100-12-31') | End date of the picker.| | end | Date | No| End date of the picker.<br>Default value: **Date('2100-12-31')**|
| selected | Date | No| Current system date| Selected date.| | selected | Date | No| Selected date.<br>Default value: current system date|
| lunar | boolean | No| false | Whether to display the lunar calendar.| | lunar | boolean | No| Whether to display the lunar calendar.<br>Default value: **false**|
| showTime<sup>10+</sup> | boolean | No| false | Whether to display the time item.| | showTime<sup>10+</sup> | boolean | No| Whether to display the time item.<br>Default value: **false**|
| useMilitaryTime<sup>10+</sup> | boolean | No| false | Whether to display time in 24-hour format.| | useMilitaryTime<sup>10+</sup> | boolean | No| Whether to display time in 24-hour format.<br>Default value: **false**|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width for the top and bottom items.| | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of all items except the top, bottom, and selected items.| | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of the selected item.| | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.| | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.| | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes.| | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the selected item in the picker changes.|
## Example ## Example
...@@ -86,3 +89,5 @@ struct DatePickerDialogExample { ...@@ -86,3 +89,5 @@ struct DatePickerDialogExample {
} }
} }
``` ```
![DataPickerDialog](figures/DataPickerDialog.gif)
en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 101b76b0
...@@ -5,7 +5,10 @@ A text picker dialog box is a dialog box that allows users to select text from t ...@@ -5,7 +5,10 @@ A text picker dialog box is a dialog box that allows users to select text from t
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the [showTextPickerDialog](../apis/js-apis-arkui-UIContext.md#showtextpickerdialog) API in [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) to obtain the UI context.
## TextPickerDialog.show ## TextPickerDialog.show
...@@ -17,13 +20,13 @@ Shows a text picker in the given settings. ...@@ -17,13 +20,13 @@ Shows a text picker in the given settings.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| range | string[] \| [Resource](ts-types.md#resource)\|[TextPickerRangeContent](ts-basic-components-textpicker.md#textpickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.| | range | string[] \| [Resource](ts-types.md#resource)\|[TextPickerRangeContent](ts-basic-components-textpicker.md#textpickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.<br>**NOTE**<br>The Resource type supports only [strarray.json](../../quick-start/resource-categories-and-access.md#resource-group-subdirectories).|
| selected | number | No| Index of the selected item.<br>Default value: **0**| | selected | number | No| Index of the selected item.<br>Default value: **0**|
| value | string | No | Text of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.| | value | string | No | Text of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.|
| defaultPickerItemHeight | number \| string | No| Height of the picker item.| | defaultPickerItemHeight | number \| string | No| Height of the picker item.|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.| | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.| | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.| | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
| onAccept | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.| | onAccept | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.| | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the selected item changes.| | onChange | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the selected item changes.|
...@@ -32,8 +35,8 @@ Shows a text picker in the given settings. ...@@ -32,8 +35,8 @@ Shows a text picker in the given settings.
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| value | string | Text of the selected item.<br>**NOTE**<br>For a text list or a list consisting of text and images, **value** indicates the text value of the selected item.<br>For an image list, **value** is empty.| | value | string \| string []<sup>10+</sup> | Text of the selected item.<br>**NOTE**<br>When the picker contains text only or both text and imagery, **value** indicates the text value of the selected item. (For a multi-column picker, **value** is of the array type.)<br>For an image list, **value** is empty.|
| index | number | Index of the selected item in the range.| | index | number \| number []<sup>10+</sup> | Index of the selected item in the range. (For a multi-column picker, **index** is of the array type.)|
## Example ## Example
...@@ -42,31 +45,35 @@ Shows a text picker in the given settings. ...@@ -42,31 +45,35 @@ Shows a text picker in the given settings.
@Entry @Entry
@Component @Component
struct TextPickerDialogExample { struct TextPickerDialogExample {
@State select: number = 2 private select: number | number[] = 2
private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
build() { build() {
Column() { Row() {
Button("TextPickerDialog") Column() {
.margin(20) Button("TextPickerDialog")
.onClick(() => { .margin(20)
TextPickerDialog.show({ .onClick(() => {
range: this.fruits, TextPickerDialog.show({
selected: this.select, range: this.fruits,
onAccept: (value: TextPickerResult) => { selected: this.select,
// Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. onAccept: (value: TextPickerResult) => {
this.select = value.index // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed.
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) this.select = value.index
}, console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
onCancel: () => { },
console.info("TextPickerDialog:onCancel()") onCancel: () => {
}, console.info("TextPickerDialog:onCancel()")
onChange: (value: TextPickerResult) => { },
console.info("TextPickerDialog:onChange()" + JSON.stringify(value)) onChange: (value: TextPickerResult) => {
} console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
}
})
}) })
}) }.width('100%')
}.width('100%') }.height('100%')
} }
} }
``` ```
![TextPickerDialog](figures/TextPickerDialog.gif)
en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 101b76b0
...@@ -5,6 +5,10 @@ A time picker dialog box is a dialog box that allows users to select a time from ...@@ -5,6 +5,10 @@ A time picker dialog box is a dialog box that allows users to select a time from
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext).
>
> Since API version 10, you can use the [showTimePickerDialog](../apis/js-apis-arkui-UIContext.md#showtimepickerdialog) API in [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) to obtain the UI context.
## TimePickerDialog.show ## TimePickerDialog.show
...@@ -19,9 +23,9 @@ Shows a time picker dialog box. ...@@ -19,9 +23,9 @@ Shows a time picker dialog box.
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selected | Date | No| Selected time.<br>Default value: current system time| | selected | Date | No| Selected time.<br>Default value: current system time|
| useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**| | useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.| | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.| | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.| | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.| | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.| | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.| | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|
...@@ -43,7 +47,7 @@ struct TimePickerDialogExample { ...@@ -43,7 +47,7 @@ struct TimePickerDialogExample {
TimePickerDialog.show({ TimePickerDialog.show({
selected: this.selectTime, selected: this.selectTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
//Set selectTime to the time when the OK button is clicked. In this way, when the dialog box is displayed again, the selected time is the time when the operation was confirmed last time. // Set selectTime to the time when the OK button is clicked. In this way, when the dialog box is displayed again, the selected time is the time when the operation was confirmed last time.
this.selectTime.setHours(value.hour, value.minute) this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
}, },
...@@ -77,3 +81,5 @@ struct TimePickerDialogExample { ...@@ -77,3 +81,5 @@ struct TimePickerDialogExample {
} }
} }
``` ```
![TimetPickerDialog](figures/TimePickerDialog.gif)
en/application-dev/reference/arkui-ts/ts-types.md
浏览文件 @ 101b76b0
...@@ -156,10 +156,10 @@ The **Font** type is used to set the text style. ...@@ -156,10 +156,10 @@ The **Font** type is used to set the text style.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ---------------------------------------- | ---- | ---------------------------------------- | | ------ | ---------------------------------------- | ---- | ---------------------------------------- |
| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.| | size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.<br>Default value: **16.0** |
| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No | 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.| | weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a thicker font.<br>Default value: **400** \| **FontWeight.Normal** |
| family | string \| [Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, HarmonyOS Sans'**. Currently, only the **'HarmonyOS Sans'** font is supported.| | family | string \| [Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, HarmonyOS Sans'**. Currently, only the **'HarmonyOS Sans'** font is supported.|
| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style. | | style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style.<br>Default value: **FontStyle.Normal** |
## Area<sup>8+</sup> ## Area<sup>8+</sup>
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 101b76b0
...@@ -22,10 +22,10 @@ Image effects include blur, shadow, spherical effect, and much more. ...@@ -22,10 +22,10 @@ Image effects include blur, shadow, spherical effect, and much more.
| invert | number | 0 | Inversion ratio of the component. If the value is **1**, the component is completely inverted. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| | invert | number | 0 | Inversion ratio of the component. If the value is **1**, the component is completely inverted. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sepia | number | 0 | Sepia conversion ratio of the component. If the value is **1**, the image is completely sepia. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.| | sepia | number | 0 | Sepia conversion ratio of the component. If the value is **1**, the image is completely sepia. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
| hueRotate | number \| string | '0deg' | Hue rotation angle of the component.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.| | hueRotate | number \| string | '0deg' | Hue rotation angle of the component.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.| | colorBlend<sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sphericalEffect<sup>10+</sup> | [number] | - | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.| | sphericalEffect<sup>10+</sup> | [number] | - | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.<br>This is a system API.|
| lightUpEffect<sup>10+</sup> | [number] | - | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| | lightUpEffect<sup>10+</sup> | [number] | - | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>This is a system API.|
| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image. | | pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.<br>This is a system API.|
## ShadowOptions ## ShadowOptions
...@@ -320,7 +320,6 @@ Below is how the component looks: ...@@ -320,7 +320,6 @@ Below is how the component looks:
Compared with the original image, the effect drawing is implemented in two steps: Compared with the original image, the effect drawing is implemented in two steps:
1. The image size is reduced. The resultant size is the original image size minus 1. The image size is reduced. The resultant size is the original image size minus the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
**right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080. **right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080.
2. Edge pixels are stretched to restore the image to its original size. 2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ 101b76b0
...@@ -11,7 +11,7 @@ The area change event is triggered when the component's size, position, or any o ...@@ -11,7 +11,7 @@ The area change event is triggered when the component's size, position, or any o
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ---------------------------------------- | ---- | ---------------------------------------- | | ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) =&gt; void) | No | Triggered when the component area changes.| | onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) =&gt; void) | No | Triggered when the component area changes in size or position due to layout updates. This event is not triggered for render attribute changes caused by re-rendering, such as changes of **translate** and **offset**.|
## Example ## Example
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或