diff --git a/CODEOWNERS b/CODEOWNERS index b5776edf2a9eb6f1ca0441e380ef32dfc8757117..291454354a636a6bef1d2a605c5cb9c8acd92bc5 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -520,4 +520,3 @@ zh-cn/application-dev/reference/errorcodes/errorcode-webview.md @HelloCrease zh-cn/application-dev/reference/errorcodes/errorcode-window.md @ge-yafang zh-cn/application-dev/reference/errorcodes/errorcode-workScheduler.md @HelloCrease zh-cn/application-dev/reference/errorcodes/errorcode-zlib.md @RayShih -zh-cn/release-notes/changelogs @majiajun518 \ No newline at end of file diff --git a/README.md b/README.md index 0b1fe4ea284ed5df055c0031d96d3cfb759948a3..602a868e0c5966d52b77eff891a6f32232c7d579 100644 --- a/README.md +++ b/README.md @@ -18,15 +18,15 @@ This repository stores device and application development documents provided by - master: the latest version. - - OpenHarmony 3.2 Beta1. [Learn more](en/release-notes/OpenHarmony-v3.2-beta1.md) + - OpenHarmony 3.2 Beta3. [Learn more](en/release-notes/OpenHarmony-v3.2-beta3.md) - OpenHarmony 3.1 Release. [Learn more](en/release-notes/OpenHarmony-v3.1-release.md) - This version is upgraded to OpenHarmony 3.1.1 LTS. [Learn more](en/release-notes/OpenHarmony-v3.1.1-release.md) + This version is upgraded to OpenHarmony 3.1.3 Release. [Learn more](en/release-notes/OpenHarmony-v3.1.3-release.md) - OpenHarmony 3.0 LTS. [Learn more](en/release-notes/OpenHarmony-v3.0-LTS.md) - This version is upgraded to OpenHarmony 3.0.5 LTS. [Learn more](en/release-notes/OpenHarmony-v3.0.5-LTS.md) + This version is upgraded to OpenHarmony 3.0.6 LTS. [Learn more](en/release-notes/OpenHarmony-v3.0.6-LTS.md) - OpenHarmony 2.2 Beta2. [Learn more](en/release-notes/OpenHarmony-v2.2-beta2.md) @@ -34,14 +34,14 @@ This repository stores device and application development documents provided by ### Historical Stable Versions -OpenHarmony_v1.x_release: OpenHarmony v1.1.4 LTS. [Learn more](en/release-notes/OpenHarmony-v1-1-4-LTS.md) +OpenHarmony_v1.x_release: OpenHarmony v1.1.5 LTS. [Learn more](en/release-notes/OpenHarmony-v1.1.5-LTS.md) [More versions](en/release-notes/) ## Third-Party Open-Source Software and License Notice -Third-party license: [Third-Party Open-Source Software and License Notice](en/contribute/third-party-open-source-software-and-license-notice.md) +Third-party license: [Third-Party Open-Source Software and License Notice](en/contribute/open-source-software-and-license-notice.md) ## Contribution diff --git a/en/application-dev/dfx/hiappevent-guidelines.md b/en/application-dev/dfx/hiappevent-guidelines.md index afda67ee6fdf21b3d91d525d397c956d98167e82..b0741597a5cc1de0a1b889cf2f3b0feb68693425 100644 --- a/en/application-dev/dfx/hiappevent-guidelines.md +++ b/en/application-dev/dfx/hiappevent-guidelines.md @@ -64,7 +64,7 @@ For details about the result codes, see [Event Verification Result Codes](#event The following uses a one-time event watcher as an example to illustrate the development procedure. -1. Create an eTS application project. In the displayed **Project** window, choose **entry** > **src** > **main** > **ets** > **pages** > **index.ets**, and double-click **index.ets**. Then, add three buttons to simulate the process of watching for application events. Wherein, button 1 is used to invoke application event logging, button 2 to add an event watcher that automatically triggers a callback, and button 3 to remove the watcher. The complete sample code is as follows: +1. Create an ArkTS application project. In the displayed **Project** window, choose **entry** > **src** > **main** > **ets** > **pages** > **index.ets**, and double-click **index.ets**. Then, add three buttons to simulate the process of watching for application events. Wherein, button 1 is used to invoke application event logging, button 2 to add an event watcher that automatically triggers a callback, and button 3 to remove the watcher. The complete sample code is as follows: ```ts import hiAppEvent from '@ohos.hiAppEvent'; diff --git a/en/application-dev/faqs/faqs-ui-ets.md b/en/application-dev/faqs/faqs-ui-ets.md index 86a05c91851d6844dcc08e368d81b936b7d1b8ac..3ec2b755e3e99db07930d5f8a6d01975985f4948 100644 --- a/en/application-dev/faqs/faqs-ui-ets.md +++ b/en/application-dev/faqs/faqs-ui-ets.md @@ -1,4 +1,4 @@ -# ArkUI (eTS) Development +# ArkUI (ArkTS) Development @@ -72,7 +72,7 @@ Applicable to: OpenHarmony SDK 3.2.2.5, stage model of API version 9 2. Convert data in Uint8Array format to the string type by calling the **String.fromCharCode** API. -Reference: [Resource Management](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-resource-manager.md) +Reference: [Resource Management](../reference/apis/js-apis-resource-manager.md) Example: @@ -94,7 +94,7 @@ Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9 Use the **resourceManager.getString()** API of the **\@ohos.resourceManager** module. -Reference: [Resource Management](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-resource-manager.md#getstring) +Reference: [Resource Management](../reference/apis/js-apis-resource-manager.md#getstring) ## What should I do if the global static variables of a class do not work? @@ -102,8 +102,6 @@ Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9 Objects imported to abilities and pages are packaged into two different closures, that is, two global objects. In this case, a static variable referenced by the abilities is not the same object as that referenced by the pages. Therefore, global variables cannot be defined by defining static variables in the class. You are advised to use AppStorage to manage global variables. -Reference: [AppStorage](https://docs.openharmony.cn/pages/v3.2Beta/en/application-dev/ui/ts-application-states-appstorage.md/) - ## How do I obtain resources in the stage model? Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9 @@ -154,9 +152,9 @@ build() { Applicable to: OpenHarmony SDK 3.2.2.5, stage model of API version 9 -No. Currently, **CustomDialog** can be used only on eTS pages. +No. Currently, **CustomDialog** can be used only on ArkTS pages. -Reference: [Custom Dialog Box](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md) +Reference: [Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md) ## How do I transfer variables in CustomDialog to variables on pages? @@ -210,7 +208,7 @@ Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9 By default, child components in a **\** are horizontally aligned to the left. To center them, perform the following steps: -Nest a **\** component and set it to **justifyContent(FlexAlign.Center)**. For details, see [Grid Layout](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md). +Nest a **\** component and set it to **justifyContent(FlexAlign.Center)**. For details, see [Grid Layout](../reference/arkui-ts/ts-container-gridcontainer.md). Example: @@ -267,13 +265,13 @@ export default class MainAbility extends Ability { } ``` -## How do I execute JavaScript functions in the \ component in eTS code? +## How do I execute JavaScript functions in the \ component in ArkTS code? Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9 Call the **runJavaScript** API in the **WebController** to asynchronously execute JavaScript scripts. This API uses a callback to return the execution result. Note: **runJavaScript** can only be called after **loadUrl** has been completed. For example, it can be called in **onPageEnd**. -Reference: [Web](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-basic-components-web.md) +Reference: [Web](../reference/arkui-ts/ts-basic-components-web.md) ## How do I fix misidentification of the pan gesture where container nesting is involved? diff --git a/en/application-dev/notification/background-agent-scheduled-reminder-guide.md b/en/application-dev/notification/background-agent-scheduled-reminder-guide.md index b789e20218f1d8508ce5dbf1b515179e6f23b9ef..71ffeb0b07acfb088988163a68f72882d267f49b 100644 --- a/en/application-dev/notification/background-agent-scheduled-reminder-guide.md +++ b/en/application-dev/notification/background-agent-scheduled-reminder-guide.md @@ -37,7 +37,7 @@ For details about the APIs, see [reminderAgent](../reference/apis/js-apis-remind import reminderAgent from '@ohos.reminderAgent'; import notification from '@ohos.notification'; export default { - // eTS project: + // ArkTS project: let timer : reminderAgent.ReminderRequestTimer = { reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER, triggerTimeInSeconds: 10, @@ -67,7 +67,7 @@ For details about the APIs, see [reminderAgent](../reference/apis/js-apis-remind Sample code for defining a reminder agent for a calendar event: ```js - // eTS project: + // ArkTS project: let calendar : reminderAgent.ReminderRequestCalendar = { reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR, dateTime: { @@ -113,7 +113,7 @@ For details about the APIs, see [reminderAgent](../reference/apis/js-apis-remind Sample code for defining a reminder agent for an alarm: ```js - // eTS project: + // ArkTS project: let alarm : reminderAgent.ReminderRequestAlarm = { reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM, hour: 11, diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index 64e2d51d737e740216286689bab453b583daeddc..9b89cfd83f8a3af29bda3fe76016d269561282cb 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -1,13 +1,22 @@ # Quick Start - - Getting Started - - [Preparations](start-overview.md) + - [Before You Start](start-overview.md) - [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md) - [Getting Started with ArkTS in FA Model](start-with-ets-fa.md) - - [Getting Started with JavaScript in FA Model](start-with-js-fa.md) + - [Getting Started with JavaScript in FA Model](start-with-js-fa.md) - Development Fundamentals - [Application Package Structure Configuration File (FA Model)](package-structure.md) - [Application Package Structure Configuration File (Stage Model)](stage-structure.md) - [SysCap](syscap.md) - - [HarmonyAppProvision Configuration File](app-provision-structure.md) - + - [Resource Categories and Access](resource-categories-and-access.md) + - Learning ArkTS + - [Getting Started with ArkTS](arkts-get-started.md) + - ArkTS Syntax (Declarative UI) + - [Basic UI Description](arkts-basic-ui-description.md) + - State Management + - [Basic Concepts](arkts-state-mgmt-concepts.md) + - [State Management with Page-level Variables](arkts-state-mgmt-page-level.md) + - [State Management with Application-level Variables](arkts-state-mgmt-application-level.md) + - [Dynamic UI Element Building](arkts-dynamic-ui-elememt-building.md) + - [Rendering Control](arkts-rendering-control.md) + - [Restrictions and Extensions](arkts-restrictions-and-extensions.md) \ No newline at end of file diff --git a/en/application-dev/quick-start/arkts-basic-ui-description.md b/en/application-dev/quick-start/arkts-basic-ui-description.md new file mode 100644 index 0000000000000000000000000000000000000000..d20efe12859e944d9d78fb71688dc4aada729228 --- /dev/null +++ b/en/application-dev/quick-start/arkts-basic-ui-description.md @@ -0,0 +1,205 @@ +# Basic UI Description + +In ArkTS, you define a custom component by using decorators **@Component** and **@Entry** to decorate a data structure declared with the **struct** keyword. A custom component provides a **build** function, where you must write the basic UI description in chain call mode. For details about the UI description, see [UI Description Specifications](#ui-description-specifications). + +## Basic Concepts + +- struct: a data structure that can be used to implement custom components and cannot have inheritance. The **new** keyword can be omitted when initializing a struct. + +- Decorator: a special type of declaration that can be applied to classes, structures, or class attributes to add new functionality to them. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines. + + ```ts + @Entry + @Component + struct MyComponent { + } + ``` + +- **build** function: a function that complies with the **Builder** API definition and is used to define the declarative UI description of components. A **build** function must be defined for custom components, and custom constructors are prohibited for custom components. + + ```ts + interface Builder { + build: () => void + } + ``` + +- **@Component**: a decorator applied to a struct to equip it with the component-based capability. The **build** method must be implemented for UI creation. + +- **@Entry**: a decorator applied to a struct to make it the entry to a page, which is rendered and displayed when the page is loaded. + +- **@Preview**: a decorator applied to struct to make it previewable in the DevEco Studio Previewer. The decorated component is created and displayed when the residing page is loaded. + + > **NOTE** + > + > In a single source file, you can use up to 10 **@Preview** decorators to decorate custom components. For details, see [Previewing ArkTS Components](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596#section146052489820). + +- Chain call: a syntax for configuring the attribute methods, event methods, and more of UI components by using the dot notation. + +## UI Description Specifications + +### Structs Without Parameters + +A struct without parameters is a component whose API definition has empty parentheses. No parameter needs to be passed to this type of component, for example, the **Divider** component in the following snippet: + +```ts +Column() { + Text('item 1') + Divider() + Text('item 2') +} +``` + +### Structs with Mandatory Parameters + +A struct with mandatory parameters is a component whose API definition expects parameters enclosed in the parentheses. You can use constants to assign values to the parameters. + +Sample code: + +- Set the mandatory parameter **src** of the **\** component as follows: + + ```ts + Image('https://xyz/test.jpg') + ``` + +- Set the mandatory parameter **content** of the **\** component as follows: + + ```ts + Text('test') + ``` + +You can use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements. For details about the variables, see [State Management with Page-level Variables](arkts-state-mgmt-page-level.md) and [State Management with Application-level Variables](arkts-state-mgmt-application-level.md). For example, set a variable or expression to construct the **\** and **\** components: + +```ts +Image(this.imagePath) +Image('https://' + this.imageUrl) +Text(`count: ${this.count}`) +``` + +### Attribute Configuration + +Component attributes are configured using an attribute method, which follows the corresponding component and is bound to the component using the "**.**" operator. + +- Example of configuring the font size attribute of the **\** component: + + ```ts + Text('test') + .fontSize(12) + ``` + +- Example of configuring multiple attributes at the same time by using the "**.**" operator to implement chain call: + + ```ts + Image('test.jpg') + .alt('error.jpg') + .width(100) + .height(100) + ``` + +- Example of passing variables or expressions in addition to constants: + + ```ts + Text('hello') + .fontSize(this.size) + Image('test.jpg') + .width(this.count % 2 === 0 ? 100 : 200) + .height(this.offset + 100) + ``` + +- For attributes of built-in components, ArkUI also provides some predefined [enumeration types](../reference/arkui-ts/ts-appendix-enums.md), which you can pass as parameters to methods if they meet the parameter type requirements. For example, you can configure the font color and weight attributes of the **\** component as follows: + + ```ts + Text('hello') + .fontSize(20) + .fontColor(Color.Red) + .fontWeight(FontWeight.Bold) + ``` + +### Event Configuration + +Events supported by components are configured using event methods, which each follow the corresponding component and are bound to the component using the "**.**" operator. + +- Example of using a lambda expression to configure the event of a component: + + ```ts + Button('add counter') + .onClick(() => { + this.counter += 2 + }) + ``` + +- Example of using an anonymous function expression to configure the event of a component (**bind** must be used to ensure that the contained components are referenced by **this** in the function body): + + ```ts + Button('add counter') + .onClick(function () { + this.counter += 2 + }.bind(this)) + ``` + +- Example of using a component's member function to configure the event of the component: + + ```ts + myClickHandler(): void { + this.counter += 2 + } + + ... + + Button('add counter') + .onClick(this.myClickHandler) + ``` + +### Child Component Configuration + +For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside parentheses. The **\**, **\**, **\**, **\**, and **\** components are all container components. + +- Simple example of the **\** component: + + ```ts + Column() { + Text('Hello') + .fontSize(100) + Divider() + Text(this.myText) + .fontSize(100) + .fontColor(Color.Red) + } + ``` + +- Example of nesting multiple child components in the **\** component: + + ```ts + Column() { + Row() { + Image('test1.jpg') + .width(100) + .height(100) + Button('click +1') + .onClick(() => { + console.info('+1 clicked!') + }) + } + + Divider() + Row() { + Image('test2.jpg') + .width(100) + .height(100) + Button('click +2') + .onClick(() => { + console.info('+2 clicked!') + }) + } + + Divider() + Row() { + Image('test3.jpg') + .width(100) + .height(100) + Button('click +3') + .onClick(() => { + console.info('+3 clicked!') + }) + } + } + ``` diff --git a/en/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md b/en/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md new file mode 100644 index 0000000000000000000000000000000000000000..a781f1d81c83a306c135b412b14ded55d032cb02 --- /dev/null +++ b/en/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md @@ -0,0 +1,385 @@ +# Dynamic UI Element Building + +After you've created a custom component (as described in [Basic UI Description](arkts-basic-ui-description.md)), you can customize the internal UI structure for the component, by drawing on the capability of dynamic UI element building. + +## @Builder + +The **@Builder** decorator is used to decorate a function for quickly generating multiple layouts in a custom component. This function can be declared outside the **build** function and used in the **build** function or other **@Builder** decorated functions. The following example shows how to use **@Builder**. + +```ts +// xxx.ets +@Component +struct CompB { + @State CompValue: string = '' + + aboutToAppear() { + console.info('CompB aboutToAppear.') + } + + aboutToDisappear() { + console.info('CompB aboutToDisappear.') + } + + build() { + Column() { + Button(this.CompValue) + .margin(5) + } + } +} + +@Entry +@Component +struct CompA { + size1: number = 100 + @State CompValue1: string = "Hello,CompValue1" + @State CompValue2: string = "Hello,CompValue2" + @State CompValue3: string = "Hello,CompValue3" + + // Use the custom component CompB in the @Builder decorated function CompC. + @Builder CompC(value: string) { + CompB({ CompValue: value }) + } + + @Builder SquareText(label: string) { + Text(label) + .fontSize(18) + .width(1 * this.size1) + .height(1 * this.size1) + } + + // Use the @Builder decorated function SquareText in the @Builder decorated function RowOfSquareTexts. + @Builder RowOfSquareTexts(label1: string, label2: string) { + Row() { + this.SquareText(label1) + this.SquareText(label2) + } + .width(2 * this.size1) + .height(1 * this.size1) + } + + build() { + Column() { + Row() { + this.SquareText("A") + this.SquareText("B") + } + .width(2 * this.size1) + .height(1 * this.size1) + + this.RowOfSquareTexts("C", "D") + Column() { + // Use the @Builder decorated custom components three times. + this.CompC(this.CompValue1) + this.CompC(this.CompValue2) + this.CompC(this.CompValue3) + } + .width(2 * this.size1) + .height(2 * this.size1) + } + .width(2 * this.size1) + .height(2 * this.size1) + } +} +``` +![builder](figures/builder.PNG) + +## @BuilderParam8+ + +The **@BuilderParam** decorator is used to decorate the function type attributes (for example, **@BuilderParam noParam: () => void**) in a custom component. When the custom component is initialized, the attributes decorated by **@BuilderParam** must be assigned values. + +### Background + +In certain circumstances, you may need to add a specific function, such as a click-to-jump action, to a custom component. However, embedding an event method directly inside of the component will add the function to all places where the component is imported. This is where the **@BuilderParam** decorator comes into the picture. When initializing a custom component, you can assign a **@Builder** decorated method to the **@BuilderParam** decorated attribute, thereby adding the specific function to the custom component. + +### Component Initialization Through Parameters + +When initializing a custom component through parameters, assign a **@Builder** decorated method to the **@BuilderParam** decorated attribute — **content**, and call the value of **content** in the custom component. If no parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **noParam: this.specificNoParam**), define the type of the attribute as a function without a return value (for example, **@BuilderParam noParam: () => void**). If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **withParam: this.SpecificWithParam('WithParamA')**), define the type of the attribute as **any** (for example, **@BuilderParam withParam: any**). + +```ts +// xxx.ets +@Component +struct CustomContainer { + header: string = '' + @BuilderParam noParam: () => void + @BuilderParam withParam: any + footer: string = '' + + build() { + Column() { + Text(this.header) + .fontSize(30) + this.noParam() + this.withParam() + Text(this.footer) + .fontSize(30) + } + } +} + +@Entry +@Component +struct CustomContainerUser { + @Builder specificNoParam() { + Column() { + Text('noParam').fontSize(30) + } + } + + @Builder SpecificWithParam(label: string) { + Column() { + Text(label).fontSize(30) + } + } + + build() { + Column() { + CustomContainer({ + header: 'HeaderA', + noParam: this.specificNoParam, + withParam: this.SpecificWithParam('WithParamA'), + footer: 'FooterA' + }) + Divider() + .strokeWidth(3) + .margin(10) + CustomContainer({ + header: 'HeaderB', + noParam: this.specificNoParam, + withParam: this.SpecificWithParam('WithParamB'), + footer: 'FooterB' + }) + } + } +} +``` + +![builder1](figures/builder1.PNG) + +### Component Initialization Through Trailing Closure + +In a custom component, the **@BuilderParam** decorated attribute can be initialized using a trailing closure. During initialization, the component name is followed by a pair of braces ({}) to form a trailing closure (**CustomContainer(){}**). You can consider a trailing closure as a container and add content to it. For example, you can add a component (**{Column(){...}**) to the closure. The syntax of the closure is the same as that of **build**. In this scenario, the custom component has one and only one **@BuilderParam** decorated attribute. + +Example: Add a **\** component and a click event to the closure, and call the **specificParam** method decorated by **@Builder** in the new **\** component. After the **\** component is clicked, the value of the **CustomContainer** component's **header** attribute will change from **header** to **changeHeader**. When the component is initialized, the content of the trailing closure will be assigned to the **closer** attribute decorated by **@BuilderParam**. + +```ts +// xxx.ets +@Component +struct CustomContainer { + header: string = '' + @BuilderParam closer: () => void + + build() { + Column() { + Text(this.header) + .fontSize(30) + this.closer() + } + } +} + +@Builder function specificParam(label1: string, label2: string) { + Column() { + Text(label1) + .fontSize(30) + Text(label2) + .fontSize(30) + } +} + +@Entry +@Component +struct CustomContainerUser { + @State text: string = 'header' + + build() { + Column() { + CustomContainer({ + header: this.text, + }) { + Column() { + specificParam('testA', 'testB') + }.backgroundColor(Color.Yellow) + .onClick(() => { + this.text = 'changeHeader' + }) + } + } + } +} +``` + +![builder2](figures/builder2.gif) + +## @Styles + +The **@Styles** decorator helps avoid repeated style setting, by extracting multiple style settings into one method. When declaring a component, you can invoke this method and use the **@Styles** decorator to quickly define and reuse the custom styles of a component. **@Styles** supports only universal attributes. + +**@Styles** can be defined inside or outside a component declaration. When it is defined outside a component declaration, the component name must be preceded by the keyword **function**. + +```ts +// xxx.ets +@Styles function globalFancy () { + .width(150) + .height(100) + .backgroundColor(Color.Pink) +} + +@Entry +@Component +struct FancyUse { + @Styles componentFancy() { + .width(100) + .height(200) + .backgroundColor(Color.Yellow) + } + + build() { + Column({ space: 10 }) { + Text('FancyA') + .globalFancy() + .fontSize(30) + Text('FancyB') + .globalFancy() + .fontSize(20) + Text('FancyC') + .componentFancy() + .fontSize(30) + Text('FancyD') + .componentFancy() + .fontSize(20) + } + } +} +``` + +![styles](figures/styles.PNG) + +**@Styles** can also be used inside the **[StateStyles](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)** attribute declaration of a component, to assign state-specific attributes to the component. + +In **StateStyles**, **@Styles** decorated methods defined outside the component can be directly called, while those defined inside can be called only with the keyword **this**. + +```ts +// xxx.ets +@Styles function globalFancy () { + .width(120) + .height(120) + .backgroundColor(Color.Green) +} + +@Entry +@Component +struct FancyUse { + @Styles componentFancy() { + .width(80) + .height(80) + .backgroundColor(Color.Red) + } + + build() { + Row({ space: 10 }) { + Button('Fancy') + .stateStyles({ + normal: { + .width(100) + .height(100) + .backgroundColor(Color.Blue) + }, + disabled: this.componentFancy, + pressed: globalFancy + }) + } + } +} +``` + +![styles1](figures/styles1.gif) + +## @Extend + +The **@Extend** decorator adds new attribute methods to built-in components, such as **\**, **\**, and **\