• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import {
2  memo,
3  __memo_context_type,
4  __memo_id_type,
5  State,
6  StateDecoratedVariable,
7  MutableState,
8  stateOf,
9  observableProxy
10} from '@ohos.arkui.stateManagement' // should be insert by ui-plugins
11
12import {
13  Entry,
14  Text,
15  TextAttribute,
16  Column,
17  Component,
18  Button,
19  ButtonAttribute,
20  Scroll,
21  ClickEvent,
22  UserView,
23  animateTo,
24  Curve,
25  LaunchMode,
26  SideBarContainer,
27  SideBarContainerType,
28  Resource,
29  ButtonIconOptions,
30  $r,
31  SideBarPosition,
32  NavDestination,
33  NavPathStack,
34  NavDestinationContext,
35  Callback
36} from '@ohos.arkui.component'  // TextAttribute should be insert by ui-plugins
37
38import hilog from '@ohos.hilog'
39import { UIContext } from '@ohos.arkui.UIContext'
40import { DividerStyle } from 'arkui.component.sidebar'
41
42@Entry
43@Component
44export struct SideBarTest {
45  @State stateVar: string = 'state var';
46  message: string = 'var';
47  changeValue() {
48    this.stateVar+='~'
49  }
50
51  @State hideTitleBar: boolean = false;
52  @State hideNavBar: boolean = false;
53  @State showControlButton: boolean = true;
54  @State autoHide: boolean = true
55  @State sideBarWidth: Double|undefined = 150.0
56  @State type:SideBarContainerType = SideBarContainerType.Embed
57  @State posi:SideBarPosition = SideBarPosition.Start
58  @State showSideBar:boolean = false
59  @State minContentWidth:Double|undefined = 0
60  @State divider:DividerStyle = { strokeWidth: '3vp', startMargin: '16vp', endMargin: '28vp', color: '#18908900' } as DividerStyle
61
62  build() {
63    NavDestination() {
64      SideBarContainer(this.type) {
65        Column() {
66          Text('Index0')
67            .fontSize(25)
68        }.width('100%')
69        // .justifyContent(FlexAlign.SpaceEvenly)
70        .backgroundColor('#19000000')
71
72        Column() {
73          Button('showSideBar=false').onClick((e: ClickEvent) => {
74            this.showSideBar = false
75          })
76          Button('showSideBar=true').onClick((e: ClickEvent) => {
77            this.showSideBar = true
78          })
79          Button('showControlButton=false').onClick((e: ClickEvent) => {
80            this.showControlButton = false
81          })
82          Button('showControlButton=true').onClick((e: ClickEvent) => {
83            this.showControlButton = true
84          })
85          Button('autoHide=false').onClick((e: ClickEvent) => {
86            this.autoHide = false
87          })
88          Button('autoHide=true').onClick((e: ClickEvent) => {
89            this.autoHide = true
90          })
91          Button('sideBarWidth length 280').onClick((e: ClickEvent) => {
92            this.sideBarWidth = 280
93          })
94          Button('SideBarContainerType.Overlay').onClick((e: ClickEvent) => {
95            this.type = SideBarContainerType.Overlay
96          })
97          Button('SideBarContainerType.AUTO').onClick((e: ClickEvent) => {
98            this.type = SideBarContainerType.AUTO
99          })
100
101          Button('sideBarPosition.start').onClick((e: ClickEvent) => {
102            this.posi = SideBarPosition.Start
103          })
104          Button('sideBarPosition.end').onClick((e: ClickEvent) => {
105            this.posi = SideBarPosition.End
106          })
107          Button('minContentWidth 90').onClick((e: ClickEvent) => {
108            this.minContentWidth = 90
109            // .minContentWidth(100).minSideBarWidth(330)
110          })
111          Button('minContentWidth 550').onClick((e: ClickEvent) => {
112            this.minContentWidth = 550
113          })
114
115        }.height(600)
116
117      }
118      .controlButton({
119        icons: {
120          hidden: $r('app.media.background'),
121          shown: $r('app.media.foreground'),
122          switching: $r('app.media.startIcon'),
123        } as ButtonIconOptions,
124        left: 100,
125        top: 50,
126        width: 50,
127        height: 50
128      })
129      .showSideBar(this.showSideBar)
130      .showControlButton(this.showControlButton)
131      .autoHide(this.autoHide)
132      .sideBarPosition(this.posi)
133      .minSideBarWidth(150)
134      .maxSideBarWidth(300)
135      .minContentWidth(this.minContentWidth)
136      .onChange((value: boolean) => {
137        hilog.info(0x0000, '===status', JSON.stringify(value));
138      })
139      .divider({
140        strokeWidth: '3vp',
141        startMargin: '16vp',
142        endMargin: '28vp',
143        color: '#18908900'
144      } as DividerStyle)
145    }
146    .title('导航类组件测试002')
147  }
148}
149
150@Component
151struct Child {
152  @State stateVar: string = 'Child';
153  build() {
154    Text(this.stateVar).fontSize(50)
155  }
156}
157