• 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 SliderSample {
22  @State setValue: number = 10;
23  @State blockColor: string = 'rgba(225,225,225,1)';
24  @State trackColor: string = 'rgba(88,87,86,0.8)';
25  @State selectColor: string = 'rgba(0,125,225,1)';
26  @State direction: Axis = Axis.Horizontal;
27  @State directionStyle: string = 'Horizontal';
28  @State setSliderShowSteps: boolean = true;
29  @State setSliderShowTips: boolean = true;
30  @State setSliderStep: number = 1;
31  @State setSliderStyle: SliderStyle = SliderStyle.OutSet;
32  @State sliderstyle: string = 'Outset'
33
34  build() {
35    Column() {
36      NavigationBar({ title: 'Slider' })
37
38      Column() {
39        Scroll() {
40          Column() {
41            Text('slider')
42              .fontSize('24fp')
43              .fontWeight(FontWeight.Medium)
44              .margin({ right: '10%' })
45            Row() {
46              Slider({
47                value: this.setValue,
48                min: 0,
49                max: 100,
50                step: this.setSliderStep,
51                style: this.setSliderStyle,
52                direction: this.direction
53              })
54                .width('90%')
55                .blockColor(this.blockColor)
56                .trackColor(this.trackColor)
57                .selectedColor(this.selectColor)
58                .showTips(this.setSliderShowTips)
59                .showSteps(this.setSliderShowSteps)
60                .onChange((value: number, mode: SliderChangeMode) => {
61                  this.setValue = value
62                  console.info('value:' + value + 'mode:' + mode.toString())
63                })
64              Text(this.setValue.toFixed(0)).fontSize('16fp')
65            }
66            .width('100%')
67          }
68          .alignItems(HorizontalAlign.Center)
69          .justifyContent(FlexAlign.Center)
70          .width('100%')
71          .height('100%')
72        }
73      }
74      .constraintSize({ minHeight: 218, maxHeight: 402 })
75      .width('100%')
76      .padding(18)
77      .backgroundColor('#FFFFFF')
78
79      Scroll() {
80        Column() {
81          Row() {
82            Text('blockColor')
83              .fontWeight(FontWeight.Medium)
84              .fontColor('#182431')
85              .opacity(0.5)
86              .fontSize('16fp')
87            Column() {
88              GetColor({ colorVal: $blockColor })
89            }.width(48)
90          }
91          .justifyContent(FlexAlign.SpaceBetween)
92          .alignItems(VerticalAlign.Center)
93          .width('100%')
94          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
95          .borderRadius(24)
96          .backgroundColor('#FFFFFF')
97          .margin({ top: 8 })
98
99          Row() {
100            Text('trackColor')
101              .fontWeight(FontWeight.Medium)
102              .fontColor('#182431')
103              .opacity(0.5)
104              .fontSize('16fp')
105            Column() {
106              GetColor({ colorVal: $trackColor })
107            }.width(48)
108          }
109          .justifyContent(FlexAlign.SpaceBetween)
110          .alignItems(VerticalAlign.Center)
111          .width('100%')
112          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
113          .borderRadius(24)
114          .backgroundColor('#FFFFFF')
115          .margin({ top: 8 })
116
117          Row() {
118            Text('selectColor')
119              .fontWeight(FontWeight.Medium)
120              .fontColor('#182431')
121              .opacity(0.5)
122              .fontSize('16fp')
123            Column() {
124              GetColor({ colorVal: $selectColor })
125            }.width(48)
126          }
127          .justifyContent(FlexAlign.SpaceBetween)
128          .alignItems(VerticalAlign.Center)
129          .width('100%')
130          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
131          .borderRadius(24)
132          .backgroundColor('#FFFFFF')
133          .margin({ top: 8 })
134
135          Row() {
136            Text('slider step')
137              .fontWeight(FontWeight.Medium)
138              .fontColor('#182431')
139              .opacity(0.5)
140              .fontSize('16fp')
141            Column() {
142              Text(`${this.setSliderStep}`)
143                .fontWeight(FontWeight.Regular)
144                .fontColor('#000000')
145                .fontSize('10fp')
146                .width('50%')
147                .textAlign(TextAlign.End)
148            }
149            .bindMenu([
150              {
151                value: '1',
152                action: () => {
153                  console.info('handle Menu1 select')
154                  this.setSliderStep = 1
155                }
156              },
157              {
158                value: '10',
159                action: () => {
160                  console.info('handle Menu2 select')
161                  this.setSliderStep = 10
162                }
163              },
164            ])
165          }
166          .justifyContent(FlexAlign.SpaceBetween)
167          .alignItems(VerticalAlign.Center)
168          .width('100%')
169          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
170          .borderRadius(24)
171          .backgroundColor('#FFFFFF')
172          .margin({ top: 8 })
173
174          Row() {
175            Text('slider showSteps')
176              .fontWeight(FontWeight.Medium)
177              .fontColor('#182431')
178              .opacity(0.5)
179              .fontSize('16fp')
180            Toggle({ type: ToggleType.Switch, isOn: this.setSliderShowSteps })
181              .width(35)
182              .height(20)
183              .selectedColor('#007DFF')
184              .switchPointColor(0xe5ffffff)
185              .onChange((isOn: boolean) => {
186                console.info('Component status:' + isOn)
187                this.setSliderShowSteps = !this.setSliderShowSteps
188              })
189          }
190          .justifyContent(FlexAlign.SpaceBetween)
191          .alignItems(VerticalAlign.Center)
192          .width('100%')
193          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
194          .borderRadius(24)
195          .backgroundColor('#FFFFFF')
196          .margin({ top: 8 })
197
198          Row() {
199            Text('slider showTips')
200              .fontWeight(FontWeight.Medium)
201              .fontColor('#182431')
202              .opacity(0.5)
203              .fontSize('16fp')
204            Toggle({ type: ToggleType.Switch, isOn: this.setSliderShowTips })
205              .width(35)
206              .height(20)
207              .selectedColor('#007DFF')
208              .switchPointColor(0xe5ffffff)
209              .onChange((isOn: boolean) => {
210                console.info('Component status:' + isOn)
211                this.setSliderShowTips = !this.setSliderShowTips
212              })
213          }
214          .justifyContent(FlexAlign.SpaceBetween)
215          .alignItems(VerticalAlign.Center)
216          .width('100%')
217          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
218          .borderRadius(24)
219          .backgroundColor('#FFFFFF')
220          .margin({ top: 8 })
221
222          Row() {
223            Text('slider style')
224              .fontWeight(FontWeight.Medium)
225              .fontColor('#182431')
226              .opacity(0.5)
227              .fontSize('16fp')
228            Column() {
229              Text(`${this.sliderstyle}`)
230                .fontWeight(FontWeight.Regular)
231                .fontColor('#000000')
232                .fontSize('10fp')
233                .width('50%')
234                .textAlign(TextAlign.End)
235            }
236            .bindMenu([
237              {
238                value: 'InSet',
239                action: () => {
240                  console.info('handle Menu1 select')
241                  this.setSliderStyle = SliderStyle.InSet
242                  this.sliderstyle = 'Inset'
243
244                }
245              },
246              {
247                value: 'OutSet',
248                action: () => {
249                  console.info('handle Menu2 select')
250                  this.setSliderStyle = SliderStyle.OutSet
251                  this.sliderstyle = 'OutSet'
252                }
253              },
254            ])
255          }
256          .justifyContent(FlexAlign.SpaceBetween)
257          .alignItems(VerticalAlign.Center)
258          .width('100%')
259          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
260          .borderRadius(24)
261          .backgroundColor('#FFFFFF')
262          .margin({ top: 8 })
263
264          Row() {
265            Text('direction')
266              .fontWeight(FontWeight.Medium)
267              .fontColor('#182431')
268              .opacity(0.5)
269              .fontSize('16fp')
270            Column() {
271              Text(`${this.directionStyle}`)
272                .fontWeight(FontWeight.Regular)
273                .fontColor('#000000')
274                .fontSize('10fp')
275            }
276            .bindMenu([
277              {
278                value: 'Horizontal',
279                action: () => {
280                  console.info('handle Menu1 select')
281                  this.direction = Axis.Horizontal
282                  this.directionStyle = 'Horizontal'
283                }
284              },
285              {
286                value: 'Vertical',
287                action: () => {
288                  console.info('handle Menu2 select')
289                  this.direction = Axis.Vertical
290                  this.directionStyle = 'Vertical'
291                }
292              },
293            ])
294          }
295          .justifyContent(FlexAlign.SpaceBetween)
296          .alignItems(VerticalAlign.Center)
297          .width('100%')
298          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
299          .borderRadius(24)
300          .backgroundColor('#FFFFFF')
301          .margin({ top: 8, bottom: 16 })
302        }
303      }
304      .width('100%')
305      .height('35%')
306      .margin({ top: 24 })
307    }
308    .height('100%')
309    .backgroundColor('#F1F3F5')
310    .padding({ left: '3%', right: '3%', bottom: 10 })
311  }
312
313  pageTransition() {
314    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
315      .slide(SlideEffect.Bottom)
316      .opacity(0.0)
317
318    PageTransitionExit({ duration: 370, curve: Curve.Friction })
319      .slide(SlideEffect.Bottom)
320      .opacity(0.0)
321  }
322}