• 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 ButtonSample {
21  @State showType: string = 'Capsule'
22  @State isStateEffect: boolean = true
23
24  build() {
25    Column() {
26      NavigationBar({ title: 'Button' })
27
28      Column() {
29        Column({ space: FlexAlign.SpaceAround }) {
30          if (this.showType == 'Circle') {
31            Button({ type: ButtonType.Circle, stateEffect: this.isStateEffect }) {
32              Image($r('app.media.ic_public_arrow_left')).width(60).height(60)
33            }.width(100).height(100).backgroundColor('#1989fa')
34            .onClick((event: ClickEvent) => {
35              this.showType = 'Capsule'
36            })
37
38            Button({ type: ButtonType.Circle, stateEffect: this.isStateEffect }) {
39              Image($r('app.media.ic_public_arrow_right')).width(60).height(60)
40            }.width(100).height(100).backgroundColor('#ee0a24')
41            .onClick((event: ClickEvent) => {
42              this.showType = 'Normal'
43            })
44          } else {
45            Button({ type: ButtonType[this.showType], stateEffect: this.isStateEffect }) {
46              Row() {
47                Text('OK')
48                  .fontColor(0xffffff)
49                  .fontSize('25fp')
50              }.height('100%')
51            }
52            .backgroundColor('#ee0a24')
53            .width('40%')
54            .height('20%')
55            .fontSize('25fp')
56
57            Button({ type: ButtonType[this.showType], stateEffect: this.isStateEffect }) {
58              Row() {
59                Image($r('app.media.ic_camera_parabar_story_loading')).width(20).height(20).margin({ left: 12 })
60                Text('loading')
61                  .fontColor(0xffffff)
62                  .margin({ left: 5, right: 12 })
63                  .fontSize('25fp')
64              }.height('100%')
65            }
66            .backgroundColor(0x317aff)
67            .width('40%')
68            .height('20%')
69            .onClick((event: ClickEvent) => {
70              AlertDialog.show({ message: 'The login is successful' })
71            })
72            .fontSize('25fp')
73
74            Button('Disable', { type: ButtonType[this.showType], stateEffect: this.isStateEffect })
75              .border({ color: '#ed6a0c', width: 5, radius: this.showType == 'Capsule' ? 100 : 0 })
76              .backgroundColor('rgba(0,0,0,0)')
77              .width('40%')
78              .height('20%')
79              .fontSize('25fp')
80              .onClick((event: ClickEvent) => {
81                AlertDialog.show({ message: 'The login is successful' })
82              })
83
84          }
85        }
86        .alignItems(HorizontalAlign.Center)
87        .width('100%')
88        .constraintSize({ minHeight: 218, maxHeight: 402 })
89        .padding({ left: 12, right: 12, top: 22, bottom: 22 })
90        .backgroundColor('#FFB6C1')
91
92        Column() {
93          Row({ space: FlexAlign.SpaceBetween }) {
94            Text('type')
95              .fontSize('16fp')
96              .fontColor('#182431')
97              .opacity(0.5)
98              .fontWeight(FontWeight.Medium)
99
100            Blank()
101
102            Column() {
103              Text(`${this.showType}`)
104                .width('50%')
105                .textAlign(TextAlign.End)
106                .fontSize('16fp')
107                .fontWeight(FontWeight.Medium)
108                .fontColor('#182431')
109                .bindMenu([
110                  {
111                    value: 'Normal',
112                    action: () => {
113                      this.showType = 'Normal'
114                    }
115                  },
116                  {
117                    value: 'Capsule',
118                    action: () => {
119                      this.showType = 'Capsule'
120                    }
121                  },
122                  {
123                    value: 'Circle',
124                    action: () => {
125                      this.showType = 'Circle'
126                    }
127                  }
128                ])
129            }
130          }
131          .width('100%')
132          .alignItems(VerticalAlign.Center)
133          .padding('3%')
134          .borderRadius(24)
135          .backgroundColor('#FFFFFF')
136          .margin({ top: 8 })
137
138          Row({ space: FlexAlign.SpaceBetween }) {
139            Text('stateEffect')
140              .fontSize('16fp')
141              .fontColor('#182431')
142              .opacity(0.5)
143              .fontWeight(FontWeight.Medium)
144
145            Blank()
146
147            Toggle({ type: ToggleType.Switch, isOn: this.isStateEffect })
148              .selectedColor('#007DFF ')
149              .switchPointColor(0xe5ffffff)
150              .onChange((isOn: boolean) => {
151                this.isStateEffect = !this.isStateEffect
152                console.log(`${this.isStateEffect}`)
153              })
154          }
155          .alignItems(VerticalAlign.Center)
156          .width('100%')
157          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
158          .borderRadius(24)
159          .backgroundColor('#FFFFFF')
160          .margin({ top: 8 })
161        }
162        .margin({ top: 24 })
163      }
164    }
165    .justifyContent(FlexAlign.Start)
166    .alignItems(HorizontalAlign.Center)
167    .padding({ left: '3%', right: '3%', bottom: 10 })
168    .height('100%')
169    .backgroundColor('#F1F3F5')
170  }
171
172  pageTransition() {
173    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
174      .slide(SlideEffect.Bottom)
175      .opacity(0.0)
176
177    PageTransitionExit({ duration: 370, curve: Curve.Friction })
178      .slide(SlideEffect.Bottom)
179      .opacity(0.0)
180  }
181}