• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright (c) 2022-2024 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 * Sub-Page Entry Component
19 */
20@Component
21export struct SubEntryComponent {
22  private targetPage: string = '';
23  private title: string | Resource = '';
24
25  onItemClicked?: (targetRouter: string) => void;
26
27  @Styles normalStyle() {
28    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
29  };
30
31  @Styles pressedStyle() {
32    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
33  };
34
35  build() {
36    Column() {
37      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
38        Row() {
39          Text(this.title)
40            .fontSize($r('app.float.font_16'))
41            .lineHeight($r('app.float.wh_value_22'))
42            .fontColor($r('sys.color.ohos_id_color_text_primary'))
43            .fontWeight(FontWeight.Medium)
44            .margin({ left: $r('app.float.wh_value_8') })
45            .textAlign(TextAlign.Start);
46        }
47
48        Image($r('app.media.ic_settings_arrow'))
49          .width($r('app.float.wh_value_12'))
50          .height($r('app.float.wh_value_24'))
51          .fillColor($r('sys.color.ohos_id_color_primary'))
52          .opacity($r('app.float.opacity_0_2'))
53          .margin({ right: $r('app.float.wh_value_8') });
54      }
55      .borderRadius($r('app.float.radius_20'))
56      .height(ComponentConfig.WH_100_100)
57      .width(ComponentConfig.WH_100_100)
58      .stateStyles({
59        normal: this.normalStyle,
60        pressed: this.pressedStyle
61      })
62    }
63    .onClick(event => {
64      this.onItemClicked?.(this.targetPage);
65    })
66    .height($r('app.float.wh_value_48'))
67    .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'));
68  }
69}
70
71
72/**
73 * Sub-Page Entry Component with EndText
74 */
75@Component
76export struct SubEntryComponentWithEndText {
77  @Prop endText: string = '';
78  private targetPage: string = '';
79  private title: string | Resource = '';
80
81  @Styles normalStyle() {
82    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
83  };
84
85  @Styles pressedStyle() {
86    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
87  };
88
89  build() {
90    Navigator({ target: this.targetPage }) {
91      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
92        Row() {
93          Text(this.title)
94            .fontSize($r('app.float.font_16'))
95            .lineHeight($r('app.float.wh_value_22'))
96            .fontWeight(FontWeight.Medium)
97            .fontColor($r('sys.color.ohos_id_color_text_primary'))
98            .margin({ left: $r('app.float.distance_8') })
99            .textAlign(TextAlign.Start);
100        }
101
102        Row() {
103          Text(this.endText)
104            .fontSize($r('app.float.font_14'))
105            .lineHeight($r('app.float.wh_value_19'))
106            .fontWeight(FontWeight.Regular)
107            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
108            .margin({ right: $r('app.float.distance_4') })
109            .textAlign(TextAlign.End);
110          Image('/res/image/ic_settings_arrow.svg')
111            .width($r('app.float.wh_value_12'))
112            .height($r('app.float.wh_value_24'))
113            .margin({ right: $r('app.float.distance_8') })
114            .fillColor($r('sys.color.ohos_id_color_primary'))
115            .opacity($r('app.float.opacity_0_2'))
116        }
117      }
118      .height(ComponentConfig.WH_100_100)
119      .width(ComponentConfig.WH_100_100)
120      .borderRadius($r('app.float.radius_20'))
121      .stateStyles({
122        normal: this.normalStyle,
123        pressed: this.pressedStyle
124      })
125    }
126    .padding($r('app.float.distance_4'))
127    .height($r('app.float.wh_value_56'))
128    .borderRadius($r('app.float.radius_24'))
129    .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'));
130  }
131}
132