• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# stateStyles: Applying Polymorphic Styles
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @jiangtao92-->
5<!--Designer: @piggyguy-->
6<!--Tester: @songyanhong-->
7<!--Adviser: @zhang_yixin13-->
8
9
10Unlike \@Styles, which are used to reuse styles only on static pages, stateStyles enables you to set dynamic, state-specific styles. This topic explores the implementation of polymorphic styles through stateStyles.
11
12> **NOTE**
13>
14> Polymorphic styles support only universal attributes. If a polymorphic style does not take effect, the attribute may be a private, component-specific attribute, for example, [fontColor](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-text-style.md) or [backgroundColor](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md) of the [TextInput](../../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) component. In this case, you can use [attributeModifier](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#attributemodifier) to dynamically set component attributes to enable the polymorphic style.
15
16## Overview
17
18stateStyles is an attribute method that sets the style based on the internal state of a component. It is similar to a CSS pseudo-class, with different syntax. ArkUI provides the following states:
19
20- focused
21
22- normal
23
24- pressed
25
26- disabled
27
28- selected<sup>10+</sup>
29
30> **NOTE**
31>
32> Currently, the focused state can be triggered only by pressing the **Tab** or arrow keys on an external keyboard. Triggering through key presses in nested scrollable components is not supported.
33
34
35## Use Scenarios
36
37
38### Common Scenarios
39
40This example shows the most basic application scenario of stateStyles. **Button1** is the first component and **Button2** the second component. When either of these components is pressed, the black style specified for **pressed** takes effect. When the **Tab** key is pressed for sequential navigation, **Button1** obtains focus first and is displayed in the pink style specified for **focus**. When **Button 2** is focused, it is displayed in the pink style specified for **focus**, and **Button1** changes to the blue style specified for **normal**.
41
42
43```ts
44@Entry
45@Component
46struct StateStylesSample {
47  build() {
48    Column() {
49      Button('Button1')
50        .stateStyles({
51          focused: {
52            .backgroundColor('#ffffeef0')
53          },
54          pressed: {
55            .backgroundColor('#ff707070')
56          },
57          normal: {
58            .backgroundColor('#ff2787d9')
59          }
60        })
61        .margin(20)
62      Button('Button2')
63        .stateStyles({
64          focused: {
65            .backgroundColor('#ffffeef0')
66          },
67          pressed: {
68            .backgroundColor('#ff707070')
69          },
70          normal: {
71            .backgroundColor('#ff2787d9')
72          }
73        })
74    }.margin('30%')
75  }
76}
77```
78
79
80  **Figure 1** Focused and pressed states
81
82![Video_2023-03-17_120758](figures/Video_2023-03-17_120758.gif)
83
84
85### Combined Use of \@Styles and stateStyles
86
87The following example uses \@Styles to specify different states of stateStyles.
88
89
90
91```ts
92@Entry
93@Component
94struct MyComponent {
95  @Styles normalStyle() {
96    .backgroundColor(Color.Gray)
97  }
98
99  @Styles pressedStyle() {
100    .backgroundColor(Color.Red)
101  }
102
103  build() {
104    Column() {
105      Text('Text1')
106        .fontSize(50)
107        .fontColor(Color.White)
108        .stateStyles({
109          normal: this.normalStyle,
110          pressed: this.pressedStyle,
111        })
112    }
113  }
114}
115```
116
117  **Figure 2** Normal and pressed states
118
119![Video_2023-03-17_144824](figures/Video_2023-03-17_144824.gif)
120
121
122### Using Regular Variables and State Variables in stateStyles
123
124stateStyles can use **this** to bind regular variables and state variables in a component.
125
126
127```ts
128@Entry
129@Component
130struct CompWithInlineStateStyles {
131  @State focusedColor: Color = Color.Red;
132  normalColor: Color = Color.Green;
133
134  build() {
135    Column() {
136      Button('clickMe')
137        .height(100)
138        .width(100)
139        .stateStyles({
140          normal: {
141            .backgroundColor(this.normalColor)
142          },
143          focused: {
144            .backgroundColor(this.focusedColor)
145          }
146        })
147        .onClick(() => {
148          this.focusedColor = Color.Pink;
149        })
150        .margin('30%')
151    }
152  }
153}
154```
155
156By default, the button is displayed in green in the normal state. When you press the **Tab** key for the first time, the button obtains focus and is displayed in the red style specified for **focus**. After a click event occurs and you press the **Tab** key again, the button obtains focus and changes to the pink style.
157
158  **Figure 3** Change of the styles in focused state by a click
159
160![Video_2023-03-17_144605](figures/Video_2023-03-17_144605.gif)
161