• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
10## Attributes
11
12| Name| Type| Description|
13| -------- | -------- | -------- |
14| stateStyles | StateStyles | Styles of the component for different states.<br>Since API version 9, this API is supported in ArkTS widgets.|
15
16## StateStyles
17
18Since API version 9, this API is supported in ArkTS widgets.
19
20| Name| Type| Mandatory| Description|
21| -------- | -------- | -------- | -------- |
22| normal | ()=&gt;void | No| Style of the component when being stateless.|
23| pressed | ()=&gt;void | No| Style of the component in the pressed state.|
24| disabled | ()=&gt;void | No| Style of the component in the disabled state.|
25| focused | ()=&gt;void | No| Style of the component in the focused state.|
26| clicked | ()=&gt;void | No| Style of the component in the clicked state.|
27| selected<sup>10+</sup> | ()=&gt;void | No| Style of the component in the selected state.|
28
29
30## Example
31
32```ts
33// xxx.ets
34@Entry
35@Component
36struct StyleExample {
37  @State isEnable: boolean = true
38
39  @Styles pressedStyles():void {
40    .backgroundColor("#ED6F21")
41    .borderRadius(10)
42    .borderStyle(BorderStyle.Dashed)
43    .borderWidth(2)
44    .borderColor("#33000000")
45    .width(120)
46    .height(30)
47    .opacity(1)
48  }
49
50  @Styles disabledStyles():void {
51    .backgroundColor("#E5E5E5")
52    .borderRadius(10)
53    .borderStyle(BorderStyle.Solid)
54    .borderWidth(2)
55    .borderColor("#2a4c1919")
56    .width(90)
57    .height(25)
58    .opacity(1)
59  }
60
61  @Styles normalStyles():void {
62    .backgroundColor("#0A59F7")
63    .borderRadius(10)
64    .borderStyle(BorderStyle.Solid)
65    .borderWidth(2)
66    .borderColor("#33000000")
67    .width(100)
68    .height(25)
69    .opacity(1)
70  }
71
72  build() {
73    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
74      Text("normal")
75        .fontSize(14)
76        .fontColor(Color.White)
77        .opacity(0.5)
78        .stateStyles({
79          normal: this.normalStyles,
80        })
81        .margin({ bottom: 20 })
82        .textAlign(TextAlign.Center)
83      Text("pressed")
84        .backgroundColor("#0A59F7")
85        .borderRadius(20)
86        .borderStyle(BorderStyle.Dotted)
87        .borderWidth(2)
88        .borderColor(Color.Red)
89        .width(100)
90        .height(25)
91        .opacity(1)
92        .fontSize(14)
93        .fontColor(Color.White)
94        .stateStyles({
95          pressed: this.pressedStyles,
96        })
97        .margin({ bottom: 20 })
98        .textAlign(TextAlign.Center)
99      Text(this.isEnable == true ? "effective" : "disabled")
100        .backgroundColor("#0A59F7")
101        .borderRadius(20)
102        .borderStyle(BorderStyle.Solid)
103        .borderWidth(2)
104        .borderColor(Color.Gray)
105        .width(100)
106        .height(25)
107        .opacity(1)
108        .fontSize(14)
109        .fontColor(Color.White)
110        .enabled(this.isEnable)
111        .stateStyles({
112          disabled: this.disabledStyles,
113        })
114        .textAlign(TextAlign.Center)
115      Text("control disabled")
116        .onClick(() => {
117          this.isEnable = !this.isEnable
118          console.log(`${this.isEnable}`)
119        })
120    }
121    .width(350).height(300)
122  }
123}
124```
125
126![en-us_image_0000001211898512](figures/en-us_image_0000001211898512.gif)
127