1/* 2 * Copyright (c) 2023-2023 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 CancelButton { 18 cancelLabel?: ResourceStr; 19 cancelWidth?: Length; 20 cancelHeight?: Length; 21 cancelClick?: (event?: ClickEvent) => void; 22 build() { 23 Button(this.cancelLabel) 24 .width(this.cancelWidth) 25 .height(this.cancelHeight) 26 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 27 .backgroundColor($r('sys.color.ohos_id_color_button_normal')) 28 .onClick(this.cancelClick); 29 } 30} 31 32@Component 33export struct ClickableImage { 34 imageSrc?: ResourceStr; 35 imageWidth?: Length; 36 imageHeight?: Length; 37 clickEvent?: (event?: ClickEvent) => void; 38 isHoverEnable: boolean = false; 39 isHover: boolean = false; 40 @State bckColor: Resource | undefined = undefined; 41 build() { 42 Image(this.imageSrc) 43 .width(this.imageWidth) 44 .height(this.imageHeight) 45 .backgroundColor(this.bckColor) 46 .borderRadius($r('sys.float.ohos_id_corner_radius_clicked')) 47 .onClick(this.clickEvent) 48 .onHover((isHover) => { 49 if (this.isHoverEnable && this.isHover != isHover) { 50 if (isHover) { 51 this.bckColor = $r('sys.color.ohos_id_color_hover') 52 } else { 53 this.bckColor = $r('sys.color.ohos_id_color_background'); 54 } 55 } 56 this.isHover = isHover; 57 }) 58 .onTouch((event) => { 59 if (event.type === TouchType.Down) { 60 this.isHover = false; 61 this.bckColor = $r('sys.color.ohos_fa_click_effect') 62 } else if (event.type === TouchType.Up) { 63 this.bckColor = $r('sys.color.ohos_id_color_background'); 64 } 65 }) 66 } 67} 68 69 70