• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \@Styles Decorator: Definition of Reusable Styles
2
3
4If the style of each component needs to be set separately, this will result in a large amount of repeated code during development. Though copying and pasting are available, writing code is still inefficient and error-prone. To maximize code efficiency and maintainability, the \@Styles decorator is introduced.
5
6
7\@Styles 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.
8
9> **NOTE**
10>
11> This decorator can be used in ArkTS widgets since API version 9.
12>
13> This decorator can be used in atomic services since API version 11.
14
15## Rules of Use
16
17- Currently, \@Styles supports only [general attributes](../reference/apis-arkui/arkui-ts/ts-component-general-attributes.md) and [general events](../reference/apis-arkui/arkui-ts/ts-component-general-events.md).
18
19- \@Styles can be defined inside or outside a component declaration. When it is defined outside a component declaration, the method name must be preceded by the keyword **function**.
20
21> **NOTE**
22>
23> This decorator can be used only in the current file and cannot be exported.
24>
25> To the export the decorator, you are advised to use [AttributeModifier](../ui/arkts-user-defined-extension-attributeModifier.md).
26
27  ```ts
28  // Global (outside a component declaration)
29  @Styles function functionName() { ... }
30
31  // Inside a component declaration
32  @Component
33  struct FancyUse {
34    @Styles fancy() {
35      .height(100)
36    }
37  }
38  ```
39
40To allow for cross-file operations, use the [attribute modifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md).
41
42  ```ts
43  // index.ets
44  import { MyButtonModifier } from './setAttribute'
45
46  @Entry
47  @Component
48  struct AttributeDemo {
49    @State modifier: MyButtonModifier = new MyButtonModifier();
50
51    build() {
52      Row() {
53        Column() {
54          Button("Button")
55            .attributeModifier(this.modifier)
56            .onClick(() => {
57              this.modifier.isDark = !this.modifier.isDark
58            })
59        }
60        .width('100%')
61      }
62      .height('100%')
63    }
64  }
65  ```
66
67  ```ts
68  // setAttribute.ets
69  export class MyButtonModifier implements AttributeModifier<ButtonAttribute> {
70    isDark: boolean = false;
71    applyNormalAttribute(instance: ButtonAttribute): void {
72      if (this.isDark) {
73        instance.backgroundColor(Color.Black)
74      } else {
75        instance.backgroundColor(Color.Red)
76      }
77    }
78  }
79  ```
80
81- \@Styles defined inside a component declaration can access constants and state variables of the component through **this**, and mutate the values of state variables through events in \@Styles. The following is an example:
82
83  ```ts
84  @Entry
85  @Component
86  struct FancyUse {
87    @State heightValue: number = 100;
88    @Styles fancy() {
89      .height(this.heightValue)
90      .backgroundColor(Color.Yellow)
91      .onClick(() => {
92        this.heightValue = 200;
93      })
94    }
95  }
96  ```
97
98- The priority of \@Styles defined inside a component declaration is higher than that of \@Styles defined outside a component declaration.
99  The framework preferentially searches for \@Styles within the current component.
100
101
102## Constraints
103
104- \@Styles decorated method cannot contain parameters. Otherwise, an error will be reported during compilation.
105
106  ```ts
107  // Incorrect format.
108  @Styles function globalFancy (value: number) {
109    .width(value)
110  }
111
112  // Correct format.
113  @Styles function globalFancy () {
114    .width(value)
115  }
116  ```
117
118- Logical components cannot be used in the \@Styles method. The attributes in the logical components do not take effect.
119
120  ```ts
121  // Incorrect format.
122  @Styles function backgroundColorStyle() {
123    if (true) {
124      .backgroundColor(Color.Red)
125    }
126  }
127
128  // Correct format.
129  @Styles function backgroundColorStyle() {
130    .backgroundColor(Color.Red)
131  }
132  ```
133
134## Application Scenarios
135
136The following example demonstrates the usage of \@Styles inside and outside a component declaration.
137
138```ts
139// Define a \@Styles decorated method outside a component declaration.
140@Styles function globalFancy  () {
141  .width(150)
142  .height(100)
143  .backgroundColor(Color.Pink)
144}
145
146@Entry
147@Component
148struct FancyUse {
149  @State heightValue: number = 100;
150  // Define a \@Styles decorated method inside a component declaration.
151  @Styles fancy() {
152    .width(200)
153    .height(this.heightValue)
154    .backgroundColor(Color.Yellow)
155    .onClick(() => {
156      this.heightValue = 200
157    })
158  }
159
160  build() {
161    Column({ space: 10 }) {
162      // Use the \@Styles decorated method defined outside a component declaration.
163      Text('FancyA')
164        .globalFancy()
165        .fontSize(30)
166      // Use the @Styles decorated method defined inside a component declaration.
167      Text('FancyB')
168        .fancy()
169        .fontSize(30)
170    }
171  }
172}
173```
174
175<!--no_check-->