1/** 2 * Copyright (c) 2021-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 struct MainItem { 18 private title: string | Resource 19 private tag: string | Resource 20 private icon: string | Resource 21 private label: string = '' 22 @LocalStorageLink('selectedLabel') selectedLabel: string = '' 23 @LocalStorageProp('isSplitMode') isSplitMode: boolean = false 24 @State isTouched: boolean = false 25 26 isActivated(): boolean { 27 if (this.isSplitMode) { 28 return this.label !== '' && this.label === this.selectedLabel 29 } 30 return this.isTouched 31 } 32 33 build() { 34 Row() { 35 Image(this.icon) 36 .width(24) 37 .height(24) 38 39 Text(this.title) 40 .fontSize(16) 41 .lineHeight(22) 42 .fontWeight(FontWeight.Medium) 43 .fontFamily('HarmonyHeiTi') 44 .fontColor($r('sys.color.ohos_id_color_text_primary')) 45 .align(Alignment.Start) 46 .margin({ left: 16 }) 47 48 Blank() 49 50 Text(this.tag) 51 .fontSize(14) 52 .lineHeight(19) 53 .fontWeight(FontWeight.Regular) 54 .fontFamily('HarmonyHeiTi') 55 .fontColor($r('sys.color.ohos_id_color_text_primary')) 56 57 Image($r('app.media.ic_settings_arrow')) 58 .width(12) 59 .height(24) 60 .margin({left: 4}) 61 .fillColor($r('sys.color.ohos_id_color_fourth')) 62 } 63 .alignItems(VerticalAlign.Center) 64 .width('100%') 65 .height(56) 66 .borderRadius(20) 67 .padding({left: 8, right: 8}) 68 .backgroundColor(this.isActivated() ? $r('app.color.itemActivated') : $r('app.color.itemInactivated')) 69 .onTouch((event: TouchEvent) => { 70 if (event.type === TouchType.Down) { 71 this.isTouched = true 72 } else if (event.type === TouchType.Up) { 73 this.isTouched = false 74 } 75 }) 76 } 77}