• 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 */
15
16import { NavigationBar } from '../../../common/components/navigationBar'
17import { GetColor } from '../../../common/components/getColor'
18
19@Entry
20@Component
21struct CheckboxExample {
22  @State setBoxColor: Color = Color.Green;
23  @State setBackgroundColor: string = '#F1F3F5';
24
25  build() {
26    Column() {
27      NavigationBar({ title: 'CheckboxGroup' })
28
29      Scroll() {
30        Column() {
31          Column() {
32            CheckboxGroup({ group: 'checkboxGroup' })
33              .selectedColor(0xed6f21)
34              .onChange((itemName: CheckboxGroupResult) => {
35                console.info('TextPicker::dialogResult is' + JSON.stringify(itemName))
36              })
37            Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
38              .select(false)
39              .selectedColor(this.setBoxColor)
40              .onChange((value: boolean) => {
41                console.info('Checkbox1 change is' + value)
42              })
43            Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
44              .select(false)
45              .selectedColor(this.setBoxColor)
46              .onChange((value: boolean) => {
47                console.info('Checkbox2 change is' + value)
48              })
49            Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
50              .select(false)
51              .selectedColor(this.setBoxColor)
52              .onChange((value: boolean) => {
53                console.info('Checkbox3 change is' + value)
54              })
55          }
56          .backgroundColor(this.setBackgroundColor)
57
58          Row({ space: FlexAlign.SpaceBetween }) {
59            Text('boxColor')
60              .fontWeight(FontWeight.Medium)
61              .fontColor('#182431')
62              .opacity(0.5)
63              .fontSize('16fp')
64
65            Blank()
66
67            Column() {
68              GetColor({ colorVal: $setBoxColor })
69            }.width(48)
70          }
71          .alignItems(VerticalAlign.Center)
72          .width('100%')
73          .height(35)
74          .padding({ left: 12, right: 12 })
75          .borderRadius(14)
76          .backgroundColor('#FFF')
77          .margin({ top: 8, bottom: 8, left: 12, right: 12 })
78
79          Row({ space: FlexAlign.SpaceBetween }) {
80            Text('backgroundColor')
81              .fontWeight(FontWeight.Medium)
82              .fontColor('#182431')
83              .opacity(0.5)
84              .fontSize('16fp')
85
86            Blank()
87
88            Column() {
89              GetColor({ colorVal: $setBackgroundColor })
90            }.width(48)
91          }
92          .alignItems(VerticalAlign.Center)
93          .width('100%')
94          .height(35)
95          .padding({ left: 12, right: 12 })
96          .borderRadius(14)
97          .backgroundColor('#FFF')
98          .margin({ top: 8, bottom: 8, left: 12, right: 12 })
99        }
100      }
101      .width('100%')
102      .height('100%')
103      .padding({ left: '2%', right: '2%' })
104    }
105    .alignItems(HorizontalAlign.Center)
106    .justifyContent(FlexAlign.Center)
107    .backgroundColor('#F1F3F5')
108  }
109}