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' 17import { GetColor } from '../../../common/components/getColor' 18 19@Entry 20@Component 21struct ToggleSample { 22 @State toggleType: ToggleType = ToggleType.Switch; 23 @State toggleString: string = 'Switch'; 24 @State isOn: boolean = false; 25 @State selectedColor: Color = Color.Orange; 26 @State switchPointColor: Color = Color.Yellow; 27 @State setProgressColor: Color = Color.Black; 28 29 build() { 30 Column() { 31 NavigationBar({ title: 'Toggle' }) 32 Scroll() { 33 Column() { 34 if (this.toggleType === ToggleType.Switch) { 35 Toggle({ type: this.toggleType, isOn: this.isOn }) 36 .size({ width: 90, height: 35 }) 37 .selectedColor(this.selectedColor) 38 .switchPointColor(this.switchPointColor) 39 .onChange((isOn: boolean) => { 40 console.info('Component status:' + isOn) 41 }) 42 } else if (this.toggleType === ToggleType.Checkbox) { 43 Toggle({ type: this.toggleType, isOn: this.isOn }) 44 .selectedColor(this.selectedColor) 45 .size({ width: 50, height: 45 }) 46 .onChange((isOn: boolean) => { 47 console.info('Component status:' + isOn) 48 }) 49 } else { 50 Toggle({ type: this.toggleType, isOn: this.isOn }) { 51 Text('status button').padding({ left: 12, right: 12 }).size({ width: 80, height: 35 }) 52 } 53 .width(100) 54 .height(35) 55 .selectedColor('#007DFF') 56 .onChange((isOn: boolean) => { 57 console.info('Component status:' + isOn) 58 }) 59 } 60 } 61 .alignItems(HorizontalAlign.Center) 62 .justifyContent(FlexAlign.Center) 63 .width('100%') 64 } 65 .constraintSize({ minHeight: 218, maxHeight: 402 }) 66 .padding({ left: 12, right: 12, top: 22, bottom: 22 }) 67 68 Scroll() { 69 Column() { 70 Row() { 71 Text('toggleType') 72 .fontSize('16fp') 73 .fontColor('#182431') 74 .opacity(0.5) 75 .fontWeight(FontWeight.Medium) 76 Column() { 77 Text(`${this.toggleString}`) 78 .bindMenu([ 79 { 80 value: 'Switch', 81 action: () => { 82 this.toggleType = ToggleType.Switch 83 this.toggleString = 'Switch' 84 } 85 }, 86 { 87 value: 'Checkbox', 88 action: () => { 89 this.toggleType = ToggleType.Checkbox 90 this.toggleString = 'Checkbox' 91 } 92 }, 93 { 94 value: 'Button', 95 action: () => { 96 this.toggleType = ToggleType.Button 97 this.toggleString = 'Button' 98 } 99 }, 100 ]) 101 .fontSize('16fp') 102 .fontWeight(FontWeight.Medium) 103 .fontColor('#182431') 104 .width('50%') 105 .textAlign(TextAlign.End) 106 } 107 108 } 109 .justifyContent(FlexAlign.SpaceBetween) 110 .alignItems(VerticalAlign.Center) 111 .padding('3%') 112 .width('100%') 113 .borderRadius(24) 114 .backgroundColor('#FFFFFF') 115 116 Row() { 117 Text('isOn') 118 .fontSize('16fp') 119 .fontColor('#182431') 120 .opacity(0.5) 121 .fontWeight(FontWeight.Medium) 122 Toggle({ type: ToggleType.Switch, isOn: this.isOn }) 123 .selectedColor('#007DFF') 124 .switchPointColor(0xe5ffffff) 125 .onChange((isOn: boolean) => { 126 console.info('Component status:' + isOn) 127 this.isOn = !this.isOn 128 }) 129 } 130 .justifyContent(FlexAlign.SpaceBetween) 131 .alignItems(VerticalAlign.Center) 132 .padding('3%') 133 .borderRadius(24) 134 .width('100%') 135 .backgroundColor('#FFFFFF') 136 .margin({ top: 8 }) 137 138 Row() { 139 Text('selectedColor') 140 .fontSize('16fp') 141 .fontColor('#182431') 142 .opacity(0.5) 143 .fontWeight(FontWeight.Medium) 144 Column() { 145 GetColor({ colorVal: $selectedColor }) 146 }.width(48) 147 } 148 .justifyContent(FlexAlign.SpaceBetween) 149 .alignItems(VerticalAlign.Center) 150 .padding('3%') 151 .borderRadius(24) 152 .width('100%') 153 .backgroundColor('#FFFFFF') 154 .margin({ top: 8 }) 155 156 Row() { 157 Text('switchPointColor') 158 .fontSize('16fp') 159 .fontColor('#182431') 160 .opacity(0.5) 161 .fontWeight(FontWeight.Medium) 162 Column() { 163 GetColor({ colorVal: $switchPointColor }) 164 }.width(48) 165 } 166 .justifyContent(FlexAlign.SpaceBetween) 167 .alignItems(VerticalAlign.Center) 168 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 169 .borderRadius(24) 170 .width('100%') 171 .backgroundColor('#FFFFFF') 172 .margin({ top: 8 }) 173 } 174 .width('100%') 175 } 176 .margin({ top: 24 }) 177 } 178 .alignItems(HorizontalAlign.Center) 179 .padding({ left: '3%', right: '3%', bottom: 10 }) 180 .backgroundColor('#F1F3F5 ') 181 .height('100%') 182 } 183 184 pageTransition() { 185 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 186 .slide(SlideEffect.Bottom) 187 .opacity(0.0) 188 189 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 190 .slide(SlideEffect.Bottom) 191 .opacity(0.0) 192 } 193}