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