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 ProgressSample { 22 @State setValue: number = 10; 23 @State setProgressColor: string = 'rgba(0,0,0,1)' 24 @State setProgressStyle: number = ProgressStyle.Linear; 25 @State progressStyleString: string = 'Linear'; 26 @State setSliderShowSteps: boolean = true; 27 @State setSliderShowTips: boolean = true; 28 @State setSliderStep: number = 1; 29 @State setSliderStyle: SliderStyle = SliderStyle.OutSet; 30 31 build() { 32 Column() { 33 NavigationBar({ title: 'Progress' }) 34 Column() { 35 Column() { 36 Progress({ value: 10, total: 100, style: this.setProgressStyle }) 37 .color(this.setProgressColor) 38 .width(180) 39 .value(this.setValue) 40 } 41 .justifyContent(FlexAlign.Center) 42 .alignItems(HorizontalAlign.Center) 43 .width('100%') 44 .height('100%') 45 } 46 .width('100%') 47 .constraintSize({ minHeight: 218, maxHeight: 402 }) 48 .padding({ left: 12, right: 12, top: 22, bottom: 22 }) 49 50 Scroll() { 51 Column() { 52 Row({ space: FlexAlign.SpaceBetween }) { 53 Text('setProgressColor') 54 .fontColor('#182431') 55 .fontSize('16fp') 56 .fontWeight(FontWeight.Medium) 57 .opacity(0.5) 58 59 Blank() 60 61 Column() { 62 GetColor({ colorVal: $setProgressColor }) 63 }.width(48) 64 } 65 .alignItems(VerticalAlign.Center) 66 .width('100%') 67 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 68 .borderRadius(24) 69 .backgroundColor('#FFFFFF') 70 .margin({ top: 8, bottom: 8 }) 71 72 Row({ space: FlexAlign.SpaceBetween }) { 73 Text('progress style') 74 .fontColor('#182431') 75 .fontSize('16fp') 76 .fontWeight(FontWeight.Medium) 77 .opacity(0.5) 78 79 Blank() 80 81 Column() { 82 Text(`${this.progressStyleString}`) 83 .fontColor('#182431') 84 .fontSize('16fp') 85 .fontWeight(FontWeight.Medium) 86 } 87 .bindMenu([ 88 { 89 value: 'Linear', 90 action: () => { 91 console.info('handle Menu1 select') 92 this.setProgressStyle = ProgressStyle.Linear 93 this.progressStyleString = 'Linear' 94 } 95 }, 96 { 97 value: 'Eclipse', 98 action: () => { 99 console.info('handle Menu2 select') 100 this.setProgressStyle = ProgressStyle.Eclipse 101 this.progressStyleString = 'Eclipse' 102 } 103 }, 104 { 105 value: 'Ring', 106 action: () => { 107 this.setProgressStyle = ProgressStyle.Ring 108 this.progressStyleString = 'Ring' 109 } 110 }, 111 { 112 value: 'ScaleRing', 113 action: () => { 114 this.setProgressStyle = ProgressStyle.ScaleRing 115 this.progressStyleString = 'ScaleRing' 116 } 117 }, 118 { 119 value: 'Capsule', 120 action: () => { 121 this.setProgressStyle = ProgressStyle.Capsule 122 this.progressStyleString = 'Capsule' 123 } 124 } 125 ]) 126 } 127 .alignItems(VerticalAlign.Center) 128 .width('100%') 129 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 130 .borderRadius(24) 131 .backgroundColor('#FFFFFF') 132 .margin({ top: 8, bottom: 8 }) 133 134 Column() { 135 Row() { 136 Text('progress value') 137 .fontColor('#182431') 138 .fontSize('16fp') 139 .fontWeight(FontWeight.Medium) 140 .opacity(0.5) 141 Text(this.setValue.toFixed(0)) 142 .fontColor('#182431') 143 .fontSize('16fp') 144 .fontWeight(FontWeight.Medium) 145 }.justifyContent(FlexAlign.SpaceBetween) 146 147 Slider({ 148 value: this.setValue, 149 min: 0, 150 max: 100, 151 step: this.setSliderStep, 152 style: this.setSliderStyle 153 }) 154 .width('100%') 155 .blockColor('#FFFFFFF') 156 .trackColor('#182431 ') 157 .selectedColor('#007DFF') 158 .borderColor('rgba(0,0,0,0.04)') 159 .showTips(this.setSliderShowTips) 160 .showSteps(this.setSliderShowSteps) 161 .onChange((value: number, mode: SliderChangeMode) => { 162 this.setValue = value 163 console.info('value:' + value + 'mode:' + mode.toString()) 164 }) 165 } 166 .alignItems(HorizontalAlign.Center) 167 .justifyContent(FlexAlign.Center) 168 .width('100%') 169 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 170 .borderRadius(24) 171 .backgroundColor('#FFFFFF') 172 .margin({ top: 8, bottom: 8 }) 173 }.width('100%') 174 }.margin({ top: 20 }) 175 .margin({ top: 24 }) 176 } 177 .height('100%') 178 .justifyContent(FlexAlign.Start) 179 .alignItems(HorizontalAlign.Center) 180 .backgroundColor('#F1F3F5') 181 .padding({ left: '3%', right: '3%', bottom: 10 }) 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}