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@Component 17export default struct IndexHeader { 18 @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md' 19 20 @Builder searchBar() { 21 Stack({alignContent: Alignment.End}) { 22 TextInput({ placeholder: $r('app.string.search') }) 23 .placeholderColor('#FF000000') 24 .placeholderFont({ size: 16, weight: 400 }) 25 .textAlign(TextAlign.Start) 26 .caretColor('#FF000000') 27 .width('100%') 28 .height(40) 29 .fontWeight(400) 30 .padding({ top: 9, bottom: 9 }) 31 .fontSize(16) 32 .backgroundColor(Color.White) 33 34 Image($r('app.media.ic_public_search')) 35 .width(16) 36 .height(16) 37 .margin({ right: 20 }) 38 }.height(56).width('100%') 39 } 40 41 @Builder titleBar() { 42 Text($r('app.string.tabBar1')) 43 .fontSize(24) 44 .fontWeight(500) 45 .fontColor('#18181A') 46 .textAlign(TextAlign.Start) 47 .height(56) 48 .width('100%') 49 } 50 51 build() { 52 GridRow() { 53 GridCol({ span: { xs: 12, lg: 8 } }) { 54 this.titleBar() 55 } 56 GridCol({ span: { xs: 12, lg: 4 } }) { 57 this.searchBar() 58 } 59 } 60 .width('100%') 61 .height(this.currentBreakpoint === 'lg' ? 56 : 112) 62 .padding({ left: 12, right: 12 }) 63 } 64}