• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Attribute Modifier
2
3With the attribute modifier, you can dynamically set component attributes, complete with the **if/else** syntax and polymorphic style.
4
5>  **NOTE**
6>
7>  This feature is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8
9## attributeModifier
10
11attributeModifier(modifier: AttributeModifier\<T>)
12
13Creates an attribute modifier.
14
15**System capability**: SystemCapability.ArkUI.ArkUI.Full
16
17**Parameters**
18
19| Name  | Type                 | Mandatory| Description                                                        |
20| -------- | --------------------- | ---- | ------------------------------------------------------------ |
21| modifier | AttributeModifier\<T> | Yes  | Modifier for dynamically setting attributes on the current component. The **if/else** syntax is supported.<br>**modifier**: attribute modifier. You need to customize classes to implement the **AttributeModifier** API.<br> Currently, this API only works with the **backgroundColor** attribute of the **\<Button>** component.|
22
23## AttributeModifier\<T>
24
25You need to customize classes to implement the **AttributeModifier** API.
26
27### applyNormalAttribute
28applyNormalAttribute(instance: T) : void
29
30Applies the style of a component in the normal state.
31
32### applyPressedAttribute
33applyPressedAttribute(instance: T) : void
34
35Applies the style of a component in the pressed state.
36
37### applyFocusedAttribute
38applyFocusedAttribute(instance: T) : void
39
40Applies the style of a component in the focused state.
41
42### applyDisabledAttribute
43applyDisabledAttribute(instance: T) : void
44
45Applies the style of a component in the disabled state.
46
47### applySelectedAttribute
48applySelectedAttribute(instance: T) : void
49
50Applies the style of a component in the selected state.
51
52In the preceding APIs, **instance** indicates the component type. You can customize these APIs and use them with the **if/else **syntax.
53
54**Parameters**
55
56| Name            | Description                                                        |
57| -------------------- | ------------------------------------------------------------ |
58| instance |Component attribute class, which identifies the type of component to which attributes will be applied, for example, **ButtonAttribute** for the **\<Button>** component and **TextAttribute** of the **\<Text>** component.|
59
60**Value range of the instance parameter**
61
62AlphabetIndexerAttribute, BadgeAttribute, BlankAttribute, ButtonAttribute, CalendarPickerAttribute, CanvasAttribute, CheckboxAttribute, CheckboxGroupAttribute, CircleAttribute, ColumnAttribute, ColumnSplitAttribute, ShapeAttribute, CommonAttribute, CounterAttribute, DataPanelAttribute, DatePickerAttribute, DividerAttribute, EffectComponentAttribute, EllipseAttribute, FlexAttribute, FlowItemAttribute, FormComponentAttribute, FormLinkAttribute, GaugeAttribute, GridAttribute, GridColAttribute, ColumnAttribute, GridItemAttribute, GridRowAttribute, HyperlinkAttribute, ImageAttribute, ImageAnimatorAttribute, ImageSpanAttribute, LineAttribute, ListAttribute, ListItemAttribute, ListItemGroupAttribute, LoadingProgressAttribute, MarqueeAttribute, MenuAttribute, MenuItemAttribute, MenuItemGroupAttribute, NavDestinationAttribute, NavigationAttribute, NavigatorAttribute, NavRouterAttribute, PanelAttribute, PathAttribute, PatternLockAttribute, PluginComponentAttribute, PolygonAttribute, PolylineAttribute, ProgressAttribute, QRCodeAttribute, RadioAttribute, RatingAttribute, RectAttribute, RefreshAttribute, RelativeContainerAttribute, RemoteWindowAttribute, RichEditorAttribute, RichTextAttribute, RowAttribute, RowSplitAttribute, ScrollAttribute, ScrollBarAttribute, SearchAttribute, SelectAttribute, ShapeAttribute, SideBarContainerAttribute, SliderAttribute, SpanAttribute, StackAttribute, StepperAttribute, StepperItemAttribute, SwiperAttribute, TabContentAttribute, TabsAttribute, TextAttribute, TextAreaAttribute, TextClockAttribute, TextInputAttribute, TextPickerAttribute, TextTimerAttribute, TimePickerAttribute, ToggleAttribute, UIExtensionComponentAttribute, VideoAttribute, WaterFlowAttribute, WebAttribute, XComponentAttribute
63
64**Supported attributes**
65
66Attributes whose input parameters are [CustomBuilder](../arkui-ts/ts-types.md#custombuilder8) or Lambda expressions are not supported, and events are not supported.
67
68## Example
69
70```ts
71// xxx.ets
72class MyButtonModifier implements AttributeModifier<ButtonAttribute> {
73  isDark: boolean = false
74  applyNormalAttribute(instance: ButtonAttribute): void {
75    if (this.isDark) {
76      instance.backgroundColor(Color.Black)
77    } else {
78      instance.backgroundColor(Color.Red)
79    }
80  }
81}
82
83@Entry
84@Component
85struct attributeDemo {
86  @State modifier: MyButtonModifier = new MyButtonModifier()
87
88  build() {
89    Row() {
90      Column() {
91        Button("Button")
92          .attributeModifier(this.modifier)
93          .onClick(() => {
94            this.modifier.isDark = !this.modifier.isDark
95          })
96      }
97      .width('100%')
98    }
99    .height('100%')
100  }
101}
102```
103![attributeModifier_ifelse](figures/attributeModifier_ifelse.gif)
104
105
106
107```ts
108// xxx.ets
109class MyButtonModifier implements AttributeModifier<ButtonAttribute> {
110  applyNormalAttribute(instance: ButtonAttribute): void {
111    instance.backgroundColor(Color.Black)
112  }
113
114  applyPressedAttribute(instance: ButtonAttribute): void {
115    instance.backgroundColor(Color.Red)
116  }
117}
118
119@Entry
120@Component
121struct attributePressedDemo {
122  @State modifier: MyButtonModifier = new MyButtonModifier()
123
124  build() {
125    Row() {
126      Column() {
127        Button("Button")
128          .attributeModifier(this.modifier)
129      }
130      .width('100%')
131    }
132    .height('100%')
133  }
134}
135```
136![attributeModifier_ifelse](figures/attributeModifier_ifelse.gif)
137