• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @Preview
2
3
4Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed.
5
6
7> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
8> In a source file, at most 10 custom components can be decorated by @Preview.
9
10
11Example of using @Preview:
12
13
14```
15@Entry
16@Component
17struct MyComponent {
18    build() {
19        Column() {
20            Row() {
21                Text('Hello World!')
22                    .fontSize("50lpx")
23                    .fontWeight(FontWeight.Bold)
24            }
25            Row() {
26                Component1()
27            }
28            Row() {
29                Component2()
30            }
31        }
32    }
33}
34@Preview
35@Component
36struct Component1 {
37    build() {
38        Column() {
39            Row() {
40                Text('Hello Component1')
41                    .fontSize("50lpx")
42                    .fontWeight(FontWeight.Bold)
43            }
44        }
45    }
46}
47
48@Component
49struct Component2 {
50    build() {
51        Column() {
52            Row() {
53                Text('Hello Component2')
54                    .fontSize("50lpx")
55                    .fontWeight(FontWeight.Bold)
56            }
57        }
58    }
59}
60```
61