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 16 17import { NavigationBar } from '../../../common/components/navigationBar' 18import { GetColor } from '../../../common/components/getColor' 19 20@Entry 21@Component 22struct ContainerComponentTemplate { 23 @State content: string = 'hello world' 24 @State backgroundColor: string = '#b6dfff' 25 @State value: number = 0 26 @State setValue: number = 10; 27 @State fontColor: string = '#182431'; 28 @State setProgressColor: Color = Color.Black; 29 30 build() { 31 Column() { 32 NavigationBar({ title: '容器组件模板' }) 33 34 Scroll() { 35 Column() { 36 Text('显示效果') 37 .fontSize(24) 38 .fontColor(this.fontColor) 39 Text('显示效果') 40 .fontSize(24) 41 .fontColor(this.fontColor) 42 Text('显示效果') 43 .fontSize(24) 44 .fontColor(this.fontColor) 45 Text('显示效果') 46 .fontSize(24) 47 .fontColor(this.fontColor) 48 Text('显示效果') 49 .fontSize(24) 50 .fontColor(this.fontColor) 51 Text('显示效果') 52 .fontSize(24) 53 .fontColor(this.fontColor) 54 Text('显示效果') 55 .fontSize(24) 56 .fontColor(this.fontColor) 57 Text('显示效果') 58 .fontSize(24) 59 .fontColor(this.fontColor) 60 Text('显示效果') 61 .fontSize(24) 62 .fontColor(this.fontColor) 63 Text('显示效果') 64 .fontSize(24) 65 .fontColor(this.fontColor) 66 Text('显示效果') 67 .fontSize(24) 68 .fontColor(this.fontColor) 69 Text('显示效果') 70 .fontSize(24) 71 .fontColor(this.fontColor) 72 Text('显示效果') 73 .fontSize(24) 74 .fontColor(this.fontColor) 75 Text('显示效果') 76 .fontSize(24) 77 .fontColor(this.fontColor) 78 Text('显示效果') 79 .fontSize(24) 80 .fontColor(this.fontColor) 81 Text('显示效果') 82 .fontSize(24) 83 .fontColor(this.fontColor) 84 Text('显示效果') 85 .fontSize(24) 86 .fontColor(this.fontColor) 87 Text('显示效果') 88 .fontSize(24) 89 .fontColor(this.fontColor) 90 Text('显示效果') 91 .fontSize(24) 92 .fontColor(this.fontColor) 93 Text('显示效果') 94 .fontSize(24) 95 .fontColor(this.fontColor) 96 Text('显示效果') 97 .fontSize(24) 98 .fontColor(this.fontColor) 99 } 100 .width('97%') 101 .margin({ right: '3%' }) 102 } 103 .constraintSize({ minHeight: 218, maxHeight: 402 }) 104 .padding({ left: 12, right: 12, top: 22, bottom: 22 }) 105 .width('100%') 106 .height('45%') 107 .backgroundColor(this.backgroundColor) 108 109 Scroll() { 110 Column() { 111 112 Row() { 113 Text('content选项') 114 .fontSize('16fp') 115 .fontColor('#182431') 116 .opacity(0.5) 117 .fontWeight(FontWeight.Medium) 118 Blank() 119 120 Text(`${this.content}`) 121 .bindMenu([ 122 { 123 value: 'hello world', 124 action: () => { 125 this.content = "hello world" 126 } 127 }, 128 { 129 value: 'just do it', 130 action: () => { 131 this.content = "just do it" 132 } 133 }, 134 { 135 value: 'to be No.1', 136 action: () => { 137 this.content = "to be No.1" 138 } 139 }, 140 ]) 141 .fontSize('16fp') 142 .fontColor('#182431') 143 .fontWeight(FontWeight.Medium) 144 .width('50%') 145 .textAlign(TextAlign.End) 146 147 148 } 149 .width('100%') 150 .padding('3%') 151 .borderRadius(24) 152 .backgroundColor('#FFFFFF') 153 154 Row() { 155 Text('true或者false样式') 156 .fontSize('16fp') 157 .fontColor('#182431') 158 .opacity(0.5) 159 .fontWeight(FontWeight.Medium) 160 Blank() 161 Toggle({ type: ToggleType.Switch, isOn: false }) 162 .selectedColor('#007DFF') 163 .switchPointColor(0xe5ffffff) 164 .onChange((isOn: boolean) => { 165 console.info('Component status:' + isOn) 166 }) 167 } 168 .width('100%') 169 .borderRadius(24) 170 .backgroundColor('#FFFFFF') 171 .margin({ top: 8 }) 172 173 Row() { 174 Text('数字选项样式') 175 .fontSize('16fp') 176 .fontColor('#182431') 177 .opacity(0.5) 178 .fontWeight(FontWeight.Medium) 179 Blank() 180 Counter() { 181 Text(this.value.toString()) 182 } 183 .onInc(() => { 184 this.value++ 185 }) 186 .onDec(() => { 187 this.value-- 188 }) 189 } 190 .width('100%') 191 .padding('3%') 192 .borderRadius(24) 193 .backgroundColor('#FFFFFF') 194 .margin({ top: 8 }) 195 196 Row() { 197 Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 198 .onClick((event: ClickEvent) => { 199 console.info('点击按钮1') 200 }) 201 Blank() 202 Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 203 .onClick((event: ClickEvent) => { 204 console.info('点击按钮2') 205 }) 206 } 207 .width('100%') 208 .padding('3%') 209 .borderRadius(24) 210 .backgroundColor('#FFFFFF') 211 .margin({ top: 8 }) 212 213 Column() { 214 Row() { 215 Text('progress value') 216 .fontSize('16fp') 217 .fontColor('#182431') 218 .opacity(0.5) 219 .fontWeight(FontWeight.Medium) 220 Blank() 221 Text(this.setValue.toFixed(0)) 222 .fontSize('16fp') 223 .fontColor('#182431') 224 .fontWeight(FontWeight.Medium) 225 } 226 .width('100%') 227 228 Slider({ 229 value: this.setValue, 230 min: 0, 231 max: 100, 232 step: 1, 233 style: SliderStyle.OutSet 234 }) 235 .blockColor('#FFFFFF') 236 .trackColor('#183431') 237 .selectedColor('#007DFF') 238 .borderRadius(12) 239 .borderColor('rgba(0,0,0,0.04)') 240 .showTips(true) 241 .showSteps(true) 242 .onChange((value: number, mode: SliderChangeMode) => { 243 this.setValue = value 244 console.info('value:' + value + 'mode:' + mode.toString()) 245 }) 246 } 247 .padding('3%') 248 .borderRadius(24) 249 .backgroundColor('#FFFFFF') 250 .margin({ top: 8 }) 251 252 Row() { 253 Text('backgroundColor') 254 .fontSize('16fp') 255 .fontColor('#182431') 256 .opacity(0.5) 257 .fontWeight(FontWeight.Medium) 258 Blank() 259 Column(){ 260 GetColor({ colorVal: $backgroundColor }) 261 } 262 .width(48) 263 } 264 .width('100%') 265 .padding('3%') 266 .borderRadius(24) 267 .backgroundColor('#FFFFFF') 268 .margin({ top: 8 }) 269 270 Row() { 271 Text('fontColor') 272 .fontSize('16fp') 273 .fontColor('#182431') 274 .opacity(0.5) 275 .fontWeight(FontWeight.Medium) 276 Blank() 277 Column() { 278 GetColor({ colorVal: $fontColor }) 279 } 280 .width(48) 281 } 282 .width('100%') 283 .padding('3%') 284 .borderRadius(24) 285 .backgroundColor('#FFFFFF') 286 .margin({ top: 8 }) 287 288 } 289 } 290 .height('45%') 291 .margin({ top: 24 }) 292 } 293 .height('100%') 294 .padding({ left: '3%', right: '3%', bottom: 10 }) 295 .backgroundColor('#F1F3F5') 296 } 297 298 pageTransition() { 299 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 300 .slide(SlideEffect.Bottom) 301 .opacity(0.0) 302 303 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 304 .slide(SlideEffect.Bottom) 305 .opacity(0.0) 306 } 307} 308