1# Polymorphic Style
2
3You can set state-specific styles for components.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8>
9>  Since API version 11, you can also dynamically set component attributes through [attributeModifier](./ts-universal-attributes-attribute-modifier.md).
10
11## stateStyles
12
13stateStyles(value: StateStyles)
14
15Sets the state-specific styles for the component.
16
17**Widget capability**: This API can be used in ArkTS widgets since API version 9.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name| Type                               | Mandatory| Description                    |
24| ------ | ----------------------------------- | ---- | ------------------------ |
25| value  | [StateStyles](#statestyles) | Yes  | State-specific styles for the component.|
26
27## StateStyles
28
29**Widget capability**: This API can be used in ArkTS widgets since API version 9. Only the [universal attributes](ts-universal-attributes-size.md) are supported.
30
31| Name| Type| Mandatory| Description|
32| -------- | -------- | -------- | -------- |
33| normal | ()=>void | No| Style of the component when being stateless.|
34| pressed | ()=>void | No| Style of the component in the pressed state.|
35| disabled | ()=>void | No| Style of the component in the disabled state.|
36| focused | ()=>void | No| Style of the component in the focused state.|
37| clicked | ()=>void | No| Style of the component in the clicked state.|
38| selected<sup>10+</sup> | ()=&gt;void | No| Style of the component in the selected state.|
39
40**Notes about the selected state:**
41
42- The selected state style depends on the value of the component's selected attribute. You can change the attribute value through [onClick](ts-universal-events-click.md) or [$$](../../../quick-start/arkts-two-way-sync.md).
43
44- The table below lists the components that support the selected state style and their selected attributes or parameters.
45
46  | Component                                                        | Selected Parameter/Attribute| Initial API Version|
47  | ------------------------------------------------------------ | --------------- | ----------- |
48  | [Checkbox](ts-basic-components-checkbox.md) | select          | 10          |
49  | [CheckboxGroup](ts-basic-components-checkboxgroup.md) | selectAll       | 10          |
50  | [Radio](ts-basic-components-radio.md)  | checked         | 10          |
51  | [Toggle](ts-basic-components-toggle.md) | isOn            | 10          |
52  | [ListItem](ts-container-listitem.md) | selected         | 10          |
53  | [GridItem](ts-container-griditem.md) | selected         | 10          |
54  | [MenuItem](ts-basic-components-menuitem.md) | selected         | 10          |
55
56## Example
57
58### Example 1
59
60```ts
61// xxx.ets
62@Entry
63@Component
64struct StyleExample {
65  @State isEnable: boolean = true
66
67  @Styles pressedStyles():void {
68    .backgroundColor("#ED6F21")
69    .borderRadius(10)
70    .borderStyle(BorderStyle.Dashed)
71    .borderWidth(2)
72    .borderColor("#33000000")
73    .width(120)
74    .height(30)
75    .opacity(1)
76  }
77
78  @Styles disabledStyles():void {
79    .backgroundColor("#E5E5E5")
80    .borderRadius(10)
81    .borderStyle(BorderStyle.Solid)
82    .borderWidth(2)
83    .borderColor("#2a4c1919")
84    .width(90)
85    .height(25)
86    .opacity(1)
87  }
88
89  @Styles normalStyles():void {
90    .backgroundColor("#0A59F7")
91    .borderRadius(10)
92    .borderStyle(BorderStyle.Solid)
93    .borderWidth(2)
94    .borderColor("#33000000")
95    .width(100)
96    .height(25)
97    .opacity(1)
98  }
99
100  build() {
101    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
102      Text("normal")
103        .fontSize(14)
104        .fontColor(Color.White)
105        .opacity(0.5)
106        .stateStyles({
107          normal: this.normalStyles,
108        })
109        .margin({ bottom: 20 })
110        .textAlign(TextAlign.Center)
111      Text("pressed")
112        .backgroundColor("#0A59F7")
113        .borderRadius(20)
114        .borderStyle(BorderStyle.Dotted)
115        .borderWidth(2)
116        .borderColor(Color.Red)
117        .width(100)
118        .height(25)
119        .opacity(1)
120        .fontSize(14)
121        .fontColor(Color.White)
122        .stateStyles({
123          pressed: this.pressedStyles,
124        })
125        .margin({ bottom: 20 })
126        .textAlign(TextAlign.Center)
127      Text(this.isEnable == true ? "effective" : "disabled")
128        .backgroundColor("#0A59F7")
129        .borderRadius(20)
130        .borderStyle(BorderStyle.Solid)
131        .borderWidth(2)
132        .borderColor(Color.Gray)
133        .width(100)
134        .height(25)
135        .opacity(1)
136        .fontSize(14)
137        .fontColor(Color.White)
138        .enabled(this.isEnable)
139        .stateStyles({
140          disabled: this.disabledStyles,
141        })
142        .textAlign(TextAlign.Center)
143      Text("control disabled")
144        .onClick(() => {
145          this.isEnable = !this.isEnable
146          console.log(`${this.isEnable}`)
147        })
148    }
149    .width(350).height(300)
150  }
151}
152```
153
154![en-us_image_0000001211898512](figures/en-us_image_0000001211898512.gif)
155
156### Example 2
157
158```ts
159// xxx.ets
160@Entry
161@Component
162struct Index {
163  @State value: boolean = false
164  @State value2: boolean = false
165
166  @Styles
167  normalStyles(): void{
168    .backgroundColor("#E5E5E1")
169  }
170
171  @Styles
172  selectStyles(): void{
173    .backgroundColor("#ED6F21")
174    .borderWidth(2)
175  }
176
177  build() {
178    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
179      Column() {
180        Text('Radio1')
181          .fontSize(25)
182        Radio({ value: 'Radio1', group: 'radioGroup1' })
183          .checked(this.value)
184          .height(50)
185          .width(50)
186          .borderWidth(0)
187          .borderRadius(30)
188          .onClick(() => {
189            this.value = !this.value
190          })
191          .stateStyles({
192            normal: this.normalStyles,
193            selected: this.selectStyles,
194          })
195      }
196      .margin(30)
197
198      Column() {
199        Text('Radio2')
200          .fontSize(25)
201        Radio({ value: 'Radio2', group: 'radioGroup2' })
202          .checked($$this.value2)
203          .height(50)
204          .width(50)
205          .borderWidth(0)
206          .borderRadius(30)
207          .stateStyles({
208            normal: this.normalStyles,
209            selected: this.selectStyles,
210          })
211      }
212      .margin(30)
213    }.padding({ top: 30 })
214  }
215}
216```
217
218![selected](figures/selected.gif)
219