• 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 */
15import router from '@ohos.router'
16import TitleBar from '../common/TitleBar'
17import { Show } from '@ohos/enter-animation'
18
19@Entry
20@Component
21struct Index {
22
23  @Builder
24  ButtonItem(text: Resource | string, pageUrl: string) {
25    Button({ type: ButtonType.Capsule }) {
26      Text(text)
27        .fontSize(20)
28        .fontWeight(FontWeight.Bold)
29        .fontColor(Color.Black)
30        .width('90%')
31        .textAlign(TextAlign.Center)
32    }
33    .width('80%')
34    .layoutWeight(1)
35    .margin('5%')
36    .backgroundColor('#F0FFF0')
37    .onClick(() => {
38      router.push({ url: pageUrl })
39    })
40  }
41
42  build() {
43    Column() {
44      Show({ select: 4 }) //  选择第四种转场特效
45      TitleBar()
46      this.ButtonItem($r('app.string.enter_animation'), 'pages/Home')
47      this.ButtonItem($r('app.string.page_transition_bottom'), 'pages/page/BottomTransition')
48      this.ButtonItem($r('app.string.page_transition_custom_first'), 'pages/page/CustomTransition')
49      this.ButtonItem($r('app.string.page_transition_custom_second'), 'pages/page/CustomTransition2')
50      this.ButtonItem($r('app.string.component_transition'), 'pages/ComponentTransition')
51      this.ButtonItem($r('app.string.share_transition'), 'pages/share/ShareItem')
52    }
53    .width('100%')
54    .height('100%')
55    .padding({ bottom: 20 })
56  }
57}