1# SideBarContainer 2 3The **\<SideBarContainer>** component contains a sidebar and content area as its child components. The sidebar is the first child component and can be shown or hidden as needed. The content area is the second child component. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Supported 13 14 15## APIs 16 17SideBarContainer( type?: SideBarContainerType ) 18 19**Parameters** 20 21| Name| Type| Mandatory| Description| 22| -------- | -------- | -------- | -------- | 23| type | SideBarContainerType | No| Display type of the sidebar.<br>Default value: **SideBarContainerType.Embed**| 24 25## SideBarContainerType enums 26 27| Name| Description| 28| -------- | -------- | 29| Embed | The sidebar is embedded in the component and displayed side by side with the content area.| 30| Overlay | The sidebar is displayed overlaid on the content area.| 31 32## Attributes 33 34| Name| Type| Description| 35| -------- | -------- | -------- | 36| showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true**| 37| controlButton | ButtonStyle | Attributes of the sidebar control button.| 38| showControlButton | boolean | Whether to display the sidebar control button.<br>Default value: **true**| 39| sideBarWidth | number \| Length<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**, in vp| 40| minSideBarWidth | number \| Length<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp| 41| maxSideBarWidth | number \| Length<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp| 42| autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**| 43| sideBarPosition<sup>9+</sup> | SideBarPosition | Position of the sidebar.<br>Default value: **SideBarPosition.Start**| 44 45## ButtonStyle 46 47| Name| Type| Mandatory| Description| 48| -------- | -------- | -------- | -------- | 49| left | number | No| Spacing between the sidebar control button and the left of the container.<br>Default value: **16**, in vp| 50| top | number | No| Spacing between the sidebar control button and the top of the container.<br>Default value: **48**, in vp| 51| width | number | No| Width of the sidebar control button.<br>Default value: **32**, in vp| 52| height | number | No| Height of the sidebar control button.<br>Default value: **32**, in vp| 53| icons | {<br>shown: string \| PixelMap \| [Resource](ts-types.md) ,<br>hidden: string \| PixelMap \| [Resource](ts-types.md) ,<br>switching?: string \| PixelMap \| [Resource](ts-types.md) <br>} | No| Icons of the sidebar control button.<br> </p> - **shown**: icon of the control button when the sidebar is shown.<br>- **hidden**: icon of the control button when the sidebar is hidden.<br>- **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.| 54 55## SideBarPosition<sup>9+</sup> 56 57| Name| Description| 58| -------- | -------- | 59| Start | The sidebar is on the left side of the container.| 60| End | The sidebar is on the right side of the container.| 61 62## Events 63 64| Name| Description| 65| -------- | -------- | 66| onChange(callback: (value: boolean) => void) | Triggered when the status of the sidebar switches between shown and hidden. <p>The value **true** means that the sidebar is shown, and **false** means the opposite.| 67 68 69## Example 70 71```ts 72// xxx.ets 73@Entry 74@Component 75struct SideBarContainerExample { 76 normalIcon : Resource = $r("app.media.icon") 77 selectedIcon: Resource = $r("app.media.icon") 78 @State arr: number[] = [1, 2, 3] 79 @State current: number = 1 80 81 build() { 82 SideBarContainer(SideBarContainerType.Embed) 83 { 84 Column() { 85 ForEach(this.arr, (item, index) => { 86 Column({ space: 5 }) { 87 Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64) 88 Text("Index0" + item) 89 .fontSize(25) 90 .fontColor(this.current === item ? '#0A59F7' : '#999') 91 .fontFamily('source-sans-pro,cursive,sans-serif') 92 } 93 .onClick(() => { 94 this.current = item 95 }) 96 }, item => item) 97 }.width('100%') 98 .justifyContent(FlexAlign.SpaceEvenly) 99 .backgroundColor('#19000000') 100 101 102 Column() { 103 Text('SideBarContainer content text1').fontSize(25) 104 Text('SideBarContainer content text2').fontSize(25) 105 } 106 .margin({ top: 50, left: 20, right: 30 }) 107 } 108 .sideBarWidth(150) 109 .minSideBarWidth(50) 110 .maxSideBarWidth(300) 111 .onChange((value: boolean) => { 112 console.info('status:' + value) 113 }) 114 } 115} 116``` 117 118 119
