Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs
提交 b825d0e7 编写于 作者: L LiAn 提交者： Gitee
浏览文件
操作

Merge branch 'master' of gitee.com:openharmony/docs into master 

Signed-off-by: NLiAn <lian15@huawei.com>
上级 91754e8d 9c4e34f0
展开全部 隐藏空白更改
内联 并排
Showing with 8145 addition and 5549 deletion
en/application-dev/device-usage-statistics/device-usage-statistics-overview.md
浏览文件 @ b825d0e7
......@@ -4,7 +4,7 @@ With device usage statistics APIs, you can have a better understanding of the ap
## Introduction
Currently you can have access to statistics on the application usage, and notification and system usage statistics feature will be available for use in later versions.
Currently you can have access to statistics on the application usage, and the notification and system usage statistics feature will be available for use in later versions.
- **The application usage statistics is updated**:
1. Every 30 minutes
......@@ -21,7 +21,7 @@ Currently you can have access to statistics on the application usage, and notifi
7. Number of FA usage records specified by **maxNum**, sorted by time (most recent first). If **maxNum** is not specified, the default value **1000** will be used.
8. Number of notifications from applications based on the specified start time and end time
9. Statistics about system events (hibernation, wakeup, unlocking, and screen locking) that occur between the specified start time and end time
9. Priority group of the invoker application or a specified application
10. Priority group of the invoker application or a specified application
- **The setters can be used to:**
......
en/application-dev/device/device-location-overview.md
浏览文件 @ b825d0e7
......@@ -37,3 +37,9 @@ Location awareness is offered by the system as a basic service for applications.
Your application can use the location function only after the user has granted the permission and turned on the function. If the location function is off, the system will not provide the location service for any application.
Since the location information is considered sensitive, your application still needs to obtain the location access permission from the user even if the user has turned on the location function. The system will provide the location service for your application only after it has been granted the permission to access the device location information.
## Samples
The following sample is provided to help you better understand how to develop location services:
-[`Location`: Location (eTS) (API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/device/Location)
en/application-dev/internationalization/i18n-guidelines.md
浏览文件 @ b825d0e7
# Internationalization Development (I18N)
This module provides system-related or enhanced I18N capabilities, such as locale management, phone number formatting, and calendar, through supplementary I18N interfaces that are not defined in ECMA 402.
The [Intl](intl-guidelines.md) module provides basic I18N capabilities through the standard I18N interfaces defined in ECMA 402. It works with the I18N module to provide a complete suite of I18N capabilities.
This module provides system-related or enhanced I18N capabilities, such as locale management, phone number formatting, and calendar, through supplementary I18N APIs that are not defined in ECMA 402. For more details about APIs and their usage, see [I18N](../reference/apis/js-apis-i18n.md).
## Obtaining System Language and Region Information
......@@ -90,7 +89,7 @@ You can use APIs provided in the following table to obtain the system language a
## Obtaining Calendar Information
[Calendar](../reference/apis/js-apis-intl.md) APIs are used to obtain calendar information, for example, the localized display of the calendar, the first day of a week, and the minimum count of days in the first week of a year.
[Calendar](../reference/apis/js-apis-i18n.md#calendar8) APIs are used to obtain calendar information, for example, the localized display of the calendar, the first day of a week, and the minimum count of days in the first week of a year.
### Available APIs
......@@ -119,7 +118,7 @@ You can use APIs provided in the following table to obtain the system language a
```js
var calendar = i18n.getCalendar("zh-CN", "gregory);
var calendar = i18n.getCalendar("zh-CN", "gregory");
```
2. Set the time for the **Calendar** object.
......@@ -192,7 +191,7 @@ You can use APIs provided in the following table to obtain the system language a
## Formatting a Phone Number
[PhoneNumberFormat](../reference/apis/js-apis-intl.md) APIs are used to format phone numbers in different countries and check whether the phone number formats are correct.
[PhoneNumberFormat](../reference/apis/js-apis-i18n.md#phonenumberformat8) APIs are used to format phone numbers in different countries and check whether the phone number formats are correct.
### Available APIs
......@@ -245,7 +244,7 @@ The **unitConvert** API is provided to help you implement measurement conversion
### How to Develop
1. Convert a measurement unit.
Call the [unitConvert](../reference/apis/js-apis-intl.md) method to convert a measurement unit and format the display result.
Call the [unitConvert](../reference/apis/js-apis-i18n.md#unitconvert8) method to convert a measurement unit and format the display result.
```js
......@@ -260,7 +259,7 @@ The **unitConvert** API is provided to help you implement measurement conversion
## Alphabet Index
[IndexUtil](../reference/apis/js-apis-intl.md) APIs are used to obtain the alphabet indexes of different locales and calculate the index to which a string belongs.
[IndexUtil](../reference/apis/js-apis-i18n.md#indexutil8) APIs are used to obtain the alphabet indexes of different locales and calculate the index to which a string belongs.
### Available APIs
......@@ -281,7 +280,7 @@ The **unitConvert** API is provided to help you implement measurement conversion
```js
var indexUtil = getInstance("zh-CN");
var indexUtil = i18n.getInstance("zh-CN");
```
2. Obtain the index list.
......@@ -312,7 +311,7 @@ The **unitConvert** API is provided to help you implement measurement conversion
## Obtaining Line Breaks of Text
When a text is displayed in more than one line, [BreakIterator](../reference/apis/js-apis-intl.md) APIs are used to obtain the line break positions of the text.
When a text is displayed in more than one line, [BreakIterator8](../reference/apis/js-apis-i18n.md#breakiterator8) APIs are used to obtain the line break positions of the text.
### Available APIs
......
en/application-dev/internationalization/intl-guidelines.md
浏览文件 @ b825d0e7
# Internationalization Development (Intl)
This module provides basic I18N capabilities, such as time and date formatting, number formatting, and string sorting, through the standard I18N interfaces defined in ECMA 402.
The [I18N](i18n-guidelines.md) module provides enhanced I18N capabilities through supplementary interfaces that are not defined in ECMA 402. It works with the Intl module to provide a complete suite of I18N capabilities.
This module provides basic I18N capabilities, such as time and date formatting, number formatting, and string sorting, through the standard I18N APIs defined in ECMA 402. For more details about APIs and their usage, see [Intl](../reference/apis/js-apis-intl.md).
> **NOTE**
>
......@@ -9,7 +8,7 @@ The [I18N](i18n-guidelines.md) module provides enhanced I18N capabilities throug
## Setting Locale Information
Use [Locale](../reference/apis/js-apis-intl.md) APIs to maximize or minimize locale information.
Use [Locale](../reference/apis/js-apis-intl.md#locale) APIs to maximize or minimize locale information.
### Available APIs
......@@ -27,7 +26,7 @@ Use [Locale](../reference/apis/js-apis-intl.md) APIs to maximize or minimize loc
1. Instantiate a **Locale** object.
Create a **Locale** object by using the **Locale** constructor. This method receives a string representing the locale and an optional [Attributes](../reference/apis/js-apis-intl.md) list.
Create a **Locale** object by using the **Locale** constructor. This method receives a string representing the locale and an optional [Attributes](../reference/apis/js-apis-intl.md#localeoptions) list.
A **Locale** object consists of four parts: language, script, region, and extension, which are separated by using a hyphen (-).
- Language: mandatory. It is represented by a two-letter or three-letter code as defined in ISO-639. For example, **en** indicates English and **zh** indicates Chinese.
......@@ -46,7 +45,7 @@ Use [Locale](../reference/apis/js-apis-intl.md) APIs to maximize or minimize loc
```js
var locale = "zh-CN";
var options = {caseFirst: false, calendar: "chinese", collation: pinyin};
var options = {caseFirst: false, calendar: "chinese", collation: "pinyin"};
var localeObj = new intl.Locale(locale, options);
```
......@@ -77,7 +76,7 @@ Use [Locale](../reference/apis/js-apis-intl.md) APIs to maximize or minimize loc
## Formatting the Date and Time
Use [DateTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the date and time for a specific locale.
Use [DateTimeFormat](../reference/apis/js-apis-intl.md#datetimeformat) APIs to format the date and time for a specific locale.
### Available APIs
......@@ -102,7 +101,7 @@ Use [DateTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the date
var dateTimeFormat = new intl.DateTimeFormat();
```
Alternatively, use your own locale and formatting parameters to create a **DateTimeFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [DateTimeOptions](../reference/apis/js-apis-intl.md).
Alternatively, use your own locale and formatting parameters to create a **DateTimeFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [DateTimeOptions](../reference/apis/js-apis-intl.md#datetimeoptions).
```js
var options = {dateStyle: "full", timeStyle: "full"};
......@@ -114,7 +113,7 @@ Use [DateTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the date
Call the **format** method to format the date and time in the **DateTimeFormat** object. This method returns a string representing the formatting result.
```js
Date date = new Date();
var date = new Date();
var formatResult = dateTimeFormat.format(date);
```
......@@ -123,9 +122,10 @@ Use [DateTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the date
Call the **formatRange** method to format the period in the **DateTimeFormat** object. This method requires input of two **Date** objects, which respectively indicate the start date and end date of a period. This method returns a string representing the formatting result.
```js
Date startDate = new Date();
Date endDate = new Date();
var formatResult = dateTimeFormat.formatRange(startDate, endDate);
var startDate = new Date(2021, 11, 17, 3, 24, 0);
var endDate = new Date(2021, 11, 18, 3, 24, 0);
var datefmt = new Intl.DateTimeFormat("en-GB");
datefmt.formatRange(startDate, endDate);
```
4. Obtain attributes of the **DateTimeFormat** object.
......@@ -139,7 +139,7 @@ Use [DateTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the date
## Formatting Numbers
Use [NumberFormat](../reference/apis/js-apis-intl.md) APIs to format numbers for a specific locale.
Use [NumberFormat](../reference/apis/js-apis-intl.md#numberformat) APIs to format numbers for a specific locale.
### Available APIs
......@@ -163,7 +163,7 @@ Use [NumberFormat](../reference/apis/js-apis-intl.md) APIs to format numbers for
var numberFormat = new intl.NumberFormat();
```
Alternatively, use your own locale and formatting parameters to create a **NumberFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [NumberOptions](../reference/apis/js-apis-intl.md).
Alternatively, use your own locale and formatting parameters to create a **NumberFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [NumberOptions](../reference/apis/js-apis-intl.md#numberoptions).
```js
var options = {compactDisplay: "short", notation: "compact"};
......@@ -190,7 +190,7 @@ Use [NumberFormat](../reference/apis/js-apis-intl.md) APIs to format numbers for
## Sorting Strings
Use [Collator](../reference/apis/js-apis-intl.md) APIs to sort strings based on a specific locale. Users in different regions have different preferences for string sorting.
Use [Collator](../reference/apis/js-apis-intl.md#collator8) APIs to sort strings based on a specific locale. Users in different regions have different preferences for string sorting.
### Available APIs
......@@ -214,7 +214,7 @@ Use [Collator](../reference/apis/js-apis-intl.md) APIs to sort strings based on
var collator = new intl.Collator();
```
Alternatively, use your own locale and formatting parameters to create a **Collator** object. For a full list of parameters, see [CollatorOptions](../reference/apis/js-apis-intl.md).
Alternatively, use your own locale and formatting parameters to create a **Collator** object. For a full list of parameters, see [CollatorOptions](../reference/apis/js-apis-intl.md#collatoroptions8).
```js
var collator= new intl.Collator("zh-CN", {localeMatcher: "best fit", usage: "sort"});
......@@ -222,7 +222,7 @@ Use [Collator](../reference/apis/js-apis-intl.md) APIs to sort strings based on
2. Compare two strings.
Call the **compare** method to compare two input strings. This method returns a value as the comparison result. The return value **-1** indicates that the first string is shorter than the second string, the return value **1** indicates that the first string is longer than the second string, and the return value **0** indicates that the two strings are of equal lengths.
Call the **compare** method to compare two input strings. This method returns a value as the comparison result. The return value **-1** indicates that the first string is shorter than the second string, the return value **1** indicates that the first string is longer than the second string, and the return value **0** indicates that the two strings are of equal lengths. This allows you to sort character strings based on the comparison result.
```js
var str1 = "first string";
......@@ -241,7 +241,7 @@ Use [Collator](../reference/apis/js-apis-intl.md) APIs to sort strings based on
## Determining the Singular-Plural Type
Use [PluralRules](../reference/apis/js-apis-intl.md) APIs to determine the singular-plural type for a specific locale. According to the grammar of certain languages, the singular or plural form of a noun depends on its preceding number.
Use [PluralRules](../reference/apis/js-apis-intl.md#pluralrules8) APIs to determine the singular-plural type for a specific locale. According to the grammar of certain languages, the singular or plural form of a noun depends on its preceding number.
### Available APIs
......@@ -264,10 +264,10 @@ Use [PluralRules](../reference/apis/js-apis-intl.md) APIs to determine the singu
var pluralRules = new intl.PluralRules();
```
Alternatively, use your own locale and formatting parameters to create a **PluralRules** object. For a full list of parameters, see [PluralRulesOptions](../reference/apis/js-apis-intl.md).
Alternatively, use your own locale and formatting parameters to create a **PluralRules** object. For a full list of parameters, see [PluralRulesOptions](../reference/apis/js-apis-intl.md#pluralrulesoptions8).
```js
var plurals = new intl.PluralRules("zh-CN", {localeMatcher: "best fit", type: "cardinal"});
var pluralRules = new intl.PluralRules("zh-CN", {localeMatcher: "best fit", type: "cardinal"});
```
2. Determine the singular-plural type.
......@@ -282,7 +282,7 @@ Use [PluralRules](../reference/apis/js-apis-intl.md) APIs to determine the singu
## Formatting the Relative Time
Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the relative time for a specific locale.
Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md#relativetimeformat8) APIs to format the relative time for a specific locale.
### Available APIs
......@@ -307,7 +307,7 @@ Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the r
var relativeTimeFormat = new intl.RelativeTimeFormat();
```
Alternatively, use your own locale and formatting parameters to create a **RelativeTimeFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [ RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md).
Alternatively, use your own locale and formatting parameters to create a **RelativeTimeFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md#relativetimeformatinputoptions8).
```js
var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"});
......@@ -335,8 +335,16 @@ Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the r
4. Obtain attributes of the **RelativeTimeFormat** object.
Call the **resolvedOptions** method to obtain attributes of the **RelativeTimeFormat** object. This method will return an array that contains all attributes and values of the object. For a full list of attributes, see [ RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md).
Call the **resolvedOptions** method to obtain attributes of the **RelativeTimeFormat** object. This method will return an array that contains all attributes and values of the object. For a full list of attributes, see [RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md#relativetimeformatresolvedoptions8).
```js
var options = numberFormat.resolvedOptions();
```
## Samples
The following sample is provided to help you better understand how to develop internationalization capabilities:
-[`International`: Internationalization (JS) (API8)](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/International)
-[`International`: Internationalization (eTS) (API8) (Full SDK)](https://gitee.com/openharmony/applications_app_samples/tree/master/common/International)
en/application-dev/notification/background-agent-scheduled-reminder-guide.md
浏览文件 @ b825d0e7
......@@ -7,139 +7,33 @@ You can set your application to call the **ReminderRequest** class to create sch
## Available APIs
**reminderAgent** encapsulates the methods for publishing and canceling reminders.
**reminderAgent** encapsulates the APIs for publishing and canceling reminders.
**Table 1** Major APIs in reminderAgent
| Name| Description|
| -------- | -------- |
| function publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback&lt;number&gt;): void;<br>function publishReminder(reminderReq: ReminderRequest): Promise&lt;number&gt;; | Publishes a scheduled reminder.<br>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&lt;void&gt;): void;<br>function cancelReminder(reminderId: number): Promise&lt;void&gt;; | Cancels a specified reminder. (The value of **reminderId** is obtained from the return value of **publishReminder**.)|
| function getValidReminders(callback: AsyncCallback&lt;Array&lt;ReminderRequest&gt;&gt;): void;<br>function getValidReminders(): Promise&lt;Array&lt;ReminderRequest&gt;&gt;; | Obtains all valid reminders set by the current application.|
| function cancelAllReminders(callback: AsyncCallback&lt;void&gt;): void;<br>function cancelAllReminders(): Promise&lt;void&gt;; | Cancels all reminders set by the current application.|
| function addNotificationSlot(slot: NotificationSlot, callback: AsyncCallback&lt;void&gt;): void;<br>function addNotificationSlot(slot: NotificationSlot): Promise&lt;void&gt;; | Registers a **NotificationSlot** instance to be used by the reminder. |
| function removeNotificationSlot(slotType: notification.SlotType, callback: AsyncCallback&lt;void&gt;): void;<br>function removeNotificationSlot(slotType: notification.SlotType): Promise&lt;void&gt;; | Removes a **NotificationSlot** instance of a specified type. |
For details about the APIs, see [reminderAgent](../reference/apis/js-apis-reminderAgent.md).
**ActionButtonType** enumerates types of buttons displayed in a reminder notification.
**Table 2** ActionButtonType enums
| Name| Description|
| -------- | -------- |
| ACTION_BUTTON_TYPE_CLOSE | Close button, which can stop the reminder alert tone, close the reminder notification, and cancel the reminder snoozing.|
| ACTION_BUTTON_TYPE_SNOOZE | Snooze button, which can snooze the reminder.|
**ReminderType** enumerates the reminder types.
**Table 3** ReminderType enums
**Table 1** Major APIs in reminderAgent
| 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
| 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
| 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
| 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
| 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 **NotificationRequest::SetNotificationId(int32_t id)**.|
| 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
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| dateTime | LocalDateTime | Yes| Reminder time, accurate to the minute.|
| repeatMonths | Array&lt;number&gt; | No| Months in which the reminder repeats. The value range is 1 to 12.|
| repeatDays | Array&lt;number&gt; | 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
| 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&lt;number&gt; | 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
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| triggerTimeInSeconds | number | Yes| Number of seconds in the countdown timer.|
**LocalDateTime** defines a **LocalDateTime** instance.
**Table 11** LocalDateTime
| 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.|
| publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback&lt;number&gt;): void<br>publishReminder(reminderReq: ReminderRequest): Promise&lt;number&gt; | Publishes a scheduled reminder.<br>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&lt;void&gt;): void<br>cancelReminder(reminderId: number): Promise&lt;void&gt; | Cancels a specified reminder. (The value of **reminderId** is obtained from the return value of **publishReminder**.)|
| getValidReminders(callback: AsyncCallback&lt;Array&lt;ReminderRequest&gt;&gt;): void<br>getValidReminders(): Promise&lt;Array&lt;ReminderRequest&gt;&gt; | Obtains all valid reminders set by the current application.|
| cancelAllReminders(callback: AsyncCallback&lt;void&gt;): void<br>cancelAllReminders(): Promise&lt;void&gt; | Cancels all reminders set by the current application.|
| addNotificationSlot(slot: NotificationSlot, callback: AsyncCallback&lt;void&gt;): void<br>addNotificationSlot(slot: NotificationSlot): Promise&lt;void&gt; | Registers a **NotificationSlot** instance to be used by the reminder.|
| removeNotificationSlot(slotType: notification.SlotType, callback: AsyncCallback&lt;void&gt;): void<br>removeNotificationSlot(slotType: notification.SlotType): Promise&lt;void&gt; | 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 {
......@@ -172,8 +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));
......@@ -183,98 +166,9 @@ Publish a 10-second countdown reminder.
```
HML page code:
```
```html
<div class="container">
<button type="text" value="publishReminder" onclick="startTimer"></button>
</div>
```
Sample code for defining a calendar reminder instance:
```
// 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 an alarm reminder instance:
```
// 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
}
```
en/application-dev/notification/notification-guidelines.md
浏览文件 @ b825d0e7
......@@ -28,14 +28,14 @@ System applications also support notification-related configuration options, suc
## Available APIs
Certain APIs can be invoked only by system applications that have been granted the **SystemCapability.Notification.Notification** permission. The APIs use either a callback or promise to return the result. The tables below list the APIs that use a callback, which provide same functions as their counterparts that use a promise. For details about the APIs, see the [API document](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-notification.md).
Certain APIs can be called only by system applications that have been granted the **SystemCapability.Notification.Notification** permission. The APIs use either a callback or promise to return the result. The tables below list the APIs that use a callback, which provide the same functions as their counterparts that use a promise. For details about the APIs, see the [API document](../reference/apis/js-apis-notification.md).
**Table 1** APIs for notification enabling
| API | Description |
| ------------------------------------------------------------ | ---------------- |
| isNotificationEnabled(bundle: BundleOption, callback: AsyncCallback<boolean>): void | Checks whether notification is enabled.|
| enableNotification(bundle: BundleOption, enable: boolean, callback: AsyncCallback<void>): void | Sets whether to enable notification. |
| isNotificationEnabled(bundle: BundleOption, callback: AsyncCallback\<boolean>): void | Checks whether notification is enabled.|
| enableNotification(bundle: BundleOption, enable: boolean, callback: AsyncCallback\<void>): void | Sets whether to enable notification. |
If the notification function of an application is disabled, it cannot send notifications.
......@@ -45,11 +45,11 @@ If the notification function of an application is disabled, it cannot send notif
| API | Description |
| ------------------------------------------------------------ | ---------------- |
| subscribe(subscriber: NotificationSubscriber, info: NotificationSubscribeInfo, callback: AsyncCallback<void>): void | Subscribes to a notification with the subscription information specified.|
| subscribe(subscriber: NotificationSubscriber, callback: AsyncCallback<void>): void | Subscribes to all notifications. |
| unsubscribe(subscriber: NotificationSubscriber, callback: AsyncCallback<void>): void | Unsubscribes from a notification. |
| subscribe(subscriber: NotificationSubscriber, info: NotificationSubscribeInfo, callback: AsyncCallback\<void>): void | Subscribes to a notification with the subscription information specified.|
| subscribe(subscriber: NotificationSubscriber, callback: AsyncCallback\<void>): void | Subscribes to all notifications. |
| unsubscribe(subscriber: NotificationSubscriber, callback: AsyncCallback\<void>): void | Unsubscribes from a notification. |
The subscription APIs support subscription to all notifications or notifications from specific applications.
The subscription APIs support subscription to all notifications and notifications from specific applications.
......@@ -69,10 +69,10 @@ The subscription APIs support subscription to all notifications or notifications
| API | Description |
| ------------------------------------------------------------ | ------------------------ |
| publish(request: NotificationRequest, callback: AsyncCallback<void>): void | Publishes a notification. |
| publish(request: NotificationRequest, userId: number, callback: AsyncCallback<void>): void | Publishes a notification to the specified user. |
| cancel(id: number, label: string, callback: AsyncCallback<void>): void | Cancels a specified notification. |
| cancelAll(callback: AsyncCallback<void>): void; | Cancels all notifications published by the application.|
| publish(request: NotificationRequest, callback: AsyncCallback\<void>): void | Publishes a notification. |
| publish(request: NotificationRequest, userId: number, callback: AsyncCallback\<void>): void | Publishes a notification to the specified user. |
| cancel(id: number, label: string, callback: AsyncCallback\<void>): void | Cancels a specified notification. |
| cancelAll(callback: AsyncCallback\<void>): void; | Cancels all notifications published by the application.|
The **publish** API that carries **userId** can be used to publish notifications to subscribers of a specified user.
......@@ -136,7 +136,7 @@ var subscriber = {
Before publishing a notification, check whether the notification feature is enabled for your application. By default, the feature is disabled. The application calls **Notification.requestEnableNotification** to prompt the user to enable the feature.
```js
Notification.requestEnableNotification() .then((data) => {
Notification.requestEnableNotification().then((data) => {
console.info('===>requestEnableNotification success');
}).catch((err) => {
console.error('===>requestEnableNotification failed because ' + JSON.stringify(err));
......@@ -166,7 +166,7 @@ var notificationRequest = {
}
// Publish the notification.
Notification.publish(notificationRequest) .then((data) => {
Notification.publish(notificationRequest).then((data) => {
console.info('===>publish promise success req.id : ' + notificationRequest.id);
}).catch((err) => {
console.error('===>publish promise failed because ' + JSON.stringify(err));
......@@ -235,7 +235,7 @@ var notificationRequest = {
}
// Publish the notification.
Notification.publish(notificationRequest) .then((data) => {
Notification.publish(notificationRequest).then((data) => {
console.info('===>publish promise success req.id : ' + notificationRequest.id);
}).catch((err) => {
console.error('===>publish promise failed because ' + JSON.stringify(err));
......
en/application-dev/quick-start/start-overview.md
浏览文件 @ b825d0e7
......@@ -45,8 +45,8 @@ This document provides an ability with two pages. For more information about abi
## Tool Preparation
1. Download the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta).
1. Download the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download).
2. Install DevEco Studio and configure the development environment. For details, see [Setting Up the Development Environment](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443).
When you are done, follow the instructions in [Getting Started with eTS in Stage Model](start-with-ets-stage.md), [Getting Started with eTS in FA Model](start-with-ets-fa.md), and [Getting Started with JavaScript in FA Model](../quick-start/start-with-js-fa.md).
When you are done, follow the instructions in [Getting Started with eTS in Stage Model](start-with-ets-stage.md), [Getting Started with eTS in FA Model](start-with-ets-fa.md), and [Getting Started with JavaScript in FA Model](start-with-js-fa.md).
en/application-dev/quick-start/start-with-ets-fa.md
浏览文件 @ b825d0e7
......@@ -5,7 +5,7 @@
>
> To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
>
> For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
> For best possible results, use [DevEco Studio V3.0.0.993](https://developer.harmonyos.com/cn/develop/deveco-studio#download) for your development.
## Creating an eTS Project
......@@ -128,7 +128,6 @@
![en-us_image_0000001311334932](figures/en-us_image_0000001311334932.png)
> **NOTE**
>
> You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
- Configure the route for the second page, by setting **pages/second** under **module - js - pages** in the **config.json** The sample code is as follows: The sample code is as follows:
......@@ -140,7 +139,7 @@
"pages": [
"pages/index",
"pages/second"
],
]
}
]
}
......@@ -288,7 +287,7 @@ You can implement page redirection through the page router, which finds the targ
1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signature**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
![06](figures/06.png)
......
en/application-dev/quick-start/start-with-ets-stage.md
浏览文件 @ b825d0e7
......@@ -5,7 +5,7 @@
>
> To use eTS, your DevEco Studio must be V3.0.0.900 Beta3 or later.
>
> For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
> For best possible results, use [DevEco Studio V3.0.0.993](https://developer.harmonyos.com/cn/develop/deveco-studio#download) for your development.
## Creating an eTS Project
......@@ -132,7 +132,6 @@
![09](figures/09.png)
> **NOTE**
>
> You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
- Configure the route for the second page: In the **Project** window, choose **entry** > **src** > **main** > **resources** > **base** > **profile**. In the **main_pages.json** file, set **pages/second** under **src**. The sample code is as follows:
......@@ -286,7 +285,7 @@ You can implement page redirection through the page router, which finds the targ
1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signaure**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
![06](figures/06.png)
......
en/application-dev/quick-start/start-with-js-fa.md
浏览文件 @ b825d0e7
......@@ -3,7 +3,7 @@
> **NOTE**
>
> For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
> For best possible results, use [DevEco Studio V3.0.0.993](https://developer.harmonyos.com/cn/develop/deveco-studio#download) for your development.
## Creating a JavaScript Project
......@@ -226,7 +226,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure...** > **Project** > **Signing Configs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
2. Choose **File** > **Project Structure...** > **Project** > **Signing Configs**, and select **Automatically generate signature**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
![06](figures/06.png)
......
en/application-dev/reference/apis/Readme-EN.md
浏览文件 @ b825d0e7
......@@ -138,6 +138,7 @@
- [@ohos.configPolicy](js-apis-config-policy.md)
- [@ohos.enterpriseDeviceManager](js-apis-enterprise-device-manager.md)
- [@ohos.EnterpriseAdminExtensionAbility](js-apis-EnterpriseAdminExtensionAbility.md)
- enterpriseDeviceManager/[DeviceSettingsManager](js-apis-enterpriseDeviceManager-DeviceSettingsManager.md)
- Security
......
en/application-dev/reference/apis/js-apis-enterprise-device-manager.md
浏览文件 @ b825d0e7
......@@ -18,7 +18,7 @@ enableAdmin(admin: Want, enterpriseInfo: EnterpriseInfo, type: AdminType, callba
Enables a device administrator application based on the specified bundle name and class name. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.MANAGE_ADMIN
**Required permissions**: ohos.permission.MANAGE_ENTERPRISE_DEVICE_ADMIN
**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
......@@ -27,8 +27,8 @@ Enables a device administrator application based on the specified bundle name an
| Name | Type | Mandatory | Description |
| -------------- | ----------------------------------- | ---- | ------------------ |
| admin | [Want](js-apis-application-Want.md) | Yes | Device administrator application. |
| enterpriseInfo | [EnterpriseInfo](#EnterpriseInfo) | Yes | Enterprise information of the device administrator application. |
| type | [AdminType](#AdminType) | Yes | Type of the device administrator to enable. |
| enterpriseInfo | [EnterpriseInfo](#enterpriseinfo) | Yes | Enterprise information of the device administrator application. |
| type | [AdminType](#admintype) | Yes | Type of the device administrator to enable. |
| callback | AsyncCallback\<boolean> | Yes | Callback used to return the result.|
**Example**
......@@ -57,7 +57,7 @@ enableAdmin(admin: Want, enterpriseInfo: EnterpriseInfo, type: AdminType, userId
Enables a device administrator application based on the specified bundle name and class name. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.MANAGE_ADMIN
**Required permissions**: ohos.permission.MANAGE_ENTERPRISE_DEVICE_ADMIN
**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
......@@ -66,8 +66,8 @@ Enables a device administrator application based on the specified bundle name an
| Name | Type | Mandatory | Description |
| -------------- | ----------------------------------- | ---- | ---------------------------- |
| admin | [Want](js-apis-application-Want.md) | Yes | Device administrator application. |
| enterpriseInfo | [EnterpriseInfo](#EnterpriseInfo) | Yes | Enterprise information of the device administrator application. |
| type | [AdminType](#AdminType) | Yes | Type of the device administrator to enable. |
| enterpriseInfo | [EnterpriseInfo](#enterpriseinfo) | Yes | Enterprise information of the device administrator application. |
| type | [AdminType](#admintype) | Yes | Type of the device administrator to enable. |
| userId | number | Yes | User ID The default value is the user ID of the caller. The value must be greater than or equal to 0.|
| callback | AsyncCallback\<boolean> | Yes | Callback used to return the result. |
......@@ -97,7 +97,7 @@ enableAdmin(admin: Want, enterpriseInfo: EnterpriseInfo, type: AdminType, userId
Enables a device administrator application based on the specified bundle name and class name. This API uses a promise to return the result.
**Required permissions**: ohos.permission.MANAGE_ADMIN
**Required permissions**: ohos.permission.MANAGE_ENTERPRISE_DEVICE_ADMIN
**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
......@@ -106,8 +106,8 @@ Enables a device administrator application based on the specified bundle name an
| Name | Type | Mandatory | Description |
| -------------- | ----------------------------------- | ---- | ---------------------------- |
| admin | [Want](js-apis-application-Want.md) | Yes | Device administrator application. |
| enterpriseInfo | [EnterpriseInfo](#EnterpriseInfo) | Yes | Enterprise information of the device administrator application. |
| type | [AdminType](#AdminType) | Yes | Type of the device administrator to enable. |
| enterpriseInfo | [EnterpriseInfo](#enterpriseinfo) | Yes | Enterprise information of the device administrator application. |
| type | [AdminType](#admintype) | Yes | Type of the device administrator to enable. |
| userId | number | No | User ID The default value is the user ID of the caller. The value must be greater than or equal to 0.|
**Return value**
......@@ -141,7 +141,7 @@ disableAdmin(admin: Want, callback: AsyncCallback\<boolean>): void
Disables a device common administrator application based on the specified bundle name and class name. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.MANAGE_ADMIN
**Required permissions**: ohos.permission.MANAGE_ENTERPRISE_DEVICE_ADMIN
**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
......@@ -174,7 +174,7 @@ disableAdmin(admin: Want, userId: number, callback: AsyncCallback\<boolean>): vo
Disables a device common administrator application based on the specified bundle name and class name. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.MANAGE_ADMIN
**Required permissions**: ohos.permission.MANAGE_ENTERPRISE_DEVICE_ADMIN
**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
......@@ -208,7 +208,7 @@ disableAdmin(admin: Want, userId?: number): Promise\<boolean>
Disables a device common administrator application based on the specified bundle name and class name. This API uses a promise to return the result.
**Required permissions**: ohos.permission.MANAGE_ADMIN
**Required permissions**: ohos.permission.MANAGE_ENTERPRISE_DEVICE_ADMIN
**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
......@@ -467,7 +467,7 @@ Obtains a **DeviceSettingsManager** object. This API uses an asynchronous callba
| Name | Type | Mandatory | Description |
| -------- | --------------------------------------- | ---- | ----------------------------------- |
| callback | AsyncCallback<DeviceSettingsManager&gt; | Yes | Callback used to return the **DeviceSettingsManager** object obtained.|
| callback | AsyncCallback<[DeviceSettingsManager](js-apis-enterpriseDeviceManager-DeviceSettingsManager.md)&gt; | Yes | Callback used to return the **DeviceSettingsManager** object obtained.|
**Example**
......@@ -503,7 +503,7 @@ Obtains a **DeviceSettingsManager** object. This API uses a promise to return th
| Type | Description |
| ------------------------------------ | ---------------------------------- |
| Promise&lt;DeviceSettingsManager&gt; | Promise used to return the **DeviceSettingsManager** object obtained.|
| Promise&lt;[DeviceSettingsManager](js-apis-enterpriseDeviceManager-DeviceSettingsManager.md)&gt; | Promise used to return the **DeviceSettingsManager** object obtained.|
**Example**
......@@ -536,7 +536,7 @@ Sets the enterprise information of a device administrator application. This API
| Name | Type | Mandatory | Description |
| -------------- | ----------------------------------- | ---- | ---------------------- |
| admin | [Want](js-apis-application-Want.md) | Yes | Device administrator application. |
| enterpriseInfo | [EnterpriseInfo](#EnterpriseInfo) | Yes | Enterprise information of the device administrator application. |
| enterpriseInfo | [EnterpriseInfo](#enterpriseinfo) | Yes | Enterprise information of the device administrator application. |
| callback | AsyncCallback\<boolean&gt; | Yes | Callback used to return the result.|
**Example**
......@@ -571,7 +571,7 @@ Sets the enterprise information of a device administrator application. This API
| Name | Type | Mandatory | Description |
| -------------- | ----------------------------------- | ---- | ------------ |
| admin | [Want](js-apis-application-Want.md) | Yes | Device administrator application. |
| enterpriseInfo | [EnterpriseInfo](#EnterpriseInfo) | Yes | Enterprise information of the device administrator application.|
| enterpriseInfo | [EnterpriseInfo](#enterpriseinfo) | Yes | Enterprise information of the device administrator application.|
**Return value**
......@@ -611,7 +611,7 @@ Obtains the enterprise information of a device administrator application. This A
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ------------------------ |
| admin | [Want](js-apis-application-Want.md) | Yes | Device administrator application. |
| callback | AsyncCallback&lt;[EnterpriseInfo](#EnterpriseInfo)&gt; | Yes | Callback used to return the enterprise information of the device administrator application.|
| callback | AsyncCallback&lt;[EnterpriseInfo](#enterpriseinfo)&gt; | Yes | Callback used to return the enterprise information of the device administrator application.|
**Example**
......@@ -648,7 +648,7 @@ Obtains the enterprise information of a device administrator application. This A
| Type | Description |
| ---------------------------------------- | ------------------------- |
| Promise&lt;[EnterpriseInfo](#EnterpriseInfo)&gt; | Promise used to return the enterprise information of the device administrator application.|
| Promise&lt;[EnterpriseInfo](#enterpriseinfo)&gt; | Promise used to return the enterprise information of the device administrator application.|
**Example**
......
en/application-dev/reference/apis/js-apis-enterpriseDeviceManager-DeviceSettingsManager.md 0 → 100644
浏览文件 @ b825d0e7
# Device Settings Management
The **EnterpriseDeviceManager** module provides capabilities to manage device settings, such as time settings. The APIs of this module can only be called by enterprise device administrator applications.
> **NOTE**
>
> 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.
## Usage
Before calling any API in **EnterpriseDeviceManager**, use **getDeviceSettingsManager** to create an **EnterpriseDeviceManager** instance.
```js
import enterpriseDeviceManager from '@ohos.enterpriseDeviceManager'
enterpriseDeviceManager.getDeviceSettingsManager((error, mgr) => {
if (error) {
console.log("error code:" + error.code + " error message:" + error.message);
return;
}
let deviceMgr = mgr;
});
```
## DeviceSettingsManager.setDateTime
setDateTime(admin: Want, time: number, callback: AsyncCallback<void>): void
Sets the system time. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.EDM_MANAGE_DATETIME
**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ----------------------------------- | ---- | ------- |
| admin | [Want](js-apis-application-Want.md) | Yes | Device administrator application.|
| time | number | Yes| Timestamp (ms).|
| callback | AsyncCallback<void> | Yes| Callback used to the result. If the system time is set successfully, **err** is **null**; otherwise, **err** is an error object.|
**Example**
```js
import enterpriseDeviceManager from '@ohos.enterpriseDeviceManager'
let wantTemp = {
bundleName: "bundleName",
abilityName: "abilityName",
};
enterpriseDeviceManager.getDeviceSettingsManager((error, mgr) => {
if (error) {
console.log("error code:" + error.code + " error message:" + error.message);
return;
}
mgr.setDateTime(wantTemp, 1526003846000, (error) => {
if (error) {
console.log("error code:" + error.code + " error message:" + error.message);
}
});
});
```
## DeviceSettingsManager.setDateTime
setDateTime(admin: Want, time: number): Promise<void>
Sets the system time. This API uses a promise to return the result.
**Required permissions**: ohos.permission.EDM_MANAGE_DATETIME
**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ----------------------------------- | ---- | ------- |
| admin | [Want](js-apis-application-Want.md) | Yes | Device administrator application.|
| time | number | Yes| Timestamp (ms).|
**Return value**
| Type | Description |
| ----- | ----------------------------------- |
| Promise<void> | Promise that returns no value.|
**Example**
```js
import enterpriseDeviceManager from '@ohos.enterpriseDeviceManager'
let wantTemp = {
bundleName: "bundleName",
abilityName: "abilityName",
};
enterpriseDeviceManager.getDeviceSettingsManager().then((mgr) => {
mgr.setDateTime(wantTemp, 1526003846000).then(() => {
}).catch((error) => {
console.log("error code:" + error.code + " error message:" + error.message);
})
}).catch((error) => {
console.log("error code:" + error.code + " error message:" + error.message);
})
```
en/application-dev/reference/apis/js-apis-environment.md
浏览文件 @ b825d0e7
# Environment
This module provides JS APIs for obtaining the root directories of the storage and public files.
The **Environment** module provides APIs for obtaining the root directories of the storage and public files.
> **NOTE**
>
......@@ -21,13 +21,13 @@ Obtains the root directory of the storage. This API uses a promise to return the
**System capability**: SystemCapability.FileManagement.File.Environment
- Return value
**Return value**
| Type | Description |
| --------------------- | ---------------- |
| Promise&lt;string&gt; | Promise returned with the root directory of the storage.|
| Type | Description |
| --------------------- | ---------------- |
| Promise&lt;string&gt; | Promise returned with the root directory of the storage.|
- Example
**Example**
```js
environment.getStorageDataDir().then(function(path){
......@@ -45,13 +45,13 @@ Obtains the root directory of the storage. This API uses an asynchronous callbac
**System capability**: SystemCapability.FileManagement.File.Environment
- Parameters
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | -------------------------------- |
| callback | AsyncCallback&lt;string&gt; | Yes | Asynchronous callback used to return the root directory of the storage.|
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | -------------------------------- |
| callback | AsyncCallback&lt;string&gt; | Yes | Asynchronous callback used to return the root directory of the storage.|
- Example
**Example**
```js
environment.getStorageDataDir(function(error, path){
......@@ -67,13 +67,13 @@ Obtains the root directory of public files. This API uses a promise to return th
**System capability**: SystemCapability.FileManagement.File.Environment
- Return value
**Return value**
| Type | Description |
| --------------------- | ------------------ |
| Promise&lt;string&gt; | Promise returned with the root directory of public files.|
| Type | Description |
| --------------------- | ------------------ |
| Promise&lt;string&gt; | Promise returned with the root directory of public files.|
- Example
**Example**
```js
environment.getUserDataDir().then(function(path){
......@@ -91,13 +91,13 @@ Obtains the root directory of public files. This API uses an asynchronous callba
**System capability**: SystemCapability.FileManagement.File.Environment
- Parameters
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | -------------------------------- |
| callback | AsyncCallback&lt;string&gt; | Yes | Asynchronous callback used to return the root directory of public files.|
- Example
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | -------------------------------- |
| callback | AsyncCallback&lt;string&gt; | Yes | Asynchronous callback used to return the root directory of public files.|
**Example**
```js
environment.getUserDataDir(function(error, path){
......
en/application-dev/reference/apis/js-apis-reminderAgent.md
浏览文件 @ b825d0e7
......@@ -20,7 +20,7 @@ import reminderAgent from'@ohos.reminderAgent';
publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback&lt;number&gt;): 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
......@@ -49,7 +49,7 @@ Publishes an agent-powered reminder. This API uses an asynchronous callback to r
publishReminder(reminderReq: ReminderRequest): Promise&lt;number&gt;
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
......@@ -435,7 +435,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
......@@ -454,7 +454,7 @@ Defines the reminder to publish.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| reminderType | ReminderType | Yes| Type of the reminder.|
| actionButton | [ActionButton?,&nbsp;ActionButton?] | No| Action button displayed in the reminder notification. (The parameter is optional. Up to two buttons are supported.)|
| actionButton | [ActionButton?,&nbsp;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.|
......
en/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ b825d0e7
# AnimatorProperty
# Property Animator
You can create a property animator to animate the universal attributes of a component.
> **NOTE**
>
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
| API | Description |
| ------------------------------ | ------------------------------------------------------------ |
| animation(value: AnimateParam) | Applies a property animator to this component to control the transition of the component from one state to another.|
When the universal attributes of a component change, you can create an **AnimatorProperty** for gradient to improve user experience.
## AnimateParam
- Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. |
| curve | Curve | Curve.Linear | Animation curve. The default curve is linear. |
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
| playMode | [PlayMode](ts-appendix-enums.md#playmode-enums) | PlayMode.Normal | Playback mode. By default, the animation is played from the beginning after the playback is complete. |
- Curve enums
| Name | Description |
| -------- | -------- |
| Linear | The animation speed keeps unchanged. |
| Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. |
| EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
| EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
| EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
| FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
| LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
| FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
| Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
| Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
| Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
| Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. |
| Name | Type | Default Value | Description |
| ---------- | ---------------------------------------- | --------------- | ----------------------- |
| duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. |
| curve | [Curve](ts-appendix-enums.md#curve) | Curve.Linear | Animation curve. The default curve is linear. |
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
## Example
```ts
// xxx.ets
@Entry
......@@ -67,8 +54,8 @@ struct AttrAnimationExample {
curve: Curve.EaseOut, // Animation curve
delay: 500, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal // Animation mode
}) // Animation configuration for the width and height attributes of the Button component
playMode: PlayMode.Normal // Animation playback mode
}) // Animation configuration for the width and height attributes of the <Button> component
}.width('100%').margin({ top: 5 })
}
}
......
en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ b825d0e7
# Gauge
The **\<Gauge>** component is used to display data in a ring chart.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Gauge>** component is used to display data in a ring chart.
## Required Permissions
None
......@@ -21,10 +20,10 @@ Not supported
## APIs
Gauge(value:{value: number, min?: number, max?: number})
Gauge(options:{value: number, min?: number, max?: number})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes| - | Current data value.|
| min | number | No| 0 | Minimum value of the current data segment.|
......@@ -38,9 +37,17 @@ Gauge(value:{value: number, min?: number, max?: number})
| value | number | 0 | Value of the chart.|
| startAngle | number | -150 | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.|
| endAngle | number | 150 | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.|
| colors | Array&lt;any&gt; | - | Colors of the chart. Solid colors and gradients are supported.|
| colors | Array&lt;ColorStop&gt; | - | Colors of the chart. Colors can be set for individual segments.|
| strokeWidth | Length | - | Stroke width of the chart.|
## ColorStop
Describes a gradient stop.
| Name | Type | Description |
| --------- | -------------------- | ------------------------------------------------------------ |
| ColorStop | [[ResourceColor](../../ui/ts-types.md#resourcecolor8), number] | Type of the gradient stop. The first parameter specifies the color, and the second parameter specifies the offset, which ranges from 0 to 1.|
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ b825d0e7
ImageAnimator
The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
# ImageAnimator
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
## Required Permissions
None
......@@ -23,55 +24,41 @@ ImageAnimator()
## Attributes
| Name | Type | Default Value | Mandatory | Description |
| ---------- | ---------------------------------------- | ----------------------- | --------- | ---------------------------------------- |
| images | Array&lt;{<br>src:string,<br>width?:Length,<br>height?:Length,<br>top?:Length,<br>left?:Length,<br>duration?:number<br>}&gt; | [] | Yes | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br>**src**: image path. The image format can be SVG, PNG, or JPG.<br>**width**: image width.<br>**height**: image height.<br>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br>**duration**: playback duration of the image, in ms. |
| state | AnimationStatus | AnimationStatus.Initial | No | Playback status of the animation. The default status is **Initial**. |
| duration | number | 1000 | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in images, the setting of this attribute is invalid. |
| reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. |
| fixedSize | boolean | true | No | Whether the image size is the same as the component size. **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid. **false**: The width, height, top, and left attributes of each image must be set separately. |
| preDecode | number | 0 | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. If this attribute is set to **2**, two images following the currently playing frame will be cached in advance to improve performance. |
| fillMode | FillMode | FillMode.Forwards | No | Status before and after the animation starts. For details about the options, see **FillMode**. |
| iterations | number | 1 | No | By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| images | Array&lt;ImageFrameInfo&gt; | [] | Yes| Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.|
| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No| Playback status of the animation. The default status is **Initial**.|
| duration | number | 1000 | No| Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.|
| reverse | boolean | false | No| Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.|
| fixedSize | boolean | true | No| Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.|
| preDecode | number | 0 | No| Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.|
| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No| Status before and after the animation starts. For details about the options, see **FillMode**.|
| iterations | number | 1 | No| Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
- ImageFrameInfo
| Name | Type | Default Value | Mandatory | Description |
| -------- | ---------------------------------------- | ------------- | --------- | ---------------------------------------- |
| src | string \| [Resource](../../ui/ts-types.md)<sup>9+</sup> | "" | Yes | Image path. The image format can be .svg, .png, or .jpg. |
| width | [Length](../../ui/ts-types.md) | 0 | No | Image width. |
| height | [Length](../../ui/ts-types.md) | 0 | No | Image height. |
| top | [Length](../../ui/ts-types.md) | 0 | No | Vertical coordinate of the image relative to the upper left corner of the component. |
| left | [Length](../../ui/ts-types.md) | 0 | No | Horizontal coordinate of the image relative to the upper left corner of the component. |
| duration | number | 0 | No | Playback duration of each image frame, in milliseconds. |
- AnimationStatus enums
| Name | Description |
| ------- | -------------------------------------- |
| Initial | The animation is in the initial state. |
| Running | The animation is being played. |
| Paused | The animation is paused. |
| Stopped | The animation is stopped. |
- FillMode enums
| Name | Description |
| -------- | ---------------------------------------- |
| None | After the playback is complete, the animation restores to the initial state. |
| Forwards | After the playback is complete, the animation remains in the end state. |
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| src | string \| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| "" | Yes| Image path. The image format can be .svg, .png, or .jpg.|
| width | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image width.|
| height | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image height.|
| top | [Length](.../ui/ts-types.md#length-type)| 0 | No| Vertical coordinate of the image relative to the upper left corner of the component.|
| left | [Length](.../ui/ts-types.md#length-type)| 0 | No| Horizontal coordinate of the image relative to the upper left corner of the component.|
| duration | number | 0 | No| Playback duration of each image frame, in milliseconds.|
## Events
| Name | Description |
| --------------------- | ---------------------------------------- |
| onStart() =&gt; void | Triggered when the animation starts to play. |
| onPause() =&gt; void | Triggered when the animation playback is paused. |
| onRepeat() =&gt; void | Triggered when the animation playback is repeated. |
| onCancel() =&gt; void | Triggered when the animation playback is canceled. |
| onFinish() =&gt; void | Triggered when the animation playback is complete. |
| Name| Description|
| -------- | -------- |
| onStart(event: () =&gt; void) | Triggered when the animation starts to play.|
| onPause(event: () =&gt; void) | Triggered when the animation playback is paused.|
| onRepeat(event: () =&gt; void) | Triggered when the animation playback is repeated.|
| onCancel(event: () =&gt; void) | Triggered when the animation playback is canceled.|
| onFinish(event: () =&gt; void) | Triggered when the animation playback is complete.|
## Example
```ts
// xxx.ets
@Entry
......@@ -85,7 +72,7 @@ struct ImageAnimatorExample {
Column({ space:5 }) {
ImageAnimator()
.images([
{
{
// The comment folder is at the same level as the pages folder.
src: '/comment/bg1.jpg',
duration: 500,
......
en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ b825d0e7
# LoadingProgress
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<LoadingProgress>** component is used to create a loading animation.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<LoadingProgress>** component is used to display the loading progress.
## Required Permissions
None
## Child Components
None
## APIs
LoadingProgress()
Creates a **LoadingProgress** instance.
## Attributes
| Name | Type | Default Value | Description |
| ----- | ----- | ------------- | --------------------------------------------- |
| color | Color | - | Foreground color of the loading progress bar. |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | - | Foreground color of the loading progress bar.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct LoadingProgressExample {
......@@ -41,4 +50,4 @@ struct LoadingProgressExample {
}
```
![en-us_image_0000001198839004](figures/loadingProgress.png)
\ No newline at end of file
![en-us_image_000000111864201](figures/en-us_image_000000111864201.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ b825d0e7
# ScrollBar
> **NOTE**<br>
> **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;ScrollBar&gt;** is used together with scrollable components, such as **&lt;List&gt;**, **&lt;Grid&gt;**, and **&lt;Scroll&gt;**.
The **\<ScrollBar>** is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**.
## Required Permissions
......@@ -20,38 +19,31 @@ This component can contain a single child component.
## APIs
ScrollBar(value: ScrollBarOptions)
ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })
- ScrollBarOptions parameters
| Name | Type | Mandatory | Default Value | Description |
- ScrollBarOptions
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. |
| direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
| state | BarState | No | BarState.Auto | Scrollbar state. |
| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| - | Scroller, which can be bound to scrollable components.|
| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll.|
| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state.|
> **NOTE**<br>
> The **&lt;ScrollBar&gt;** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
> **NOTE**
> The **<\ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
>
> This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **&lt;ScrollBar&gt;** component can be bound to only one scrollable component, and vice versa.
> This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\<ScrollBar>** component can be bound to only one scrollable component, and vice versa.
- ScrollBarDirection enums
| Name | Description |
| -------- | -------- |
| Vertical | Vertical scrollbar. |
| Horizontal | Horizontal scrollbar. |
- BarState enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| On | Always display the scrollbar. |
| Off | Hide the scrollbar. |
| Auto | Display the scrollbar on demand (for example, display the scrollbar when the screen is touched or hide the scrollbar after 2s of inactivity). |
| Vertical | Vertical scrollbar.|
| Horizontal | Horizontal scrollbar.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ScrollBarExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ b825d0e7
......@@ -19,26 +19,31 @@ This component can contain the [\<Span>](ts-basic-components-span.md) child comp
## APIs
Text(content?: string)
Text(content?: ResourceStr)
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| content | string | No| '' | Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.|
| content | [ResourceStr](../../ui/ts-types.md#resourcestr8) | No| '' | Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.|
## Attributes
In addition to the following attributes, the attributes in [Text Style](ts-universal-attributes-text-style.md) are supported.
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| textAlign | [TextAlign](ts-appendix-enums.md) | TextAlign.Start | Text alignment mode of multiple lines of text.|
| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md)} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect. |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | TextAlign.Start | Text alignment mode of multiple lines of text.|
| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect. |
| maxLines | number | Infinity | Maximum number of lines in the text.<br>**NOTE**<br/>By default, text is automatically folded. If this parameter is specified, the text does not exceed the specified number of lines. If there is extra text, you can use `textOverflow` to specify the truncation mode. |
| lineHeight | Length | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: Color<br>} | {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line.|
| baselineOffset | Length | - | Offset of the text baseline.|
| lineHeight | string \| number \| [Resource](../../ui/ts-types.md) | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
| decoration | {<br>type: TextDecorationType,<br>color?: [ResourceColor](../../ui/ts-types.md)<br>} | {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line. |
| baselineOffset | number \| string | - | Offset of the text baseline. |
| letterSpacing | [Length](../../ui/ts-types.md) | - | Letter spacing. |
| minFontSize | number \| string \| [Resource](../../ui/ts-types.md) | - | Minimum font size. |
| maxFontSize | number \| string \| [Resource](../../ui/ts-types.md) | - | Maximum font size. |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | TextCase.Normal | Text case.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md) | CopyOptions.None | Whether copy and paste is allowed.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | CopyOptions.None | Whether copy and paste is allowed.|
> **NOTE**
>
......
en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ b825d0e7
# XComponent
> **NOTE**<br>
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data input.
......@@ -16,7 +16,7 @@
## APIs
XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})
**Parameters**
......@@ -59,7 +59,7 @@ xcomponentController: XComponentController = new XComponentController()
### getXComponentSurfaceId
getXComponentSurfaceId(): string
getXComponentSurfaceId()
Obtains the ID of the surface held by the **\<XComponent>**. 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 **\<XComponent>**. The ID can be used
| ------ | ----------------------- |
| string | ID of the surface held by the **\<XComponent>**.|
### 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 **\<XComponent>**.
......@@ -86,9 +87,10 @@ Sets the width and height of the surface held by the **\<XComponent>**.
| surfaceWidth | number | Yes | Width of the surface held by the **\<XComponent>**.|
| surfaceHeight | number | Yes | Height of the surface held by the **\<XComponent>**.|
### getXComponentContext
getXComponentContext(): Object
getXComponentContext()
Obtains the context of an **\<XComponent>** object.
......@@ -98,6 +100,7 @@ Obtains the context of an **\<XComponent>** object.
| ------ | ---------------------------------------- |
| Object | Context of the **\<XComponent>** object. The APIs contained in the context are defined by developers.|
## Example
Provide a surface-type **\<XComponent>** to support capabilities such as camera preview.
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ b825d0e7
# CanvasGradient
**CanvasGradient** provides a canvas gradient object.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasGradient** provides a canvas gradient object.
## addColorStop
addColorStop(offset: number, color: string): void
Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| offset | number | Yes | 0 | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. |
| color | string | Yes | '#ffffff'| Gradient color to set. |
- Example
```ts
// xxx.ets
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
}
.width('100%')
.height('100%')
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1. |
| color | string | Yes | '#ffffff'| Gradient color to set. |
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
}
}
```
.width('100%')
.height('100%')
}}
```
![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ b825d0e7
......@@ -20,33 +20,26 @@ This component can contain child components.
## APIs
Column(value:{space?: Length})
Column(value?:{space?: Length})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | --------- | ------------- | ---------------------------------------- |
| space | Length | No | 0 | Space between any two adjacent child components in the vertical layout. |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| space | Length | No| 0 | Space between two adjacent child components in the vertical layout.|
## Attributes
| Name | Type | Default Value | Description |
| --------------------------- | --------------------------------- | ---------------------- | ---------------------------------------- |
| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment mode of child components in the horizontal direction. |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of child components in the vertical direction. |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | Alignment mode of the child components in the horizontal direction.|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the vertical direction.|
- HorizontalAlign enums
| Name | Description |
| ------ | ---------------------------------------- |
| Start | Aligned with the start edge in the same direction as the language in use. |
| Center | Aligned to the center. This is the default alignment mode. |
| End | Aligned with the end edge in the same direction as the language in use. |
## Example
```ts
// xxx.ets
@Entry
......@@ -88,4 +81,4 @@ struct ColumnExample {
}
```
![](figures/Column.png)
![Column](figures/Column.png)
en/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ b825d0e7
......@@ -19,43 +19,18 @@ This component can contain child components.
## APIs
Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
Creates a standard **\<Flex>** component.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums)| No | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
- FlexDirection enums
| Name | Description |
| ------------- | ---------------- |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction.|
- FlexWrap enums
| Name | Description |
| ----------- | ------------------------------------------------- |
| NoWrap | The child components in the **\<Flex>** component are arranged in a single line, and they cannot overflow. |
| Wrap | The child components in the **\<Flex>** component are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **\<Flex>** component are reversely arranged in multiple lines, and they may overflow.|
- FlexAlign enums
| Name | Description |
| ------------ | ------------------------------------------------------------ |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
| SpaceAround | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.|
| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis. |
| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
## Example
......
en/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ b825d0e7
# Row
> **NOTE**<br>
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -19,32 +20,26 @@ Supported
## APIs
Row(value:{space?: Length})
Row(value?:{space?: Length})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| space | Length | No| 0 | Space between two adjacent child components in the horizontal layout. |
| space | Length | No| 0 | Space between two adjacent child components in the horizontal layout.|
## Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| alignItems | VerticalAlign | VerticalAlign.Center | Alignment mode of the child components in the vertical direction. |
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction. |
- VerticalAlign enums
| Name | Description |
| -------- | -------- |
| Top | Top aligned. |
| Center | Center aligned. This is the default alignment mode. |
| Bottom | Bottom aligned. |
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | VerticalAlign.Center | Alignment mode of the child components in the vertical direction.|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct RowExample {
......@@ -84,4 +79,4 @@ struct RowExample {
}
```
![en_image_0000001174422908](figures/row.png)
![en-us_image_0000001174422908](figures/row.png)
en/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ b825d0e7
# Scroll
> **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - When a **\<List>** is nested in this component, you are advised to specify the width and height of the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - When nesting a **\<List>** within this component, specify the width and height for the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
> - This component can produce a bounce effect only when there is more than one screen of content.
The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
......@@ -28,32 +29,41 @@ Scroll(scroller?: Scroller)
| Name | Type | Default Value | Description |
| -------------- | ---------------------------------------- | ------------------------ | --------- |
| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. |
| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums)| ScrollDirection.Auto | Scrollbar status. |
| scrollBarColor | Color | - | Color of the scrollbar.|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | BarState.Off | Scrollbar status. |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | - | Color of the scrollbar.|
| scrollBarWidth | Length | - | Width of the scrollbar.|
| edgeEffect | EdgeEffect | EdgeEffect.Spring | Scroll effect. For details, see **EdgeEffect**.|
- ScrollDirection enums
## ScrollDirection enums
| Name | Description |
| ---------- | ---------- |
| Horizontal | Only horizontal scrolling is supported.|
| Vertical | Only vertical scrolling is supported.|
| None | Scrolling is disabled. |
## EdgeEffect
| Name | Description |
| ------ | ---------------------------------------- |
| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
| Fade | Fade effect. When at one of the edges, the component produces a fade effect. |
| None | No effect when the component is at one of the edges. |
## Events
| Name | Description |
| ---------------------------------------- | ----------------------------- |
| onScrollBegin<sup>9+</sup>(dx: number, dy: number)&nbsp;=&gt;&nbsp;{ dxRemain: number, dyRemain: number } | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
| onScroll(xOffset:&nbsp;number,&nbsp;yOffset:&nbsp;number)&nbsp;=&gt;&nbsp;void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.|
| onScrollEdge(side:&nbsp;Edge)&nbsp;=&gt;&nbsp;void | Invoked when scrolling reaches the edge. |
| onScrollEnd()&nbsp;=&gt;&nbsp;void | Invoked when scrolling stops. |
| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.|
| onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge. |
| onScrollEnd(event: () => void) | Invoked when scrolling stops. |
> **NOTE**
> If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
## Scroller
Controller of the scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this component can be bound to the **\<List>** and **\<Scroll>** components.
Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this component can be bound to the **\<Scroll>** and **\<ScrollBar>** components.
### Objects to Import
......@@ -90,14 +100,8 @@ Scrolls to the edge of the container.
- Parameters
| Name | Type| Mandatory | Default Value | Description |
| ----- | ---- | ---- | ---- | --------- |
| value | Edge | Yes | - | Edge position to scroll to.|
- Edge enums
| value | [Edge](ts-appendix-enums.md#edge) | Yes | - | Edge position to scroll to.|
| Name | Value | Description |
| ------ | ---- | ---------- |
| Top | 0 | Top edge.|
| Bottom | 2 | Bottom edge.|
......@@ -111,7 +115,7 @@ Scrolls to the next or previous page.
| Name | Type | Mandatory | Default Value | Description |
| --------- | ------- | ---- | ---- | ------------------------------ |
| next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
| direction | Axis | No | - | Scrolling direction: horizontal or vertical. |
| direction | [Axis](ts-appendix-enums.md#axis) | No | - | Scrolling direction: horizontal or vertical. |
### currentOffset
......@@ -123,9 +127,9 @@ Obtains the scrolling offset.
- Return value
| Type | Description |
| ------------------------------------------------------- | ------------------------------------------------------------ |
| {<br>xOffset:&nbsp;number,<br>yOffset:&nbsp;number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset. |
| Type | Description |
| ---------------------------------------- | ---------------------------------------- |
| {<br>xOffset:&nbsp;number,<br>yOffset:&nbsp;number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.|
### scrollToIndex
......
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ b825d0e7
......@@ -46,10 +46,10 @@ Swiper(value:{controller?: SwiperController})
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** |
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md#curve-enums). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
| indicatorStyle<sup>8+</sup> | {<br>left?:&nbsp;Length,<br>top?:&nbsp;Length,<br>right?:&nbsp;Length,<br>bottom?:&nbsp;Length,<br>size?:&nbsp;Length,<br>color?:&nbsp;Color,<br>selectedColor?:&nbsp;Color<br>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease** |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md),<br/>selectedColor?:&nbsp;[ResourceColor](../../ui/ts-types.md)<br/>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display.<br>Default value: **1** |
| effectMode<sup>8+</sup> | EdgeEffect | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
## SwiperDisplayMode
......@@ -98,7 +98,7 @@ Stops this animation.
### onChange
onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void
onChange(event: (index: number) => void)
Triggered when the index of the currently displayed component changes.
......
en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ b825d0e7
# Circle
The **\<Circle>** component is used to draw a circle.
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<Circle\>** component is used to draw a circle.
## Required Permissions
None
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
None
Not supported
## APIs
Circle(options?: {width: Length, height: Length})
Circle(options?: {width?: string | number, height?: string | number})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | Options of the circle to draw. For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
| width | string \| number | No| 0 | Width of the circle. |
| height | string \| number | No| 0 | Height of the circle. |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | Yes| - | Width.|
| height | string \| number | Yes| - | Height.|
## Attributes
| Name | Type | Default Value | Mandatory | Description |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width of the rectangle where the circle is located. |
| height | Length | 0 | No | Height of the rectangle where the circle is located. |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct CircleExample {
......@@ -60,4 +64,4 @@ struct CircleExample {
}
```
![en-us_image_0000001256978353](figures/en-us_image_0000001256978353.png)
\ No newline at end of file
![en-us_image_0000001256978353](figures/en-us_image_0000001256978353.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ b825d0e7
# Ellipse
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Ellipse>** component is used to draw an ellipse.
The **<Ellipse\>** component is used to draw an ellipse.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -15,37 +15,43 @@ None
## Child Components
None
Not supported
## APIs
ellipse(options?: {width: Length, height: Length})
ellipse(options?: {width?: string | number, height?: string | number})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | Options of the ellipse to draw. For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width of the ellipse. |
| height | Length | Yes | - | Height of the ellipse. |
| width | string \| number | No| 0 | Width of the ellipse. |
| height | string \| number | No| 0 | Height of the ellipse. |
## Attributes
| Name | Type | Default Value | Mandatory | Description |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width of the rectangle where the ellipse is located. |
| height | Length | 0 | No | Height of the rectangle where the ellipse is located. |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No|Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct EllipseExample {
......@@ -60,4 +66,4 @@ struct EllipseExample {
}
```
![en-us_image_0000001212058488](figures/en-us_image_0000001212058488.png)
\ No newline at end of file
![en-us_image_0000001212058488](figures/en-us_image_0000001212058488.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ b825d0e7
# Line
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Line>** component is used to draw a straight line.
The **<Line\>** component is used to draw a straight line.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -15,39 +15,45 @@ None
## Child Components
None
Not supported
## APIs
Line(options?: {width: Length, height: Length})
Line(options?: {width?: string | number, height?: string | number})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | Options of the line to draw. For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Line width. |
| height | Length | Yes | - | Line height. |
| width | string \| number | No| 0 | Width of the line. |
| height | string \| number | No| 0 | Height of the line. |
## Attributes
| Name | Type | Default Value | Mandatory | Description |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width of the rectangle where the straight line is located. |
| height | Length | 0 | No | Height of the rectangle where the straight line is located. |
| startPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the start point of the straight line. |
| endPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the end point of the straight line. |
| startPoint | Array | [0, 0] | Yes | Coordinates (relative coordinates) of the start point of the line. |
| endPoint | Array | [0, 0] | Yes | Coordinates (relative coordinates) of the end point of the line. |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct LineExample {
......@@ -60,4 +66,4 @@ struct LineExample {
}
```
![en-us_image_0000001256858387](figures/en-us_image_0000001256858387.jpg)
\ No newline at end of file
![en-us_image_0000001256858387](figures/en-us_image_0000001256858387.jpg)
en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ b825d0e7
# Polygon
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Polygon>** component is used to draw a polygon.
The **<Polygon\>** component is used to draw a polygon.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -15,38 +15,52 @@ None
## Child Components
None
Not supported
## APIs
Polygon(value:{options?: {width: Length, height: Length}})
Polygon(options?: {width?: string | number, height?: string | number})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | Options of the polygon to draw. For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width of the polygon. |
| height | Length | Yes | - | Height of the polygon. |
| width | string \| number | No| 0 | Width of the polygon. |
| height | string \| number | No| 0 | Height of the polygon. |
## Attributes
| Name | Type | Default Value | Mandatory | Description |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width of the rectangle where the polygon is located. |
| height | Length | 0 | No | Height of the rectangle where the polygon is located. |
| points | Array&lt;Point&gt; | - | Yes | Vertex coordinates of the polygon. |
| points | Array&lt;Point&gt; | [] | No| Vertex coordinates of the polygon.|
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
## Point
Describes the coordinates of a point.
| Name | Type | Description |
| --------- | -------------------- | ------------------------------------------------------------ |
| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).|
## Example
```ts
// xxx.ets
@Entry
@Component
struct PolygonExample {
......@@ -55,7 +69,7 @@ struct PolygonExample {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
// Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100).
Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]])
// Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (100, 100).
// Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100).
Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 100], [100, 0]])
// Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100).
Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
......
en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ b825d0e7
# Polyline
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Polyline>** component is used to draw a polyline.
The **<Polyline\>** component is used to draw a polyline.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -15,38 +15,51 @@ None
## Child Components
None
Not supported
## APIs
Polyline(options?: {width: Length, height: Length})
Polyline(options?: {width?: string | number, height?: string | number})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | Options of the polyline to draw. For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width of the polyline. |
| height | Length | Yes | - | Height of the polyline. |
| width | string \| number | No| 0 | Width of the polyline. |
| height | string \| number | No| 0 | Height of the polyline. |
## Attributes
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width of the rectangle where the polyline is located. |
| height | Length | 0 | No | Height of the rectangle where the polyline is located. |
| points | Array&lt;Point&gt; | - | Yes | List of coordinates that the polyline passes through. |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | No| List of coordinates that the polyline passes through.|
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
## Point
Describes the coordinates of a point.
| Name | Type | Description |
| --------- | -------------------- | ------------------------------------------------------------ |
| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).|
## Example
```ts
// xxx.ets
@Entry
@Component
struct PolylineExample {
......@@ -63,4 +76,4 @@ struct PolylineExample {
}
```
![en-us_image_0000001212218432](figures/en-us_image_0000001212218432.gif)
\ No newline at end of file
![en-us_image_0000001212218432](figures/en-us_image_0000001212218432.gif)
en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ b825d0e7
# Rect
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<Rect\>** component is used to draw a rectangle.
The **\<Rect>** component is used to draw a rectangle.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -15,43 +14,50 @@ None
## Child Components
None
Not supported
## APIs
Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array&lt;Length&gt;} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}})
Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | Options of the rectangle to draw. For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width of the rectangle. |
| height | Length | Yes | - | Height of the rectangle. |
| radius | Length \| Array&lt;Length&gt; | No | 0 | Radius of the rounded corner. You can set the radius of four rounded corners. |
| radiusWidth | Length | No | 0 | Width of the rounded corner. |
| radiusHeight | Length | No | 0 | Height of the rounded corner. |
| width | string \| number | No| 0 | Width of the rectangle. |
| height | string \| number | No| 0 | Height of the rectangle. |
| radius | string \| number \| Array&lt;string \| number&gt; | No| 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.|
| radiusWidth | string \| number | No| 0 | Width of the rounded corner.|
| radiusHeight | string \| number | No| 0 | Height of the rounded corner.|
## Attributes
| Name | Type | Default Value | Mandatory | Description |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width of the rectangle. |
| height | Length | 0 | No | Height of the rectangle. |
| radiusWidth | Length | 0 | No | Width of the rounded corner. The width and height are the same when only the width is set. |
| radiusHeight | Length | 0 | No | Height of the rounded corner. The width and height are the same only when the height is set. |
| radius | Length \| Array&lt;Length&gt; | 0 | No | Radius of the rounded corner. |
| radiusWidth | string \| number | 0 | No| Width of the rounded corner. The width and height are the same when only the width is set.|
| radiusHeight | string \| number | 0 | No| Height of the rounded corner. The width and height are the same only when the height is set.|
| radius | string \| number \| Array&lt;string \| number&gt; | 0 | No| Radius of the rounded corner. You can set separate radiuses for four rounded corners.|
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct RectExample {
......@@ -73,4 +79,4 @@ struct RectExample {
}
```
![en-us_image_0000001212218454](figures/en-us_image_0000001212218454.png)
\ No newline at end of file
![en-us_image_0000001212218454](figures/en-us_image_0000001212218454.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ b825d0e7
# Shape
> **NOTE**<br>
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<Shape\>** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
The **\<Shape>** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
1. Drawing components use **<Shape\>** as their parent component to implement the effect similar to SVG.
1. Drawing components use **\<Shape>** as their parent to implement the effect similar to SVG.
2. The **<Shape\>** component is used independently to draw a specific shape.
2. The **\<Shape>** component is used independently to draw a specific shape.
## Required Permissions
......@@ -21,47 +21,43 @@ None
## Child Components
The **&lt;Shape&gt;** component can contain child components.
This component can contain child components.
## APIs
Shape(value:{target?: PixelMap})
Shape(value?: PixelMap)
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| target | PixelMap | No | null | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. |
| value | PixelMap | No| - | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target.|
## Attributes
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| viewPort | {<br/>x: Length,<br/>y: Length,<br/>width: Length,<br/>height: Length<br/>} | - | Yes | View port of the shape. |
| fill | Color | Black | No | Fill color. |
| stroke | Color | - | No | Stroke color. |
| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dash. |
| strokeDashOffset | Length | 0 | No | Offset of the start point for drawing the stroke. |
| strokeLineCap | LineCapStyle | LineCapStyle.Butt | No | Cap style of the stroke. |
| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | No | Join style of the stroke. |
| strokeMiterLimit | number | 4 | No | Limit value when the sharp angle is drawn as a miter. |
| strokeOpacity | number | 1 | No | Stroke opacity. |
| strokeWidth | Length | 1 | No | Stroke width. |
| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
- LineJoinStyle enums
| Name | Description |
| -------- | -------- |
| Bevel | Bevel is used to connect paths. |
| Miter | Miter is used to connect paths. |
| Round | Round is used to connect paths. |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | No| View port of the shape.|
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
| strokeWidth | number \| string | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | No| Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct ShapeExample {
......@@ -70,7 +66,7 @@ struct ShapeExample {
Text('basic').fontSize(30).fontColor(0xCCCCCC).width(320)
// Draw a 300 x 50 rectangle with strokes at (-2, -2). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
// Draw a 300 x 50 ellipse with strokes at (-2, 58). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
// Draw a 300 x 10 path at (-2, 118). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, and the join style is rounded, and anti-aliasing is enabled (default).
// Draw a 300 x 10 path at (-2, 118). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
Shape() {
Rect().width(300).height(50)
Ellipse().width(300).height(50).offset({ x: 0, y: 60 })
......@@ -90,7 +86,7 @@ struct ShapeExample {
Shape() {
Path().width(300).height(10).commands('M0 0 L900 0')
}.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20])
// Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke gap is 20, and the offset is 10 to the left.
// Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke dash is 20, and the offset is 10 to the left.
Shape() {
Path().width(300).height(10).commands('M0 0 L900 0')
}
......@@ -123,4 +119,4 @@ struct ShapeExample {
}
```
![en-us_image_0000001257058393](figures/en-us_image_0000001257058393.png)
\ No newline at end of file
![en-us_image_0000001257058393](figures/en-us_image_0000001257058393.png)
en/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ b825d0e7
# Explicit Animation
You can create explicit animation with your custom settings.
> **NOTE**<br>
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **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.
| Name | Description |
| -------- | -------- |
| animateTo(value: [AnimationOptions](#animationoptions), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br/>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. |
| API | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| animateTo(value: [AnimationOptions](#animationoptions), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
## AnimationOptions
- Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| duration | number | 1000 | Animation duration, in ms. |
| tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. |
| curve | Curve \| Curves | Linear | Animation curve. |
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
| playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. |
| duration | number | 1000 | Animation duration, in ms.|
| tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.|
| curve | Curve \| Curves | Linear | Animation curve.|
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed.|
| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
- APIs
| Name | Description |
| --------------------- | --------------------------------------------------------- |
| onFinish() =&gt; void | Callback invoked when the animation playback is complete. |
| Name| Description|
| -------- | -------- |
| onFinish() =&gt; void | Callback invoked when the animation playback is complete.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct AnimateToExample {
......@@ -46,15 +49,15 @@ struct AnimateToExample {
.height(this.heightSize)
.backgroundColor(0x317aff)
.onClick((event: ClickEvent) => {
// Animation configuration for the width and height attributes of the Button component
// Animation configuration for the width and height attributes of the <Button> component
if (this.flag) {
animateTo({
duration: 1000, // Animation duration
tempo: 0.5, // Playback speed
curve: Curve.EaseInOut, // Animation curve
delay: 200, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal, // Animation mode
duration: 1000, // Animation duration
tempo: 0.5, // Playback speed
curve: Curve.EaseInOut, // Animation curve
delay: 200, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal // Animation playback mode
onFinish: () => {
console.info('play end')
}
......@@ -64,11 +67,11 @@ struct AnimateToExample {
})
} else {
animateTo({
duration: 200, // Animation duration
curve: Curve.Ease, // Animation curve
delay: 200, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal, // Animation mode
duration: 200, // Animation duration
curve: Curve.Ease, // Animated curve
delay: 200, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal // Animation playback mode
onFinish: () => {
console.info('play end')
}
......@@ -84,4 +87,4 @@ struct AnimateToExample {
}
```
![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif)
\ No newline at end of file
![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif)
en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
浏览文件 @ b825d0e7
# Component Transition
Configure the component transition animations for when a component is inserted or deleted. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Configure the component transition animations for when a component is inserted or deleted, which improves user experience. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
> **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.
## Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| transition | Object | - | All parameters are optional. For details, see **transition** parameters. |
| transition | Object | - | All parameters are optional. For details, see **transition**.|
- transition parameters
| Name | Type | Default Value | Mandatory | Description |
- transition
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| type | TransitionType | TransitionType.All | No | Transition type, which includes component addition and deletion by default.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> If **type** is not specified, insertion and deletion use the same transition type. |
| opacity | number | 1 | No | Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle?: Angle,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | - | No | Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
- TransitionType enums
| Name | Description |
| -------- | -------- |
| All | The transition takes effect in all scenarios. |
| Insert | The transition takes effect when a component is inserted. |
| Delete | The transition takes effect when a component is deleted. |
| type | [TransitionType](ts-appendix-enums.md#transitiontype) | TransitionType.All | No| Transition type, which includes component addition and deletion by default.<br>**NOTE**<br>If **type** is not specified, insertion and deletion use the same transition type.|
| opacity | number | 1 | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.|
| translate | {<br>x? : number,<br>y? : number,<br>z? : number<br>} | - | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number,<br>centerY? : number<br>} | - | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively.<br>- If the center point is 0, it indicates the upper left corner of the component. |
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<br>centerX?: Length,<br>centerY?: Length<br>} | - | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.|
## Example
The following example shows how to use a button to control the appearance and disappearance of another button, and how to configure the required transition animations.
```
```ts
// xxx.ets
@Entry
@Component
struct TransitionExample {
@State btn1: boolean = false
@State btn: boolean = false
@State show: string = "show"
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.btn1 = !this.btn1
if(this.btn1){
this.btn = !this.btn
if(this.btn){
this.show = "hide"
}else{
this.show = "show"
}
})
})
if (this.btn1) {
if (this.btn) {
// The insertion and deletion have different transition effects.
Button() {
Image($r('app.media.bg1')).width("80%").height(300)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ b825d0e7
......@@ -18,27 +18,19 @@ None
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of a component. |
| backgroundImage | src: [ResourceStr](../../ui/ts-types.md),<br/>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat-enums) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br/>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
| backgroundImageSize | {<br/>width?: Length,<br/>height?: Length<br/>} \| ImageSize | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
| backgroundImagePosition | {<br/>x?: Length,<br/>y?: Length<br/>} \| [Alignment](ts-appendix-enums.md#alignment-enums) | {<br/>x: 0,<br/>y: 0<br/>} | Position of the background image in the component. |
- ImageSize enums
| Name | Description |
| -------- | -------- |
| Cover | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries. |
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
| Auto | The original image aspect ratio is retained. |
| backgroundImage | src: [ResourceStr](../../ui/ts-types.md),<br/>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br/>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
| backgroundImageSize | {<br/>width?: Length,<br/>height?: Length<br/>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
| backgroundImagePosition | {<br/>x?: Length,<br/>y?: Length<br/>} \| [Alignment](ts-appendix-enums.md#alignment) | {<br/>x: 0,<br/>y: 0<br/>} | Position of the background image in the component. |
## Example
```ts
// xxx.ets
@Entry
@Component
struct BackgroundExample {
build() {
Column({ space: 5 }) {
Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ b825d0e7
......@@ -19,7 +19,7 @@ None
| Name | Type | Default Value | Description |
| ------------ | ------------- | ----------------------- | ------------------------ |
| border | BorderOptions | - | Unified border style. |
| borderStyle | BorderStyle | BorderStyle.Solid | Border style of an element.|
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | BorderStyle.Solid | Border style of an element.|
| borderWidth | Length | 0 | Border width of an element. |
| borderColor | [ResourceColor](../../ui/ts-types.md) | - | Border color of an element. |
| borderRadius | Length \| BorderRadiuses<sup>9+</sup> | 0 | Border radius of an element.|
......@@ -28,10 +28,10 @@ None
| Name| Type | Default Value | Mandatory| Description |
| -------- | ------------------------------------------------------------ | ----------------- | ---- | ---------- |
| width | [Length](../../ui/ts-types.md) \| EdgeWidth<sup>9+</sup> | 0 | No | Border width.|
| width | [Length](../../ui/ts-types.md#length) \| EdgeWidth<sup>9+</sup> | 0 | No | Border width.|
| color | [ResourceColor](../../ui/ts-types.md) \| EdgeColor<sup>9+</sup> | 'Black' | No | Border color.|
| radius | [Length](../../ui/ts-types.md) \| BorderRadiuses<sup>9+</sup> | 0 | No | Border radius.|
| style | BorderStyle \| EdgeStyle<sup>9+</sup> | BorderStyle.Solid | No | Border style.|
| radius | [Length](../../ui/ts-types.md#length) \| BorderRadiuses<sup>9+</sup> | 0 | No | Border radius.|
| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyle<sup>9+</sup> | BorderStyle.Solid | No | Border style.|
- EdgeWidth<sup>9+</sup>
......@@ -73,17 +73,10 @@ None
| Name | Type | Mandatory | Default Value | Description |
| ------ | ----------- | --------- | ----------------- | --------------------------- |
| left | BorderStyle | No | BorderStyle.Solid | Style of the left border. |
| right | BorderStyle | No | BorderStyle.Solid | Style of the right border. |
| top | BorderStyle | No | BorderStyle.Solid | Style of the top border. |
| bottom | BorderStyle | No | BorderStyle.Solid | Style of the bottom border. |
- BorderStyle enums
| Name| Description|
| -------- | -------- |
| Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
| Dashed | Dashed border.|
| Solid | Solid border.|
| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | BorderStyle.Solid | Style of the left border. |
| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | BorderStyle.Solid | Style of the right border. |
| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | BorderStyle.Solid | Style of the top border. |
| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | BorderStyle.Solid | Style of the bottom border. |
## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ b825d0e7
......@@ -2,7 +2,7 @@
Create a more gorgeous look for a component by applying a gradient color effect to it.
> **NOTE**
> **NOTE**
>
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,37 +15,21 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| linearGradient | {<br/>angle?: [Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Linear gradient.<br/>**angle**: angle of the linear gradient.<br/>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
| sweepGradient | {<br/>center: Point,<br/>start?: angle,<br/>end?: angle,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Angle gradient.<br/>**center**: center point of the angle gradient.<br/>**start**: start point of the angle gradient.<br/>**end**: end point of the angle gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
| radialGradient | {<br/>center: Point,<br/>radius: Length,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating: boolean<br/>} | - | Radial gradient.<br/>**center**: center point of the radial gradient.<br/>**radius**: radius of the radial gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
- GradientDirection
Enumerates the gradient directions.
| Name | Description |
| -------- | -------- |
| Left | The gradient direction is from right to left. |
| Top | The gradient direction is from bottom to top. |
| Right | The gradient direction is from left to right. |
| Bottom | The gradient direction is from top to bottom. |
| LeftTop | The gradient direction is upper left. |
| LeftBottom | The gradient direction is lower left. |
| RightTop | The gradient direction is upper right. |
| RightBottom | The gradient direction is lower right. |
| None | No gradient. |
| linearGradient | {<br>angle?: [Angle](../../ui/ts-types.md),<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating?: boolean<br>} | - | Linear gradient.<br>**angle**: angle of the linear gradient.<br>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
| sweepGradient | {<br>center: Point,<br>start?: angle,<br>end?: angle,<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating?: boolean<br>} | - | Angle gradient.<br>**center**: center point of the angle gradient.<br>**start**: start point of the angle gradient.<br>**end**: end point of the angle gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
| radialGradient | {<br>center: Point,<br>radius: Length,<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating: boolean<br>} | - | Radial gradient.<br>**center**: center point of the radial gradient.<br>**radius**: radius of the radial gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct ColorGradientExample {
build() {
Column({ space: 5 }) {
Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
浏览文件 @ b825d0e7
# Hover Effect
The hover effect is applied to a component in hover state.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
> **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.
## Required Permissions
......@@ -12,23 +14,15 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| hoverEffect | HoverEffect | HoverEffect.Auto | Hover effect of the component in hover state. |
- HoverEffect enums
| Name | Description |
| -------- | -------- |
| Auto | Default hover effect. |
| Scale | Scale effect. |
| Highlight | Fade-in and fade-out effect. |
| None | No effect. |
| hoverEffect | [HoverEffect](ts-appendix-enums.md#hovereffect8) | HoverEffect.Auto | Hover effect of the component in hover state.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct HoverExample {
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ b825d0e7
......@@ -25,7 +25,7 @@ None
| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
| colorBlend <sup>8+</sup> | Color \| string \| [Resource](../../ui/ts-types.md) | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| colorBlend<sup>8+</sup> | Color \| string \| [Resource](../../ui/ts-types.md#resource-type) | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
| hueRotate | number \| string | '0deg' | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
......@@ -40,7 +40,7 @@ You can preview how this component looks on a real device. The preview is not ye
@Component
struct ImageEffectsExample {
build() {
Column({space: 10}) {
Column({space: 10}) {
// Blur the font.
Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
Text('text').blur(3).width('90%').height(40)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ b825d0e7
# Menu Control
This module provides APIs for binding a menu – a vertical list of items – to a component. This menu is displayed by long-pressing, clicking, or right-clicking the component.
A menu – a vertical list of items – can be bound to a component and displayed by long-pressing, clicking, or right-clicking the component.
> **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.
> **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.
## Required Permissions
......@@ -17,21 +17,16 @@ None
| Name | Type | Default Value | Description |
| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md),<br>responseType:&nbsp;ResponseType | - | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported. |
| bindMenu | Array<MenuItem&gt; \| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](../../ui/ts-types.md),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | - | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported. |
- MenuItem
| Name | Type | Description |
| ------ | ----------------------- | ----------- |
| value | string | Menu item text. |
| action | ()&nbsp;=&gt;&nbsp;void | Action triggered when a menu item is clicked.|
| action | () =&gt; void | Action triggered when a menu item is clicked.|
- ResponseType<sup>8+</sup>
| Value | Description |
| ---------- | ------------- |
| LongPress | The menu is displayed when the component is long-pressed. |
| RightClick | The menu is displayed when the component is right-clicked.|
## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
浏览文件 @ b825d0e7
......@@ -50,7 +50,7 @@ struct SizeExample {
Text('layoutWeight(1)')
.size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
.layoutWeight(1)
// Weight 0
// Weight 2
Text('layoutWeight(2)')
.size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
.layoutWeight(2)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
浏览文件 @ b825d0e7
......@@ -19,32 +19,13 @@ None
| -------- | -------- | -------- | -------- |
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color. |
| fontSize | Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | - | Text size. If the value is of the number type, the unit fp is used. |
| fontStyle | FontStyle | FontStyle.Normal | Font style of the text. |
| fontWeight | number&nbsp;\|&nbsp;FontWeight&nbsp;\|&nbsp;string | FontWeight.FontWeightNormal | 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.<br/>For common values of the **FontWeight** type, see **FontWeight** enums. |
| fontFamily | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
- FontStyle enums
| Name | Description |
| -------- | -------- |
| Normal | Standard font style. |
| Italic | Italic font style. |
- FontWeight enums
| Name | Description |
| -------- | -------- |
| Lighter | The font weight is lighter. |
| Normal | The font weight is normal. |
| Regular | The font weight is regular. |
| Medium | The font weight is medium. |
| Bold | The font weight is bold. |
| Bolder | The font weight is bolder. |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | FontStyle.Normal | Font style of the text. |
| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | FontWeight.FontWeightNormal | 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.<br/>For common values of the **FontWeight** type, see **FontWeight** enums. |
| fontFamily | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource-type) | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
## Example
```ts
// xxx.ets
@Entry
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
浏览文件 @ b825d0e7
......@@ -17,15 +17,7 @@ None
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| visibility | Visibility | Visibility.Visible | Whether the component is visible. Note that even if a component is hidden, it needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../ui/ts-rending-control-syntax-if-else.md) instead under scenarios where consistently high performance is required. |
- Visibility enums
| Name| Description|
| -------- | -------- |
| Hidden | The component is hidden, and a placeholder is used for it in the layout.|
| Visible | The component is visible.|
| None | The component is hidden. It is not involved in the layout, and no placeholder is used for it.|
| visibility | [Visibility](ts-appendix-enums.md#visibility) | Visibility.Visible | Whether the component is visible. Note that even if a component is hidden, it needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../ui/ts-rending-control-syntax-if-else.md) instead under scenarios where consistently high performance is required. |
## Example
......
en/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @ b825d0e7
......@@ -24,39 +24,24 @@ None
- Attributes
| Name | Type | Description |
| ------------------------------------- | --------------------------- | -------------------------- |
| type | [KeyType](#keytype-enums) | Type of a key. |
| type | [KeyType](ts-appendix-enums.md#keytype) | Type of a key. |
| [keyCode](../apis/js-apis-keycode.md) | number | Key code. |
| keyText | string | Key value. |
| keySource | [KeySource](#keysource-enums) | Type of the input device that triggers the key event. |
| keySource | [KeySource](ts-appendix-enums.md#keysource) | Type of the input device that triggers the key event. |
| deviceId | number | ID of the input device that triggers the key event. |
| metaKey | number | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
| timestamp | number | Timestamp when the key is pressed. |
- APIs
| Name | Description |
| -------- | -------- |
| stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
## KeyType Enums
| Name | Description |
| -------- | -------- |
| Down | The key is pressed. |
| Up | The key is released. |
## KeySource Enums
| Name | Description |
| -------- | -------- |
| Unknown | Unknown input device. |
| Keyboard | The input device is a keyboard. |
## Example
```ts
// xxx.ets
@Entry
......
en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @ b825d0e7
......@@ -24,7 +24,7 @@ None
- Attributes
| Name | Type | Description |
| ------------------- | ---------------------------------------- | ------------ |
| type | TouchType | Type of the touch event. |
| type | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event. |
| touches | Array&lt;[TouchObject](#touchobject)&gt; | All finger information. |
| changedTouches | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed.|
| timestamp | number | Timestamp of the event. |
......@@ -40,23 +40,13 @@ None
## TouchObject
| Name | Type | Description |
| ------- | --------------------------- | ------------------- |
| type | [TouchType](#touchtype-enums) | Type of the touch event. |
| type | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X-coordinate of the touch point relative to the left edge of the screen. |
| screenY | number | Y-coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X-coordinate of the touch point relative to the left edge of the element being touched. |
| y | number | Y-coordinate of the touch point relative to the upper edge of the element being touched. |
## TouchType Enums
| Name | Description |
| ------ | --------------- |
| Down | A finger is pressed. |
| Up | A finger is lifted. |
| Move | A finger moves on the screen in pressed state.|
| Cancel | A touch event is canceled. |
## Example
```ts
......
en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ b825d0e7
......@@ -16,7 +16,7 @@ None
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onHover(callback: (isHover: boolean) =&gt; void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
| onHover(callback: (isHover?: boolean) =&gt; void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
| onMouse(callback: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
......@@ -29,30 +29,11 @@ None
| screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
| x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
| y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
| button | [MouseButton](#mousebutton) | Mouse button. |
| action | [MouseAction](#mouseaction) | Event action. |
## MouseButton
| Name | Type | Description |
| -------- | -------- | -------- |
| Left | number | Left mouse button. |
| Right | number | Right mouse button. |
| Middle | number | Middle mouse button. |
| Back | number | Back button on the left of the mouse. |
| Forward | number | Forward button on the left of the mouse. |
| None | number | No button. |
## MouseAction
| Name | Type | Description |
| -------- | -------- | -------- |
| Press | number | The mouse button is pressed. |
| Release | number | The mouse button is released. |
| Move | number | The mouse cursor moves. |
| button | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button. |
| action | [MouseAction](ts-appendix-enums.md#mouseaction) | Event action. |
## Example
```ts
// xxx.ets
@Entry
......
en/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ b825d0e7
......@@ -85,11 +85,11 @@ The following is an example:
```css
/* Page style xxx.css */
/\* Set the style for all <div> components. \*/
/* Set the style for all <div> components. */
div {
flex-direction: column;
}
/* Set the style for the component whose class is title. */
/* Set the style for the component whose class is title.*/
.title {
font-size: 30px;
}
......@@ -101,11 +101,11 @@ div {
.title, .content {
padding: 5px;
}
/\* Set the style for all texts of components whose class is container.\*/
/* Set the style for all texts of components whose class is container.*/
.container text {
color: \#007dff;
}
/\* Set the style for direct descendant texts of components whose class is container.\*/
/* Set the style for direct descendant texts of components whose class is container.*/
.container &gt; text {
color: #fa2a2d;
}
......
en/application-dev/ui/ts-types.md
浏览文件 @ b825d0e7
# Types
## Length Type
## Resource
| Name| Type| Description|
| -------- | -------- | -------- |
| Length | string \| number | Length unit. If the input is a number, use vp. If the input is a string, explicitly specify the unit, for example, '10px', or specify the length in percentage, for example, '100%'.|
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.
## Angle Type
- `$r('belonging.type.name')`
| Name| Type| Description|
| -------- | -------- | -------- |
| Angle | string \| number | Angle unit. If the input is a number, use deg. If the input is a string, use either of the following angle units:<br>- deg: for example, '100deg'<br>- rad: for example, '3.14rad' |
**belonging**: system or application resource. The value can be **'sys'** or **'app'**.
**type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**.
## Point Type
**name**: resource name, which is determined during resource definition.
| Name| Type| Description|
| -------- | -------- | -------- |
| Point | [Length, Length] | Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.|
- `$rawfile('filename')`
**filename**: name of the file in **resources/rawfile** of the project.
## Color Type
| Name | Type | Readable| Writable| Description |
| ----------------------- | ------ | ---- | ---- | ---------- |
| id | number | Yes | No | Resource ID. |
| type | number | Yes | No | Resource type. |
| params | any[] | Yes | No | Optional resource parameters. |
| bundleName<sup>9+</sup> | string | Yes | No | Bundle name. |
| moduleName<sup>9+</sup> | string | Yes | No | Module name.|
The Color type used by component attribute methods is described as follows:
## Length
| Name| Type| Description|
| -------- | -------- | -------- |
| Color | string \| number \| Color | Color information. If the input is a string, use rgb or rgba to specify the color. If the input is a number, use Hex format to specify the color. If the input is a Color enum, use a color value to specify the color.<br>- 'rgb(255, 255, 255)'<br>- 'rgba(255, 255, 255, 1.0)'<br>- Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF'<br>- Enum: Color.Black, Color.White |
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. |
The supported Color enums are described as follows:
## ResourceStr<sup>8+</sup>
The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type.
| Color| Value| Illustration|
| -------- | -------- | -------- |
| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
| Blue | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
| Brown | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
| Gray | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
| Green | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
| Orange | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
| Pink | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
| Red | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
| White | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
| Yellow | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
| Type | Description |
| -------- | --------------------------------------------------- |
| string | String type. |
| Resource | String referenced from system or application resources.|
## Padding
## ColorStop Type
The **Padding** type is used to describe the padding areas in different directions of a component.
ColorStop is used to describe the progressive color stop.
| 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.|
| Name| Type| Description|
| -------- | -------- | -------- |
| ColorStop | [Color, number] | Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.|
## Margin
The **Margin** type is used to describe the margin areas in different directions of a component.
## Resource Type
| 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.|
The Resource type is used to reference resources for setting the value of a component attribute.
## EdgeWidths<sup>9+</sup>
You can use `$r` or `$rawfile` to create a Resource object. For details, see [Resource Access](ts-resource-access.md).
The **EdgeWidths** type is used to describe the edge widths in different directions of a component.
- `$r('belonging.type.name')`
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- |--------------------- |
| top | Length | No | Width of the top edge of the component. |
| right | Length | No | Width of the right edge of the component. |
| bottom | Length | No | Width of the bottom edge of the component. |
| left | Length | No | Width of the left edge of the component. |
`belonging` : system or application resource. The value can be 'sys' or 'app'.
## BorderRadiuses<sup>9+</sup>
`type` : resource type, which can be 'color', 'float', 'string', or 'media'.
The **BorderRadiuses** type is used to describe the radius of the rounded corners of a component.
`name` : resource name, which is determined during resource definition.
| Name | Type | Mandatory| Description |
| ----------- | ------ | ---- |--------------------- |
| topLeft | Length | No | Radius of the top left rounded corner of the component. |
| topRight | Length | No | Radius of the top right rounded corner of the component. |
| bottomLeft | Length | No | Radius of the bottom left rounded corner of the component. |
| bottomRight | Length | No | Radius of the bottom right rounded corner of the component. |
- `$rawfile('filename')`
## EdgeColors<sup>9+</sup>
The **EdgeColors** type is used to describe the edge colors of a component.
| Name | Type | Mandatory| Description |
| ------- | --------------- | ---- |--------------------- |
| top | ResourceColor | No | Color of the top edge of the component. |
| right | ResourceColor | No | Color of the right edge of the component. |
| bottom | ResourceColor | No | Color of the bottom edge of the component. |
| left | ResourceColor | No | Color of the left edge of the component. |
## EdgeStyles<sup>9+</sup>
The **EdgeStyles** type is used to describe the edge styles of a component.
| Name | Type | Mandatory| Description |
| ------- | ------------- | ---- |--------------------- |
| top | BorderStyle | No | Style of the top edge of the component. |
| right | BorderStyle | No | Style of the right edge of the component. |
| bottom | BorderStyle | No | Style of the bottom edge of the component. |
| left | BorderStyle | No | Style of the left edge 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. |
## ResourceColor<sup>8+</sup>
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.|
## LengthConstrain
The **LengthConstrain** type is used to limit the maximum and minimum lengths of a component.
| Name | Type | Mandatory| Description |
| --------- | ------ | ---- |---------------- |
| minLength | Length | Yes | Minimum length of the component. |
| maxLength | Length | Yes | Maximum length of the component. |
## Font
The **Font** type is used to set the text style.
`filename` : name of the file in resources/rawfile of the project.
| 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. |
| Name| Type| Description|
| -------- | -------- | -------- |
| Resource | {<br>readonly id: [number];<br>readonly type: [number];<br>readonly params?: any[];<br>} | **id**: resource ID.<br>**type**: resource type (enumerated value).<br>**params**: optional parameters.<br>After a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited. |
## Area<sup>8+</sup>
The **Area** type is used to describe the area information of the target element.
## ResourceStr Type<sup>8+</sup>
| 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. |
| Name| Type| Description|
| -------- | -------- | -------- |
| ResourceStr | string \| Resource| Resource string.|
## Position<sup>8+</sup>
## ResourceColor Type<sup>8+</sup>
The **Position** type is used to represent coordinates of a point.
| Name| Type| Description|
| -------- | -------- | -------- |
| ResourceColor | Color \| number \| string \| Resource | Resource color.|
| 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. |
## Font Type<sup>8+</sup>
## ConstraintSizeOptions
| Name| Type| Description|
| -------- | -------- | -------- |
| Font | {<br/>size?: Length;<br/>weight?: <a href="https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md">FontWeight</a> \| number \| string;<br/>family?: string \| <a href="ts-types.md#Resource">Resource</a>;<br/>style?: <a href="https://gitee.com/superFat/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md">FontStyle</a>;<br/>} | Text style.<br>**size**: font size. For the number type, use the unit fp.<br>weight: 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.<br>**family**: font family. 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'**.<br>**style**: font style. |
The **ConstraintSizeOptions** type is used to set the constraint size of a component, thereby limiting the size range during component layout.
## CustomBuilder Type<sup>8+</sup>
| 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. |
You can use CustomBuilder to define custom UI descriptions in component attribute methods.
## SizeOptions
| 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](ts-component-based-builder.md).|
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. |
## Example
```ts
// xxx.ets
@Entry
@Component
struct dataTypeExample {
build() {
Column({ space: 5 }) {
Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%')
Text('90%').width('90%').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('320').width(320).height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
## BorderOptions
Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%')
Text('45deg')
.width(40).height(40)
.rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' })
.fontColor(Color.White)
.backgroundColor(0xF9CF93).textAlign(TextAlign.Center)
The **BorderOptions** type is used to provide border information.
Text('45rad')
.width(40).height(40)
.rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' })
.fontColor(Color.White)
.backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 })
| Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | ----------- |
| width | Length \| EdgeWidths<sup>9+</sup> | No | Border width. |
| color | ResourceColor \| EdgeColors<sup>9+</sup> | No | Border color. |
| radius | Length \| BorderRadiuses<sup>9+</sup> | No | Border radius. |
| style | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | No | Border style. |
Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%')
Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20])
## ColorFilter<sup>9+</sup>
Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%')
Text('0xF9CF93')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor(0xF9CF93)
The **ColorFilter** type is used to create a color filter with a 4*5 matrix.
Text('#F9CF93')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('#F9CF93')
| Name | Type | Mandatory | Description |
| ----------- | -------- | ------ | --------------------------------------------------------------- |
| constructor | number[] | Yes | Constructor for creating a color filter with a 4\*5 matrix. The input parameter is [m*n], which is the matrix value in row m and column n. The matrix is row-first. |
Text('rgb(249, 207, 147)')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('rgb(249, 207, 147)')
Text('rgba(249, 207, 147, 1.0)')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)')
## CustomBuilder<sup>8+</sup>
Text('Color.Yellow')
.textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor(Color.Yellow)
}
.width('100%').margin({ top: 5 })
}
}
```
The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods.
![en-us_image_0000001219982719](figures/en-us_image_0000001219982719.png)
| Name | Type | Description |
| ------------- | ---------------------- | ------------------------------------------------------------ |
| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by **@Builder**. For details, see [@Builder](ts-component-based-builder.md).|
en/application-dev/ui/ui-ts-local-storage.md
浏览文件 @ b825d0e7
......@@ -173,9 +173,9 @@ Establishes two-way data binding between an attribute and this **LocalStorage**
**Return value**
| Type | Description |
| ------------------------------------- | ---------------------------------------- |
| [@Link](ts-component-states-link.md ) | Returns the value corresponding to the specified key if the key is stored in the **LocalStorage**; creates and returns a **Link** instance with the specified value as its default value otherwise|
| Type | Description |
| ------------------------------------ | ------------------------------------------------------------ |
| [@Link](ts-component-states-link.md) | Returns the value corresponding to the specified key if the key is stored in the **LocalStorage**; creates and returns a **Link** instance with the specified value as its default value otherwise.|
......@@ -195,7 +195,7 @@ Establishes one-way data binding with an attribute to update its status.
| Type | Description |
| ------------------------------------ | ---------------------------------------- |
| [@Prop](ts-component-states-prop.md) | Returns one-way binding to an attribute with a given key if the attribute exists; returns **undefined** otherwise. This means that attribute changes made through the **LocalStorage** will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the **LocalStorage**. Note that the variables returned are immutable variables, which are applicable to mutable and immutable state variables. |
| [@Prop](ts-component-states-prop.md) | Returns one-way binding to an attribute with a given key if the attribute exists; returns **undefined** otherwise. This means that attribute changes made through the **LocalStorage** will be synchronized to the variable or component, but attribute changes made by the variable or component will not be synchronized to the **LocalStorage**. Note that the variables returned are immutable variables, which are applicable to mutable and immutable state variables. |
......@@ -286,20 +286,19 @@ Deletes all attributes.
import Ability from '@ohos.application.Ability'
export default class MainAbility extends Ability {
storage : LocalStorage
onCreate(want) {
onCreate() {
this.storage = new LocalStorage();
this.storage.setOrCreate("storageSimpleProp",121);
console.log("[Demo MainAbility onCreate]");
globalThis.abilityWant = want;
console.log("[Demo MainAbility onCreate]");
}
onDestroy() {
console.log("[Demo MainAbility onDestroy]")
}
onWindowStageCreate(windowStage) {
windowStage.setUIContent(this.context,"pages/index",this.storage)
windowStage.loadContent("pages/index",this.storage)
}
onWindowStageDestroy() {
console.log("[Demo] MainAbility onWindoeStageDestroy")
console.log("[Demo] MainAbility onWindoeStageDestroy")
}
onForeground() {
console.log("[Demo] MainAbility onForeground")
......
en/device-dev/driver/driver-platform-gpio-develop.md
浏览文件 @ b825d0e7
......@@ -79,7 +79,7 @@ The following uses **gpio_hi35xx.c** as an example to present the information re
The driver entry must be a global variable of the **HdfDriverEntry** type (defined in **hdf\_device\_desc.h**), and the value of **moduleName** must be the same as that in **device\_info.hcs**. In the HDF, the start address of each **HdfDriverEntry** object of all loaded drivers is collected to form a segment address space similar to an array for the upper layer to invoke.
Generally, the HDF calls the **Bind** function and then the **Init** function to load a driver. If **Init** fails to be called, the HDF calls **Release** to release driver resources and exit.
GPIO driver entry example:
GPIO driver entry example:
```
struct HdfDriverEntry g_gpioDriverEntry = {
......@@ -108,9 +108,9 @@ The following uses **gpio_hi35xx.c** as an example to present the information re
priority = 50;
device_gpio :: device {
device0 :: deviceNode {
policy = 0; // No service is published.
priority = 10; // Driver startup priority.
permission = 0644; // Permission to create device nodes for the driver.
policy = 0; // No service is published.
priority = 10; // Driver startup priority.
permission = 0644; // Permission to create device nodes for the driver.
moduleName = "hisi_pl061_driver"; // (Mandatory) Driver name, which must be the same as moduleName in the driver entry.
deviceMatchAttr = "hisilicon_hi35xx_pl061"; // (Mandatory) Private data of the controller. The value must be the same as the controller information in gpio_config.hcs.
// Add private information about all controllers in this file.
......@@ -128,12 +128,12 @@ The following uses **gpio_hi35xx.c** as an example to present the information re
gpio_config {
controller_0x120d0000 {
match_attr = "hisilicon_hi35xx_pl061"; // (Mandatory) The value must be the same as that of deviceMatchAttr in device_info.hcs.
groupNum = 12; // (Mandatory) GPIO group number.
bitNum = 8; // (Mandatory) Number of GPIO pins in each group.
regBase = 0x120d0000; // (Mandatory) Physical base address.
regStep = 0x1000; // (Mandatory) Register offset step.
irqStart = 48; // (Mandatory) Enable interrupts.
irqShare = 0; // (Mandatory) Whether to share an interrupt.
groupNum = 12; // (Mandatory) GPIO group number.
bitNum = 8; // (Mandatory) Number of GPIO pins in each group.
regBase = 0x120d0000; // (Mandatory) Physical base address.
regStep = 0x1000; // (Mandatory) Register offset step.
irqStart = 48; // (Mandatory) Enable interrupts.
irqShare = 0; // (Mandatory) Whether to share an interrupt.
}
}
}
......@@ -201,13 +201,13 @@ The following uses **gpio_hi35xx.c** as an example to present the information re
- **Init** function
Input parameter:
**Input parameter**:
**HdfDeviceObject**, an interface parameter exposed by the driver, contains the .hcs information.
Return value:
**Return value**:
HDF_STATUS<br/>The table below describes some status. For more information, see **HDF_STATUS** in the **/drivers/framework/include/utils/hdf_base.h** file.
**HDF_STATUS**<br/>The table below describes some status. For more information, see **HDF_STATUS** in the **/drivers/framework/include/utils/hdf_base.h** file.
**Table 2** HDF_STATUS
......@@ -220,7 +220,7 @@ The following uses **gpio_hi35xx.c** as an example to present the information re
| HDF_SUCCESS | Initialization successful.|
| HDF_FAILURE | Initialization failed.|
Function description:
**Function description**:
Initializes the custom structure object and **GpioCntlr**, calls the **GpioCntlrAdd** function at the core layer, and (optional) connects to the virtual file system (VFS).
......@@ -241,11 +241,11 @@ The following uses **gpio_hi35xx.c** as an example to present the information re
...
ret = Pl061GpioInitCntlrMem(pl061); // Allocate memory.
...
pl061->cntlr.count = pl061->groupNum x pl061->bitNum;// (Mandatory) Calculate the number of pins.
pl061->cntlr.priv = (void *)device->property; // (Mandatory) Store device attributes.
pl061->cntlr.ops = &g_method; // (Mandatory) Attach the GpioMethod instance.
pl061->cntlr.device = device; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and GpioCntlr.
ret = GpioCntlrAdd(&pl061->cntlr); // (Mandatory) Call this function to fill the structure of the core layer. The driver accesses the platform core layer only after a success signal is returned.
pl061->cntlr.count = pl061->groupNum * pl061->bitNum;// (Mandatory) Calculate the number of pins.
pl061->cntlr.priv = (void *)device->property; // (Mandatory) Store device attributes.
pl061->cntlr.ops = &g_method; // (Mandatory) Attach the GpioMethod instance.
pl061->cntlr.device = device; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and GpioCntlr.
ret = GpioCntlrAdd(&pl061->cntlr); // (Mandatory) Call this function to fill the structure of the core layer. The driver accesses the platform core layer only after a success signal is returned.
...
Pl061GpioDebugCntlr(pl061);
#ifdef PL061_GPIO_USER_SUPPORT // (Optional) Access the user-level VFS if it is supported.
......@@ -258,19 +258,22 @@ The following uses **gpio_hi35xx.c** as an example to present the information re
```
- **Release** function
Input parameter:
**Input parameter**:
**HdfDeviceObject**, an interface parameter exposed by the driver, contains the .hcs configuration file information.
Return value:
**Return value**:
No value is returned.
Function description:
**Function description**:
Releases the memory and deletes the controller. This function assigns values to the **Release** function in the driver entry structure. If the HDF fails to call the **Init** function to initialize the driver, the **Release** function can be called to release driver resources. All forced conversion operations for obtaining the corresponding object can be successful only when the **Init** function has the value assignment operations.
Releases the memory and deletes the controller. This function assigns values to the **Release** function in the driver entry structure. If the HDF fails to call the **Init** function to initialize the driver, the **Release** function can be called to release driver resources.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> All forced conversion operations for obtaining the corresponding object can be successful only when **Init()** has the corresponding value assignment operations.
```
static void Pl061GpioRelease(struct HdfDeviceObject *device)
{
......
en/device-dev/driver/driver-platform-hdmi-develop.md
浏览文件 @ b825d0e7
......@@ -165,12 +165,12 @@ The HDMI module adaptation involves the following steps:
platform :: host {
device_hdmi :: device {
device0 :: deviceNode {
policy = 2; // Publish services.
priority = 20; // Driver startup priority.
permission = 0644; // Permission to create device nodes for the driver.
serviceName = "HDF_PLATFORM_HDMI_0"; // (Mandatory) Unique name of the service published by the driver.
moduleName = "hdmi_driver"; // (Mandatory) Driver name, which must be the same as moduleName in the driver entry.
deviceMatchAttr = "adapter_hdmi_driver"; // (Mandatory) Controller private data, which must be same as that of the corresponding controller in hdmi_config.hcs.
policy = 2; // Publish services.
priority = 20; // Driver startup priority.
permission = 0644; // Permission to create device nodes for the driver.
serviceName = "HDF_PLATFORM_HDMI_0"; // (Mandatory) Unique name of the service published by the driver.
moduleName = "hdmi_driver"; // (Mandatory) Driver name, which must be the same as moduleName in the driver entry.
deviceMatchAttr = "adapter_hdmi_driver"; // (Mandatory) Controller private data, which must be same as that of the corresponding controller in hdmi_config.hcs.
} // The specific controller information is in hdmi_config.hcs.
}
}
......@@ -183,12 +183,12 @@ The HDMI module adaptation involves the following steps:
root {
platform {
hdmi_config {
template hdmi_controller { // Template configuration. In the template, you can configure the common parameters shared by device nodes.
match_attr = ""; // (Mandatory) The value must be the same as that of deviceMatchAttr in device_info.hcs.
template hdmi_controller { // Template configuration. In the template, you can configure the common parameters shared by device nodes.
match_attr = ""; // (Mandatory) The value must be the same as that of deviceMatchAttr in device_info.hcs.
index = 0; // (Mandatory) HDMI controller number.
regBasePhy = 0x10100000; // (Mandatory) Physical base address of the register.
regBasePhy = 0x10100000; // (Mandatory) Physical base address of the register.
regSize = 0xd1; // (Mandatory) Register bit width.
irqNum = 100; //(Mandatory) Interrupt request (IRQ) number.
irqNum = 100; //(Mandatory) Interrupt request (IRQ) number.
maxTmdsClock = 300;
videoTiming = 10;
quantization = 1;
......@@ -241,7 +241,7 @@ The HDMI module adaptation involves the following steps:
struct HdmiAdapterHost {
struct HdmiCntlr *cntlr; // (Mandatory) Control object at the core layer. The details are as follows:
volatile unsigned char *regBase;// (Mandatory) Register base address.
uint32_t regBasePhy // (Mandatory) Physical base address of the register.
uint32_t regBasePhy; // (Mandatory) Physical base address of the register.
uint32_t regSize; // (Mandatory) Register bit width.
uint32_t irqNum; // (Mandatory) IRQ number.
};
......@@ -321,7 +321,7 @@ The HDMI module adaptation involves the following steps:
**Return value**:
HDF_STATUS
**HDF_STATUS**
The table below describes some status. For more information, see **HDF_STATUS** in the **/drivers/framework/include/utils/hdf_base.h** file.
......@@ -356,17 +356,17 @@ The HDMI module adaptation involves the following steps:
HDF_LOGE("%s: malloc host failed!", __func__);
return HDF_ERR_MALLOC_FAIL;
}
cntlr->priv = (void *)host; // (Mandatory) Store host to the private data of cntlr.
cntlr->ops = &g_hdmiHostOps; // (Mandatory) Connect to the HdmiCntlrOps instance.
cntlr->hdfDevObj = obj; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and HdmiCntlr.
obj->service = &cntlr->service; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and HdmiCntlr.
cntlr->priv = (void *)host; // (Mandatory) Store host to the private data of cntlr.
cntlr->ops = &g_hdmiHostOps; // (Mandatory) Connect to the HdmiCntlrOps instance.
cntlr->hdfDevObj = obj; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and HdmiCntlr.
obj->service = &cntlr->service; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and HdmiCntlr.
ret = HdmiAdapterCntlrParse(cntlr, obj); // (Mandatory) Initialize cntlr. If the operation fails, execute goto __ERR.
...
ret = HdmiAdapterHostParse(host, obj); // (Mandatory) Initialize the attributes of the host object. If the operation fails, execute goto__ERR.
ret = HdmiAdapterHostParse(host, obj); // (Mandatory) Initialize the attributes of the host object. If the operation fails, execute goto__ERR.
...
ret = HdmiAdapterHostInit(host, cntlr); // Initialize the custom structure. If the operation fails, execute goto __ERR.
...
ret = HdmiCntlrAdd(cntlr); // Call the functions at the core layer. If the operation fails, execute goto__ERR.
ret = HdmiCntlrAdd(cntlr); // Call the functions at the core layer. If the operation fails, execute goto__ERR.
...
HDF_LOGD("HdmiAdapterBind: success.");
return HDF_SUCCESS;
......@@ -385,7 +385,7 @@ The HDMI module adaptation involves the following steps:
**Return value**:
HDF_STATUS
**HDF_STATUS**
**Function description**:
......@@ -412,16 +412,16 @@ The HDMI module adaptation involves the following steps:
Releases the memory and deletes the controller. This function assigns values to the **Release** callback in the driver entry structure. If the HDF fails to call the **Init** function to initialize the driver, the **Release** function can be called to release driver resources.
> ![](../public_sys-resources/icon-note.gif) **NOTE**<br>
> All forced conversion operations for obtaining the corresponding object can be successful only when the **Init** function has the corresponding value assignment operations.
```c
static void HdmiAdapterRelease(struct HdfDeviceObject *obj)
{
struct HdmiCntlr *cntlr = NULL;
...
cntlr = (struct MmcCntlr *)obj->service;// Forcibly convert HdfDeviceObject to HdmiCntlr by using service. For details about the value assignment, see the Bind function.
cntlr = (struct HdmiCntlr *)obj->service;// Forcibly convert HdfDeviceObject to HdmiCntlr by using service. For details about the value assignment, see the Bind function.
...
HimciDeleteHost((struct HimciAdapterHost *)cntlr->priv);// Customized memory release function. A forced conversion from HdmiCntlr to HimciAdapterHost is involved in the process.
}
```
> ![](../public_sys-resources/icon-note.gif) **NOTE**<br>
> All forced conversion operations for obtaining the corresponding object can be successful only when the **Init** function has the corresponding value assignment operations.
zh-cn/application-dev/ability/context-userguide.md
浏览文件 @ b825d0e7
# 应用上下文使用指导
# 应用上下文Context使用指导
## Context概述
......@@ -10,7 +10,7 @@
只有app/Context中的方法属于FA模型对应的Context。该模式下，应用级别的Context和Ability级别的Context都是该类型的实例，如果在应用级别的Context里面调用了Ability级别的方法，会产生错误。所以开发者需要注意Context实例所代表的实际含义。
- Stage模型
除了app/Context之外的Context都属于Stage模型，分别有application/Context、application/ApplicationContext、application/AbilityStageContext、application/ExtensionContext、application/AbilityContext、application/FormExtensionContext等Context。这些Context的介绍及使用方式将会在[Stage模型和Context详细介绍](#stage模型和context详细介绍)种进行说明。
除了app/Context之外的Context都属于Stage模型，分别有application/Context、application/ApplicationContext、application/AbilityStageContext、application/ExtensionContext、application/AbilityContext、application/FormExtensionContext等Context。这些Context的介绍及使用方式将会在[Stage模型和Context详细介绍](#stage模型和context详细介绍)中进行说明。
![contextIntroduction](figures/contextIntroduction.png)
......
zh-cn/application-dev/ability/fa-brief.md
浏览文件 @ b825d0e7
......@@ -26,7 +26,17 @@ Ability框架在API 8及更早版本使用FA模型。FA模型中Ability分为Pag
应用独享独立进程，Ability独享独立线程，应用进程在Ability第一次启动时创建，并为启动的Ability创建线程，应用启动后再启动应用内其他Ability，会为每一个Ability创建相应的线程。每个Ability绑定一个独立的JSRuntime实例，因此Ability之间是隔离的。
![fa-threading-model](figures/fa-threading-model.png)
## 应用包结构
FA模型的应用包的工程目录结构，请参考[OpenHarmony工程介绍](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-project-overview-0000001218440650#section4154183910141)。
对FA模型的应用包结构的配置说明，请参考[应用包结构说明（FA模型）](../quick-start/package-structure.md)。
## 相关实例
针对Ability开发，有以下相关实例可供参考：
- [`DistributedCalc`：分布式计算器（JS）（API8）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/common/DistributeCalc)
......
zh-cn/application-dev/ability/stage-brief.md
浏览文件 @ b825d0e7
......@@ -97,7 +97,18 @@
下图展示了应用的进程模型。
![stageprocessmodel](figures/stageprocessmodel.png)
## 应用包结构
Stage模型的应用包的工程目录结构，请参考[OpenHarmony工程介绍](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-project-overview-0000001218440650#section56487581904)。
对Stage模型的应用包结构的配置说明，请参考[应用包结构说明（Stage模型）](../quick-start/stage-structure.md)。
## 相关实例
针对Stage模型下的Ability开发，有以下相关实例可供参考：
- [`MissionManager`：系统任务管理（eTS）（API9）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/ability/MissionManager)
- [`Launcher`：仿桌面应用（eTS）（API9）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/ability/Launcher)
zh-cn/application-dev/database/database-preference-guidelines.md
浏览文件 @ b825d0e7
......@@ -171,7 +171,9 @@
console.info("Failed to delete. Cause: " + err);
})
```
## 相关实例
针对首选项开发，有以下相关实例可供参考：
- [`Preferences`：首选项（eTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/data/Preferences)
\ No newline at end of file
zh-cn/application-dev/device/usb-overview.md
浏览文件 @ b825d0e7
......@@ -9,7 +9,7 @@ USB服务是应用访问底层的一种设备抽象概念。开发者根据提
USB服务系统包含USB API、USB Service、USB HAL。
**图2** USB服务运作机制
**图1** USB服务运作机制
![zh-cn_image_0000001237821727](figures/zh-cn_image_0000001237821727.png)
......
zh-cn/contribute/贡献指南.md 已删除 100644 → 0
浏览文件 @ 91754e8d
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或