• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Index.ets
2@Component
3struct Page01 {
4
5  @Consume('pageInfos') pageInfos: NavPathStack;
6
7  build() {
8    NavDestination() {
9      Button('push Page01')
10        .width('80%')
11        .onClick(() => {
12          this.pageInfos.pushPathByName('Page01', '');
13        })
14        .margin({top: 10, bottom: 10})
15      Button('push Dialog01')
16        .width('80%')
17        .onClick(() => {
18          this.pageInfos.pushPathByName('Dialog01', '');
19        })
20        .margin({top: 10, bottom: 10})
21    }
22    .title('Page01')
23  }
24}
25
26@Component
27struct Dialog01 {
28
29  @Consume('pageInfos') pageInfos: NavPathStack;
30
31  build() {
32    NavDestination() {
33      Stack() {
34        Column()
35          .width('100%')
36          .height('100%')
37          .backgroundColor(Color.Gray)
38          .opacity(0.1)
39          .onClick(() => {
40            this.pageInfos.pop();
41          })
42        // Add controls for business processing
43        Column() {
44          Text('Dialog01')
45            .fontSize(30)
46            .fontWeight(2)
47          Button('push Page01')
48            .width('80%')
49            .onClick(() => {
50              this.pageInfos.pushPathByName('Page01', '');
51            })
52            .margin({top: 10, bottom: 10})
53          Button('push Dialog01')
54            .width('80%')
55            .onClick(() => {
56              this.pageInfos.pushPathByName('Dialog01', '');
57            })
58            .margin({top: 10, bottom: 10})
59          Button('pop')
60            .width('80%')
61            .onClick(() => {
62              this.pageInfos.pop();
63            })
64            .margin({top: 10, bottom: 10})
65        }
66        .padding(10)
67        .width(250)
68        .backgroundColor(Color.White)
69        .borderRadius(10)
70      }
71    }
72    .hideTitleBar(true)
73    // Set the mode property of this NavDestination to DIALOG
74    .mode(NavDestinationMode.DIALOG)
75  }
76}
77
78@Entry
79@Component
80struct Index {
81  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
82
83  @Builder
84  PagesMap(name: string) {
85    if (name == 'Page01') {
86      Page01()
87    } else if (name == 'Dialog01') {
88      Dialog01()
89    }
90  }
91
92  build() {
93    Navigation(this.pageInfos) {
94      Button('push Page01')
95        .width('80%')
96        .onClick(() => {
97          this.pageInfos.pushPathByName('Page01', '');
98        })
99    }
100    .mode(NavigationMode.Stack)
101    .titleMode(NavigationTitleMode.Mini)
102    .title('主页')
103    .navDestination(this.PagesMap)
104  }
105}
106