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 */ 15import ComponentConfig from './ComponentConfig'; 16 17/** 18 * Subheader layout. 19 * It's suggested to use it when subheader is needed. 20 */ 21@Component 22export struct SubHeader { 23 @State titleContent: any = ''; 24 25 build() { 26 Row() { 27 Text(this.titleContent) 28 .fontSize($r('app.float.font_14')) 29 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 30 .fontFamily('HarmonyHeiTi') 31 .fontWeight(FontWeight.Medium) 32 .width(ComponentConfig.WH_100_100) 33 } 34 .height($r("app.float.wh_value_48")) 35 .alignItems(VerticalAlign.Bottom) 36 .padding({ 37 bottom: $r('app.float.distance_9_5'), 38 top: $r('app.float.distance_11_5'), 39 left: $r('sys.float.ohos_id_card_margin_start'), 40 right: $r("sys.float.ohos_id_card_margin_end") 41 }) 42 } 43} 44 45/** 46 * Single title text with round corner. 47 */ 48@Component 49export struct TitleText { 50 private title: string | Resource; 51 private color: ResourceColor = $r('app.color.font_color_182431'); 52 private visible: Visibility = Visibility.Visible; 53 private clickEvent: (event?: ClickEvent) => void; 54 @State isTouched: boolean = false; 55 56 build() { 57 Row() { 58 Row() { 59 Text(this.title) 60 .fontSize($r("app.float.font_16")) 61 .fontColor(this.color) 62 .fontWeight(500) 63 .textAlign(TextAlign.Start) 64 .padding($r('app.float.wh_value_4')) 65 } 66 .height($r("app.float.wh_value_56")) 67 .width(ComponentConfig.WH_100_100) 68 .padding({ 69 left: $r('sys.float.ohos_id_card_margin_start'), 70 right: $r('sys.float.ohos_id_card_margin_end')}) 71 .borderRadius($r("app.float.radius_24")) 72 .linearGradient(this.isTouched ? { 73 angle: 90, 74 direction: GradientDirection.Right, 75 colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]] 76 } : { 77 angle: 90, 78 direction: GradientDirection.Right, 79 colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]] 80 }) 81 .onClick(event => this.clickEvent(event)) 82 .onTouch((event: TouchEvent) => { 83 if (event.type === TouchType.Down) { 84 this.isTouched = true; 85 } 86 if (event.type === TouchType.Up) { 87 this.isTouched = false; 88 } 89 }) 90 } 91 .width(ComponentConfig.WH_100_100) 92 .margin({ top: $r("app.float.distance_12") }) 93 .padding($r("app.float.distance_4")) 94 .borderRadius($r("app.float.radius_24")) 95 .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary")) 96 97 } 98} 99 100/** 101 * Text title with end text layout with harmony round style used in list item. 102 * Note that this does not contains the white padding when is touched. 103 * If you want to use it in single touch layout, wrap it with extra container component. 104 */ 105@Component 106export struct TextComponentWithEndText { 107 private title: string | Resource; 108 private clickEvent: (event?: ClickEvent) => void; 109 @State endText: string = ""; 110 @State isTouched: boolean = false; 111 112 build() { 113 Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { 114 Row() { 115 Text(this.title) 116 .fontSize($r('app.float.font_16')) 117 .fontColor($r('app.color.font_color_182431')) 118 .fontWeight(FontWeight.Medium) 119 .textAlign(TextAlign.Start); 120 } 121 122 Row() { 123 Text(this.endText) 124 .fontSize($r('app.float.font_14')) 125 .fontColor($r('app.color.font_color_182431')) 126 .margin({ right: $r('app.float.distance_4') }) 127 .textAlign(TextAlign.End); 128 Image('/res/image/ic_settings_arrow.svg') 129 .width($r('app.float.wh_value_12')) 130 .height($r('app.float.wh_value_24')) 131 .fillColor($r("sys.color.ohos_id_color_primary")) 132 .opacity($r("app.float.opacity_0_2")) 133 } 134 } 135 .padding({ 136 left: $r('sys.float.ohos_id_card_margin_start'), 137 right: $r('sys.float.ohos_id_card_margin_end') 138 }) 139 .height($r('app.float.wh_value_48')) 140 .width(ComponentConfig.WH_100_100) 141 .borderRadius($r('app.float.radius_24')) 142 .onClick(event => this.clickEvent(event)) 143 .linearGradient(this.isTouched ? { 144 angle: 90, 145 direction: GradientDirection.Right, 146 colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]] 147 } : { 148 angle: 90, 149 direction: GradientDirection.Right, 150 colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]] 151 }) 152 .onTouch((event: TouchEvent) => { 153 if (event.type === TouchType.Down) { 154 this.isTouched = true; 155 } 156 if (event.type === TouchType.Up) { 157 this.isTouched = false; 158 } 159 }); 160 } 161}
