diff --git a/en/application-dev/notification/background-agent-scheduled-reminder-guide.md b/en/application-dev/notification/background-agent-scheduled-reminder-guide.md index 997f750a0d937e6b7711b815c9b19e0ab5b741fe..1894942945c53a4d36bc2f9c892de28359faa9ff 100644 --- a/en/application-dev/notification/background-agent-scheduled-reminder-guide.md +++ b/en/application-dev/notification/background-agent-scheduled-reminder-guide.md @@ -4,164 +4,42 @@ You can set your application to call the **ReminderRequest** class to create scheduled reminders for countdown timers, calendar events, and alarm clocks. When the created reminders are published, the timing and pop-up notification functions of your application will be taken over by the reminder agent in the background, even when your application is frozen or exits. -## Available APIs - -**reminderAgent** encapsulates the methods for publishing and canceling reminders. - -**Table 1** Major APIs in reminderAgent -| API | Description | -| ------------------------------------------------------------ | ------------------------------------------------------------ | -| function publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback\): void;
function publishReminder(reminderReq: ReminderRequest): Promise\; | Publishes a scheduled reminder.
The maximum number of valid notifications (excluding expired ones that will not pop up again) is 30 for one application and 2000 for the entire system. | -| function cancelReminder(reminderId: number, callback: AsyncCallback\): void;
function cancelReminder(reminderId: number): Promise\; | Cancels a specified reminder. (The value of **reminderId** is obtained from the return value of **publishReminder**.) | -| function getValidReminders(callback: AsyncCallback>): void;
function getValidReminders(): Promise>; | Obtains all valid reminders set by the current application. | -| function cancelAllReminders(callback: AsyncCallback\): void;
function cancelAllReminders(): Promise\; | Cancels all reminders set by the current application. | -| function addNotificationSlot(slot: NotificationSlot, callback: AsyncCallback\): void;
function addNotificationSlot(slot: NotificationSlot): Promise\; | Registers a NotificationSlot instance to be used by the reminder. | -| function removeNotificationSlot(slotType: notification.SlotType, callback: AsyncCallback\): void;function removeNotificationSlot(slotType: notification.SlotType): Promise\; | Removes a NotificationSlot instance of a specified type. | - -**ActionButtonType** enumerates types of buttons displayed in a reminder notification. - -**Table 2** ActionButtonType enumeration - - - -| Name | Description | -| ------------------------ | ------------------------------------------------------------ | -| ACTION_BUTTON_TYPE_CLOSE | Close button, which can be tapped to stop the reminder alert tone, close the reminder notification, and cancel the reminder snoozing. | - -**ReminderType** enumerates the reminder types. - -**Table 3** ReminderType enumeration - - - -| Name | Description | -| ---------------------- | ------------------- | -| REMINDER_TYPE_TIMER | Countdown reminder. | -| REMINDER_TYPE_CALENDAR | Calendar reminder. | -| REMINDER_TYPE_ALARM | Alarm reminder. | - -**ActionButton** defines a button displayed in the reminder notification. - -**Table 4** ActionButton instance - - - -| Name | Type | Mandatory | Description | -| ----- | ---------------- | --------- | ------------------- | -| title | string | Yes | Text on the button. | -| type | ActionButtonType | Yes | Button type. | - -**WantAgent** sets the package and ability that are redirected to when the reminder notification is clicked. - -**Table 5** WantAgent instance - - - -| Name | Type | Mandatory | Description | -| ----------- | ------ | --------- | ------------------------------------------------------------ | -| pkgName | string | Yes | Name of the package redirected to when the reminder notification is clicked. | -| abilityName | string | Yes | Name of the ability redirected to when the reminder notification is clicked. | - -**MaxScreenWantAgent** sets the name of the target package and ability to start automatically when the reminder arrives and the device is not in use. If the device is in use, a notification will be displayed. - -**Table 6** MaxScreenWantAgent instance - - - -| Name | Type | Mandatory | Description | -| ----------- | ------ | --------- | ------------------------------------------------------------ | -| pkgName | string | Yes | Name of the package that is automatically started when the reminder arrives and the device is not in use. | -| abilityName | string | Yes | Name of the ability that is automatically started when the reminder arrives and the device is not in use. | - -**ReminderRequest** defines the reminder to publish. - -**Table 7** ReminderRequest instance - - - -| Name | Type | Mandatory | Description | -| ------------------ | ------------------------------ | --------- | ------------------------------------------------------------ | -| reminderType | ReminderType | Yes | Type of the reminder. | -| actionButton | [ActionButton?, ActionButton?] | No | Action button displayed in the reminder notification. | -| wantAgent | WantAgent | No | Information about the ability that is redirected to when the notification is clicked. | -| maxScreenWantAgent | MaxScreenWantAgent | No | Information about the ability that is automatically started when the reminder arrives. If the device is in use, a notification will be displayed. | -| ringDuration | number | No | Ring duration. | -| snoozeTimes | number | No | Number of reminder snooze times. | -| timeInterval | number | No | Reminder snooze interval. | -| title | string | No | Reminder title. | -| content | string | No | Reminder content. | -| expiredContent | string | No | Extended content to be displayed when the reminder expires. | -| snoozeContent | string | No | Extended content to be displayed when the reminder is snoozing. | -| notificationId | number | No | Notification ID used by the reminder. For details, see the API reference of the **NotificationRequest.setNotificationId(int id)** method. | -| slotType | SlotType | No | Type of the slot used by the reminder. | - -**ReminderRequestCalendar** extends **ReminderRequest** and defines a reminder for a calendar event. - -For the application to run properly, if both **repeatMonths** and **repeatDays** are not specified, the earliest reminder time must be later than the current time. - -**Table 8** ReminderRequestCalendar instance +## Available APIs +**reminderAgent** encapsulates the APIs for publishing and canceling reminders. -| Name | Type | Mandatory | Description | -| ------------ | -------------- | --------- | ------------------------------------------------------------ | -| dateTime | LocalDateTime | Yes | Reminder time, accurate to the minute. | -| repeatMonths | Array\ | No | Months in which the reminder repeats. The value range is 1 to 12. | -| repeatDays | Array\ | No | Date on which the reminder repeats. The value range is 1 to 31. | - -**ReminderRequestAlarm** extends **ReminderRequest** and defines a reminder for the alarm clock. - -**Table 9** ReminderRequestAlarm instance - - - -| Name | Type | Mandatory | Description | -| ---------- | -------------- | --------- | ------------------------------------------------------------ | -| hour | number | Yes | Hour portion of the reminder time. The value range is 0 to 23. | -| minute | number | Yes | Minute portion of the reminder time. The value range is 0 to 59. | -| daysOfWeek | Array\ | No | Days of a week when the reminder repeats. The value range is 1 to 7. | - -**ReminderRequestTimer** extends **ReminderRequest** and defines a reminder for a scheduled timer. - -**Table 10** ReminderRequestTimer instance - - - -| Name | Type | Mandatory | Description | -| -------------------- | ------ | --------- | ----------------------------------------- | -| triggerTimeInSeconds | number | Yes | Number of seconds in the countdown timer. | - -**LocalDateTime** defines a **LocalDateTime** instance. - -**Table 11** LocalDateTime instance - +For details about the APIs, see [reminderAgent](../reference/apis/js-apis-reminderAgent.md). +**Table 1** Major APIs in reminderAgent -| Name | Type | Mandatory | Description | -| ------ | ------ | --------- | ----------- | -| year | number | Yes | Year. | -| month | number | Yes | Month. | -| day | number | Yes | Date. | -| hour | number | Yes | Hour. | -| minute | number | Yes | Minute. | -| second | number | No | Second. | +| Name| Description| +| -------- | -------- | +| publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback<number>): void
publishReminder(reminderReq: ReminderRequest): Promise<number> | Publishes a scheduled reminder.
The maximum number of valid notifications (excluding expired ones that will not pop up again) is 30 for one application and 2000 for the entire system. | +| cancelReminder(reminderId: number, callback: AsyncCallback<void>): void
cancelReminder(reminderId: number): Promise<void> | Cancels a specified reminder. (The value of **reminderId** is obtained from the return value of **publishReminder**.)| +| getValidReminders(callback: AsyncCallback<Array<ReminderRequest>>): void
getValidReminders(): Promise<Array<ReminderRequest>> | Obtains all valid reminders set by the current application.| +| cancelAllReminders(callback: AsyncCallback<void>): void
cancelAllReminders(): Promise<void> | Cancels all reminders set by the current application.| +| addNotificationSlot(slot: NotificationSlot, callback: AsyncCallback<void>): void
addNotificationSlot(slot: NotificationSlot): Promise<void> | Registers a **NotificationSlot** instance to be used by the reminder.| +| removeNotificationSlot(slotType: notification.SlotType, callback: AsyncCallback<void>): void
removeNotificationSlot(slotType: notification.SlotType): Promise<void> | Removes a **NotificationSlot** instance of a specified type.| ## How to Develop > **NOTE** -> To publish a reminder, your application needs to apply for the **ohos.permission.PUBLISH_AGENT_REMINDER** permission. +> +> 1. To publish a reminder through the reminder agent, your application needs to apply for the **ohos.permission.PUBLISH_AGENT_REMINDER** permission. +> +> 2. Your application must have notification enabled. For details, see [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8). -Publish a 10-second countdown reminder. +1. Define a reminder agent. -1. Define a countdown timer instance. - - ``` + Sample code for defining a reminder agent for a countdown timer: + ```js import reminderAgent from '@ohos.reminderAgent'; import notification from '@ohos.notification'; export default { - // In JS Project: + // For a JS project: // timer: { - // In eTS Project: + // For an eTS project: let timer : reminderAgent.ReminderRequestTimer = { reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER, triggerTimeInSeconds: 10, @@ -188,9 +66,97 @@ Publish a 10-second countdown reminder. } ``` -2. Publish the reminder. - - ``` + Sample code for defining a reminder agent for a calendar event: + + ```js + // For a JS project: + // calendar: { + // For an eTS project: + let calendar : reminderAgent.ReminderRequestCalendar = { + reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR, + dateTime: { + year: 2050, + month: 7, + day: 30, + hour: 11, + minute: 14, + second: 30 + }, + repeatMonths: [1], + repeatDays: [1], + actionButton: [ + { + title: "close", + type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE + }, + { + title: "snooze", + type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE + }, + ], + wantAgent: { + pkgName: "com.example.device", + abilityName: "com.example.device.MainAbility" + }, + maxScreenWantAgent: { + pkgName: "com.example.device", + abilityName: "com.example.device.MainAbility" + }, + ringDuration: 5, + snoozeTimes: 2, + timeInterval: 5, + title: "this is title", + content: "this is content", + expiredContent: "this reminder has expired", + snoozeContent: "remind later", + notificationId: 100, + slotType: notification.SlotType.SOCIAL_COMMUNICATION + } + ``` + + Sample code for defining a reminder agent for an alarm: + + ```js + // For a JS project: + // alarm: { + // For an eTS project: + let alarm : reminderAgent.ReminderRequestAlarm = { + reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM, + hour: 11, + minute: 14, + daysOfWeek: [0], + actionButton: [ + { + title: "close", + type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE + }, + { + title: "snooze", + type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE + }, + ], + wantAgent: { + pkgName: "com.example.device", + abilityName: "com.example.device.MainAbility" + }, + maxScreenWantAgent: { + pkgName: "com.example.device", + abilityName: "com.example.device.MainAbility" + }, + ringDuration: 5, + snoozeTimes: 2, + timeInterval: 5, + title: "this is title", + content: "this is content", + expiredContent: "this reminder has expired", + snoozeContent: "remind later", + notificationId: 100, + slotType: notification.SlotType.SOCIAL_COMMUNICATION + } + ``` + +2. Publish a countdown reminder. + ```js startTimer() { reminderAgent.publishReminder(this.timer, (err, reminderId) =>{ this.printInfo(JSON.stringify(err)); @@ -200,98 +166,9 @@ Publish a 10-second countdown reminder. ``` HML page code: - - ``` + ```html
``` -Sample code for defining a calendar reminder instance: - -``` -// In JS Project: -// calendar: { -// In eTS Project: -let calendar : reminderAgent.ReminderRequestCalendar = { - reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR, - dateTime: { - year: 2050, - month: 7, - day: 30, - hour: 11, - minute: 14, - second: 30 - }, - repeatMonths: [1], - repeatDays: [1], - actionButton: [ - { - title: "close", - type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE - }, - { - title: "snooze", - type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE - }, - ], - wantAgent: { - pkgName: "com.example.device", - abilityName: "com.example.device.MainAbility" - }, - maxScreenWantAgent: { - pkgName: "com.example.device", - abilityName: "com.example.device.MainAbility" - }, - ringDuration: 5, - snoozeTimes: 2, - timeInterval: 5, - title: "this is title", - content: "this is content", - expiredContent: "this reminder has expired", - snoozeContent: "remind later", - notificationId: 100, - slotType: notification.SlotType.SOCIAL_COMMUNICATION -} -``` - -Sample code for defining an alarm reminder instance: - -``` -// In JS Project: -// alarm: { -// In eTS Project: -let alarm : reminderAgent.ReminderRequestAlarm = { - reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM, - hour: 11, - minute: 14, - daysOfWeek: [0], - actionButton: [ - { - title: "close", - type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE - }, - { - title: "snooze", - type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE - }, - ], - wantAgent: { - pkgName: "com.example.device", - abilityName: "com.example.device.MainAbility" - }, - maxScreenWantAgent: { - pkgName: "com.example.device", - abilityName: "com.example.device.MainAbility" - }, - ringDuration: 5, - snoozeTimes: 2, - timeInterval: 5, - title: "this is title", - content: "this is content", - expiredContent: "this reminder has expired", - snoozeContent: "remind later", - notificationId: 100, - slotType: notification.SlotType.SOCIAL_COMMUNICATION -} -``` \ No newline at end of file diff --git a/en/application-dev/reference/apis/js-apis-reminderAgent.md b/en/application-dev/reference/apis/js-apis-reminderAgent.md index fab6d67613fb848d212884d9e9517beacd6e7c2b..7bf34e070303239cd8b4928be23e7a111c264116 100644 --- a/en/application-dev/reference/apis/js-apis-reminderAgent.md +++ b/en/application-dev/reference/apis/js-apis-reminderAgent.md @@ -20,7 +20,7 @@ import reminderAgent from'@ohos.reminderAgent'; publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback<number>): void -Publishes an agent-powered reminder. This API uses an asynchronous callback to return the result. +Publishes a reminder through the reminder agent. This API uses an asynchronous callback to return the result. It can be called only when notification is enabled for the application through [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8). **Required permissions**: ohos.permission.PUBLISH_AGENT_REMINDER @@ -54,8 +54,9 @@ Publishes an agent-powered reminder. This API uses an asynchronous callback to r publishReminder(reminderReq: ReminderRequest): Promise<number> -Publishes an agent-powered reminder. This API uses a promise callback to return the result. +Publishes a reminder through the reminder agent. This API uses a promise to return the result. It can be called only when notification is enabled for the application through [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8). +**Required permissions**: ohos.permission.PUBLISH_AGENT_REMINDER **System capability**: SystemCapability.Notification.ReminderAgent @@ -290,7 +291,7 @@ Adds a notification slot. This API uses an asynchronous callback to return the r | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| slot | [NotificationSlot](js-apis-notification.md#notificationslot) | Yes| Notification slot, whose type can be set.| +| slot | [NotificationSlot](js-apis-notification.md#notificationslot) | Yes| Notification slot. | | callback | AsyncCallback<void> | Yes| Asynchronous callback used to return the result.| **Example** @@ -321,7 +322,7 @@ Adds a notification slot. This API uses a promise to return the result. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| slot | [NotificationSlot](js-apis-notification.md#notificationslot) | Yes| Notification slot, whose type can be set.| +| slot | [NotificationSlot](js-apis-notification.md#notificationslot) | Yes| Notification slot. | **Return value** @@ -455,7 +456,7 @@ Sets the package and ability that are redirected to when the reminder notificati ## MaxScreenWantAgent -Sets the name of the target package and ability to start automatically when the reminder arrives and the device is not in use. If the device is in use, a notification will be displayed. +Provides the information about the target package and ability to start automatically when the reminder is displayed in full-screen mode. This API is reserved. **System capability**: SystemCapability.Notification.ReminderAgent @@ -474,7 +475,7 @@ Defines the reminder to publish. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | reminderType | ReminderType | Yes| Type of the reminder.| -| actionButton | [ActionButton?, ActionButton?] | No| Action button displayed in the reminder notification. (The parameter is optional. Up to two buttons are supported.)| +| actionButton | [ActionButton?, ActionButton?] | No| Button displayed in the reminder notification. (The parameter is optional. Up to two buttons are supported.)| | wantAgent | WantAgent | No| Information about the ability that is redirected to when the notification is clicked.| | maxScreenWantAgent | MaxScreenWantAgent | No| Information about the ability that is automatically started when the reminder arrives. If the device is in use, a notification will be displayed.| | ringDuration | number | No| Ringing duration.| diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 1d668f270f754d5a5c5a64b2d1bd1c4291081a20..fa391ed8fc8e82744d8f4d5fccf91bbb808db44e 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -146,3 +146,4 @@ - [Text Picker Dialog Box](ts-methods-textpicker-dialog.md) - [Menu](ts-methods-menu.md) - [Built-in Enums](ts-appendix-enums.md) +- [Types](ts-types.md) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md index 6e66b0cf9bfd93562d37462ccbd9c21ba427e2cd..bc1899b007d00fcefcfea9ae41e40e0a87351fdd 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md @@ -4,7 +4,7 @@ > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -The **\** can accept and display the EGL/OpenGL ES and media data input. + The **\** can accept and display the EGL/OpenGL ES and media data input. ## Required Permissions @@ -16,14 +16,14 @@ The **\** can accept and display the EGL/OpenGL ES and media data in ## APIs -XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\) + XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}) **Parameters** | Name | Type | Mandatory | Description | | --------- | ------ | ---- | ----- | | id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters.| -| type | string | Yes | Type of the component. The options are as follows:
- **surface**: The content of this component is displayed individually, without being combined with that of other components.
- **component**: The content of this component is displayed after having been combined with that of other components.| +| type | string | Yes | Type of the component. The options are as follows:
-**surface**: The content of this component is displayed individually, without being combined with that of other components.
-**component**: The content of this component is displayed after having been combined with that of other components.| | libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer.| | controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component.| @@ -59,7 +59,7 @@ xcomponentController: XComponentController = new XComponentController() ### getXComponentSurfaceId -getXComponentSurfaceId(): string +getXComponentSurfaceId() Obtains the ID of the surface held by the **\**. The ID can be used for @ohos interfaces, such as camera-related interfaces. @@ -71,9 +71,10 @@ Obtains the ID of the surface held by the **\**. The ID can be used | ------ | ----------------------- | | string | ID of the surface held by the **\**.| + ### setXComponentSurfaceSize -setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void +setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}) Sets the width and height of the surface held by the **\**. @@ -86,9 +87,10 @@ Sets the width and height of the surface held by the **\**. | surfaceWidth | number | Yes | Width of the surface held by the **\**.| | surfaceHeight | number | Yes | Height of the surface held by the **\**.| + ### getXComponentContext -getXComponentContext(): Object +getXComponentContext() Obtains the context of an **\** object. @@ -98,10 +100,10 @@ Obtains the context of an **\** object. | ------ | ---------------------------------------- | | Object | Context of the **\** object. The APIs contained in the context are defined by developers.| -## Example -Provide a surface-type **\** to support capabilities such as camera preview. +## Example +Provide a surface-type **\** to support capabilities such as camera preview. You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-types.md b/en/application-dev/reference/arkui-ts/ts-types.md new file mode 100644 index 0000000000000000000000000000000000000000..0a31a4a46eea493e2f98df6301abe4dede9b2ddf --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-types.md @@ -0,0 +1,160 @@ +# Types + +## Resource + +The **Resource** type is used to reference resources for setting component attribute values. + +If a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited. + +- `$r('belonging.type.name')` + + **belonging**: system or application resource. The value can be **'sys'** or **'app'**. + + **type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**. + + **name**: resource name, which is determined during resource definition. + +- `$rawfile('filename')` + + **filename**: name of the file in **resources/rawfile** of the project. + + | Name | Type | Readable| Writable| Description | + | ----------------------- | ------ | ---- | ---- | ---------- | + | id | number | Yes | No | Resource ID. | + | type | number | Yes | No | Resource type. | + | params | any[] | Yes | No | Optional resource parameters. | + | bundleName9+ | string | Yes | No | Bundle name. | + | moduleName9+ | string | Yes | No | Module name.| + +## Length + +The **Length** type is used to represent a size unit. + +| Type | Description | +| -------- | ------------------------------------------------------------ | +| string | String type. Explicitly specify the length unit, for example, **'10px'**, or the length in percentage, for example, **'100%'**.| +| number | Number type. The default unit is vp. | +| Resource | Size referenced from system or application resources. | + +## ResourceStr8+ + +The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type. + +| Type | Description | +| -------- | --------------------------------------------------- | +| string | String type. | +| Resource | String referenced from system or application resources.| + +## Padding + +The **Padding** type is used to describe the padding areas in different directions of a component. + + | Name | Type | Mandatory| Description | + | ------- | ------ | ---- |------------------------ | + | top | Length | No | Height of the padding area on the top of the component. | + | right | Length | No | Width of the padding area on the right of the component.| + | bottom | Length | No | Height of the padding area at the bottom of the component. | + | left | Length | No | Width of the padding area on the left of the component.| + +## Margin + +The **Margin** type is used to describe the margin areas in different directions of a component. + + | Name | Type | Mandatory| Description | + | ------- | ------ | ---- |------------------------ | + | top | Length | No | Height of the margin area above the component. | + | right | Length | No | Width of the margin area on the right of the component.| + | bottom | Length | No | Height of the margin area below the component. | + | left | Length | No | Width of the margin area on the left of the component.| + +## Offset + +The **Offset** type is used to describe the offset coordinates of a component in the layout. + + | Name | Type | Mandatory| Description | + | -------- | ------ | ---- |--------------------- | + | dx | Length | Yes | Horizontal offset. | + | dy | Length | Yes | Vertical offset. | + +## ResourceColor8+ + +The **ResourceColor** type is used to describe the color types of resources. + +| Type | Description | +| -------- | ----------------------- | +| [Color](../reference/arkui-ts/ts-appendix-enums.md#color) | Color enum. | +| number | Color in the hexadecimal notation. | +| string | Color in the RGB or RGBA notion. | +| Resource | Color referenced from system or application resources.| + +## Font + +The **Font** type is used to set the text style. + +| Name | Type | Mandatory| Description | +| ------ | ------------------------------ | ---- | ------------------------------------------------------------ | +| size | number | No | Font size. If the value is of the number type, the unit fp is used. | +| weight | number | 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.| +| family | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | 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, sans-serif'**.| +| style | string \| Resource | No | Font style. | + +## Area8+ + +The **Area** type is used to describe the area information of the target element. + +| Name | Type | Description | +| -------------- | -------- | ------------------------------------------------- | +| width | Length | Width of the target element. The value is of the number type when being used as the return value and the unit is vp. | +| height | Length | Height of the target element. The value is of the number type when being used as the return value and the unit is vp. | +| position | Position | Position of the upper left corner of the target element relative to that of the parent element. | +| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. | + + +## Position8+ + +The **Position** type is used to represent coordinates of a point. + +| Name | Type | Mandatory| Description | +| ----- | ------- | ---- | ------------------------------------------- | +| x | Length | No | X coordinate. The value is of the number type when being used as the return value and the unit is vp. | +| y | Length | No | Y coordinate. The value is of the number type when used as the return value and the unit is vp. | + +## ConstraintSizeOptions + +The **ConstraintSizeOptions** type is used to set the constraint size of a component, thereby limiting the size range during component layout. + +| Name | Type | Mandatory | Description | +| --------- | -------- | ---- | -------------- | +| minWidth | Length | No | Minimum width of the element. | +| maxWidth | Length | No | Maximum width of the element. | +| minHeight | Length | No | Minimum height of the element. | +| maxHeight | Length | No | Maximum height of the element. | + +## SizeOptions + +The **SizeOptions** type is used to set the width and height. + +| Name | Type | Mandatory| Description | +| ------- | -------- | ---- | -------------- | +| width | Length | No | Width of the element. | +| height | Length | No | Height of the element. | + + +## BorderOptions + +The **BorderOptions** type is used to provide border information. + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | ----------- | +| width | Length | No | Border width. | +| color | ResourceColor | No | Border color. | +| radius | Length | No | Border radius. | +| style | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Border style. | + +## CustomBuilder8+ + +The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods. + +| Name | Type | Description | +| ------------- | ---------------------- | ------------------------------------------------------------ | +| CustomBuilder | () => any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by **@Builder**. For details, see [@Builder](../../ui/ts-component-based-builder.md).| diff --git a/en/application-dev/ui/ts-component-states-state.md b/en/application-dev/ui/ts-component-states-state.md index 2ae8aa3ed0d8b3810c5fbfbbcbca16d361ef432c..49f0b75863afa00c4033f3c64369e708c131901c 100644 --- a/en/application-dev/ui/ts-component-states-state.md +++ b/en/application-dev/ui/ts-component-states-state.md @@ -1,7 +1,7 @@ # @State -The @State decorated variable is the internal state data of the component. When the state data is modified, the build method of the component is called to refresh the UI. +The @State decorated variable is the internal state data of the component. When the state data is modified, the build method of the component is called to refresh the UI. Note that the @State decorator cannot listen for data changes at the inner layer. The @State data has the following features: @@ -20,8 +20,8 @@ The @State data has the following features: ## Simple Example of @State Decorated Attribute - -``` +```ts +// xxx.ets @Entry @Component struct MyComponent { @@ -45,9 +45,9 @@ struct MyComponent { ## Complex Example of @State Decorated Variable - -``` +```ts // Customize the status data class. +// xxx.ets class Model { value: string constructor(value: string) { @@ -60,8 +60,8 @@ class Model { struct EntryComponent { build() { Column() { - MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document - MyComponent({title: {value: 'Hello, World 2'}, count: 7}) // MyComponent2 in this document + MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document + MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document } } } @@ -102,6 +102,6 @@ In the preceding example: - When creating a MyComponent instance, initialize the variables in the component based on the variable name. For example: - ``` + ```ts MyComponent({title: {value: 'Hello, World 2'}, count: 7}) ```