• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 */
15import { NavigationBar } from '../../../common/components/navigationBar'
16import { SliderComponent } from '../../../common/components/sliderComponent'
17
18@Entry
19@Component
20struct BoxModelSample {
21  @State padding: number = 10
22  @State margin: number = 20
23  @State border: number = 2
24  @State contentWidth: number = 120
25  @State contentHeight: number = 80
26
27  build() {
28    Column() {
29      NavigationBar({ title: '盒模型' })
30      Column() {
31        Text('width:' + `${this.contentWidth.toFixed(0)}` + '     ' + 'height:' + `${this.contentHeight.toFixed(0)}`)
32          .width('100%')
33          .height('20%')
34          .lineHeight(20)
35          .fontSize('16fp')
36          .fontColor('#182431')
37          .fontWeight(FontWeight.Medium)
38          .textAlign(TextAlign.Center)
39        Scroll() {
40          Column() {
41            if (this.margin >= 10) {
42              Text('margin:' + this.margin.toFixed(0))
43                .fontSize(12)
44                .offset({ x: 0, y: 0 })
45                .zIndex(1)
46            }
47
48            Column() {
49              if (this.padding >= 10) {
50                Text('padding:' + this.padding.toFixed(0))
51                  .fontSize(12)
52                  .offset({ x: -(this.padding), y: -(this.padding) })
53                  .zIndex(1)
54              }
55
56              Column() {
57                Text('content')
58                  .width('100%')
59                  .height('100%')
60                  .fontSize(12)
61                  .textAlign(TextAlign.Center)
62              }.backgroundColor('#66ccff')
63            }
64            .backgroundColor('#6EDF57')
65            .padding(this.padding)
66            .margin(this.margin)
67            .border({ width: this.border, color: '#455108' })
68            .width(this.contentWidth)
69            .height(this.contentHeight)
70          }.backgroundColor('#E1EEA4')
71        }.width('100%').height('80%')
72
73      }
74      .width('100%')
75      .alignItems(HorizontalAlign.Start)
76      .height('40%')
77      .padding({ left: 12, right: 12, top: 22, bottom: 22 })
78      .backgroundColor(('#FFFFFF'))
79
80      Scroll() {
81        Column() {
82          // 控件写法
83          SliderComponent({ name: 'Width', value: $contentWidth, min: 0, max: 260 })
84          SliderComponent({ name: 'Height', value: $contentHeight, min: 0, max: 800, })
85          SliderComponent({ name: 'padding', value: $padding, min: 0, max: 50, })
86          SliderComponent({ name: 'margin', value: $margin, min: 0, max: 50 })
87          SliderComponent({ name: 'border', value: $margin, min: 0, max: 50 })
88        }
89        .width('100%')
90        .margin({ top: 10 })
91      }.width('100%').height('50%')
92    }
93    .alignItems(HorizontalAlign.Center)
94    .justifyContent(FlexAlign.Start)
95    .width('100%')
96    .height('100%')
97    .backgroundColor('#F1F3F5')
98    .padding({ left: '3%', right: '3%', bottom: 10 })
99  }
100
101  pageTransition() {
102    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
103      .slide(SlideEffect.Bottom)
104      .opacity(0.0)
105
106    PageTransitionExit({ duration: 370, curve: Curve.Friction })
107      .slide(SlideEffect.Bottom)
108      .opacity(0.0)
109  }
110}