• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# stateStyles: Polymorphic Style
2
3
4Unlike \@Styles and \@Extend, which are used to reuse styles only on static pages, stateStyles enables you to set state-specific styles.
5
6
7## Overview
8
9stateStyles 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:
10
11- focused
12
13- normal
14
15- pressed
16
17- disabled
18
19- selected<sup>10+</sup>
20
21
22## Application Scenarios
23
24
25### Common Scenarios
26
27This 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 red style specified for **normal**.
28
29
30```ts
31@Entry
32@Component
33struct StateStylesSample {
34  build() {
35    Column() {
36      Button('Button1')
37        .stateStyles({
38          focused: {
39            .backgroundColor(Color.Pink)
40          },
41          pressed: {
42            .backgroundColor(Color.Black)
43          },
44          normal: {
45            .backgroundColor(Color.Red)
46          }
47        })
48        .margin(20)
49      Button('Button2')
50        .stateStyles({
51          focused: {
52            .backgroundColor(Color.Pink)
53          },
54          pressed: {
55            .backgroundColor(Color.Black)
56          },
57          normal: {
58            .backgroundColor(Color.Red)
59          }
60        })
61    }.margin('30%')
62  }
63}
64```
65
66
67  **Figure 1** Focused and pressed states
68
69![Video_2023-03-17_120758](figures/Video_2023-03-17_120758.gif)
70
71
72### Combined Use of \@Styles and stateStyles
73
74The following example uses \@Styles to specify different states of stateStyles.
75
76
77
78```ts
79@Entry
80@Component
81struct MyComponent {
82  @Styles normalStyle() {
83    .backgroundColor(Color.Gray)
84  }
85
86  @Styles pressedStyle() {
87    .backgroundColor(Color.Red)
88  }
89
90  build() {
91    Column() {
92      Text('Text1')
93        .fontSize(50)
94        .fontColor(Color.White)
95        .stateStyles({
96          normal: this.normalStyle,
97          pressed: this.pressedStyle,
98        })
99    }
100  }
101}
102```
103
104  **Figure 2** Normal and pressed states
105
106![Video_2023-03-17_144824](figures/Video_2023-03-17_144824.gif)
107
108
109### Using Regular Variables and State Variables in stateStyles
110
111stateStyles can use **this** to bind regular variables and state variables in a component.
112
113
114```ts
115@Entry
116@Component
117struct CompWithInlineStateStyles {
118  @State focusedColor: Color = Color.Red;
119  normalColor: Color = Color.Green
120
121  build() {
122    Column() {
123      Button('clickMe').height(100).width(100)
124        .stateStyles({
125          normal: {
126            .backgroundColor(this.normalColor)
127          },
128          focused: {
129            .backgroundColor(this.focusedColor)
130          }
131        })
132        .onClick(() => {
133          this.focusedColor = Color.Pink
134        })
135        .margin('30%')
136    }
137  }
138}
139```
140
141By default, the button is displayed in green in the normal state. When you press the Tab key for the first time, the button is focused and displayed in the red style specified for **focus**. After a click event occurs and you press the Tab key again, the button is focused and changes to the pink style.
142
143  **Figure 3** Change of the styles in focused state by a click
144
145![Video_2023-03-17_144605](figures/Video_2023-03-17_144605.gif)
146