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