• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { NavigationBar } from '../../../common/components/navigationBar'
17
18@Entry
19@Component
20struct StepperSample {
21  @State currentIndex: number = 0
22  @State iteamStateType: ItemState = ItemState.Normal
23  @State showMessage: string = 'default'
24  private iteamArrays: string[] = ['Normal', 'Disabled', 'Waiting', 'Skip']
25
26  build() {
27    Column() {
28      NavigationBar({ title: 'Stepper' })
29      Column() {
30        Scroll() {
31          Column() {
32            Stepper({
33              index: this.currentIndex
34            }) {
35              StepperItem() {
36                Text('Page One')
37                  .fontSize(35)
38                  .fontColor('#000000')
39                  .width(200)
40                  .lineHeight(50)
41                  .margin({ top: 120 })
42              }
43              .nextLabel('')
44              .position({ x: '28%', y: 0 })
45
46              StepperItem() {
47                Text('Page Two')
48                  .fontSize(35)
49                  .fontColor('#000000')
50                  .width(200)
51                  .lineHeight(50)
52                  .margin({ top: 120 })
53              }
54              .nextLabel('Next')
55              .prevLabel('Previous')
56              .status(this.iteamStateType)
57              .position({ x: '28%', y: 0 })
58
59              StepperItem() {
60                Text('Page Three')
61                  .fontSize(35)
62                  .fontColor('#000000')
63                  .width(200)
64                  .lineHeight(50)
65                  .margin({ top: 120 })
66              }
67              .position({ x: '28%', y: 0 })
68              .nextLabel('Finish')
69            }
70            .onFinish(() => {
71              this.showMessage = 'Finish'
72            })
73            .onSkip(() => {
74              this.showMessage = 'Skip'
75            })
76            .onChange((prevIndex: number, index: number) => {
77              this.currentIndex = index
78            })
79            .align(Alignment.Center)
80          }
81        }
82        .width('100%')
83        .height('100%')
84      }
85      .width('100%')
86      .constraintSize({ minHeight: 218, maxHeight: 402 })
87      .padding({ left: 12, right: 12, top: 22, bottom: 22 })
88      .margin({ bottom: 24 })
89
90      Scroll() {
91        Column() {
92          Text(this.showMessage)
93            .fontSize('20fp')
94            .fontColor('#000000')
95            .fontWeight(FontWeight.Medium)
96            .opacity(0.8)
97            .textAlign(TextAlign.Center)
98
99          Row() {
100            Text('PageTwo-ItemState')
101              .fontSize('16fp')
102              .opacity(0.5)
103              .fontColor('#182431')
104              .fontWeight(FontWeight.Medium)
105
106            Blank()
107
108            Text(this.iteamArrays[`${this.iteamStateType}`])
109              .fontSize('16fp')
110              .fontColor('#182431')
111              .fontWeight(FontWeight.Medium)
112              .width('50%')
113              .textAlign(TextAlign.End)
114              .bindMenu([
115                {
116                  value: 'Normal',
117                  action: () => {
118                    this.iteamStateType = ItemState.Normal
119                  }
120                },
121                {
122                  value: 'Disabled',
123                  action: () => {
124                    this.iteamStateType = ItemState.Disabled
125                  }
126                },
127                {
128                  value: 'Waiting',
129                  action: () => {
130                    this.iteamStateType = ItemState.Waiting
131
132                  }
133                },
134                {
135                  value: 'Skip',
136                  action: () => {
137                    this.iteamStateType = ItemState.Skip
138                  }
139                },
140              ])
141          }
142          .width('100%')
143          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
144          .borderRadius(24)
145          .backgroundColor('#FFFFFF')
146          .margin({ top: 8, bottom: 8 })
147        }
148      }
149    }
150    .width('100%')
151    .height('100%')
152    .backgroundColor('#F1F3F5')
153    .padding({ left: '3%', right: '3%', bottom: 10 })
154  }
155
156  pageTransition() {
157    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
158      .slide(SlideEffect.Bottom)
159      .opacity(0.0)
160
161    PageTransitionExit({ duration: 370, curve: Curve.Friction })
162      .slide(SlideEffect.Bottom)
163      .opacity(0.0)
164  }
165}