# SideBarContainer
提供侧边栏可以显示和隐藏的侧边栏容器,通过子组件定义侧边栏和内容区,第一个子组件表示侧边栏,第二个子组件表示内容区。
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
可以包含子组件。
> **说明:**
>
> - 子组件类型:系统组件和自定义组件,不支持渲染控制类型([if/else](../../quick-start/arkts-rendering-control-ifelse.md)、[ForEach](../../quick-start/arkts-rendering-control-foreach.md)和[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md))。
> - 子组件个数:必须且仅包含2个子组件。
> - 子组件个数异常时:3个或以上子组件,显示第一个和第二个。1个子组件,显示侧边栏,内容区为空白。
## 接口
SideBarContainer( type?: SideBarContainerType )
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| type | SideBarContainerType | 否 | 设置侧边栏的显示类型。
默认值:SideBarContainerType.Embed |
## SideBarContainerType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Embed | 侧边栏嵌入到组件内,和内容区并列显示。当前屏幕尺寸大于600vp时,该枚举值生效。小于600vp时,侧边栏会自动隐藏。在自动隐藏后,如果通过点击控制按钮唤出侧边栏,则侧边栏默认通过Overlay方式显示。 |
| Overlay | 侧边栏浮在内容区上面。 |
| AUTO | 组件尺寸大于等于minSideBarWidth+minContentWidth时,采用Embed模式显示。
组件尺寸小于minSideBarWidth+minContentWidth时,采用Overlay模式显示。
未设置minSideBarWidth或minContentWidth时,会使用未设置接口的默认值进行计算,若计算的值小于600vp,则使用600vp做为模式切换的断点值。|
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| showSideBar | boolean | 设置是否显示侧边栏。
默认值:true
从API version 10开始,该属性支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量。 |
| controlButton | [ButtonStyle](#buttonstyle对象说明) | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | 设置是否显示控制按钮。
默认值:true |
| sideBarWidth | number \| [Length](ts-types.md#length)9+ | 设置侧边栏的宽度。
默认值:240vp
单位:vp
**说明:**
API version 9及以下版本默认值为200vp,API version 10的默认值为240vp。
设置为小于0的值时按默认值显示。
受最小宽度和最大宽度限制,不在限制区域内取最近的点。
sideBarWidth优先于侧边栏子组件width,sideBarWidth未设置时默认值优先级高于侧边栏子组件width。 |
| minSideBarWidth | number \| [Length](ts-types.md#length)9+ | 设置侧边栏最小宽度。
默认值:240vp
单位:vp
**说明:**
API version 9及以下版本默认值为200vp,API version 10的默认值为240vp。
设置为小于0的值时按默认值显示。
值不能超过侧边栏容器本身宽度,超过使用侧边栏容器本身宽度。
minSideBarWidth优先于侧边栏子组件minWidth,minSideBarWidth未设置时默认值优先级高于侧边栏子组件minWidth。 |
| maxSideBarWidth | number \| [Length](ts-types.md#length)9+ | 设置侧边栏最大宽度。
默认值:280vp
单位:vp
**说明:**
设置为小于0的值时按默认值显示。
值不能超过侧边栏容器本身宽度,超过使用侧边栏容器本身宽度。
maxSideBarWidth优先于侧边栏子组件maxWidth,maxSideBarWidth未设置时默认值优先级高于侧边栏子组件maxWidth。 |
| autoHide9+ | boolean | 设置当侧边栏拖拽到小于最小宽度后,是否自动隐藏。
默认值:true
**说明:**
受minSideBarWidth属性方法影响,minSideBarWidth属性方法未设置值使用默认值。
拖拽过程中判断是否要自动隐藏。小于最小宽度时需要阻尼效果触发隐藏(越界一段距离) |
| sideBarPosition9+ | [SideBarPosition](#sidebarposition9枚举说明) | 设置侧边栏显示位置。
默认值:SideBarPosition.Start |
| divider10+ | [DividerStyle](#dividerstyle10对象说明) \| null | 设置分割线的样式。
- 默认为DividerStyle:显示分割线。
- null:不显示分割线。 |
| minContentWidth10+ | [Dimension](ts-types.md#dimension10) | SideBarContainer组件内容区的最小宽度。
默认值:360vp
单位:vp
**说明:**
设置为小于0的值时按默认值显示,未设置时为0vp。
Embed场景下,增大组件尺寸时仅增大内容区的尺寸。
缩小组件尺寸时,先缩小内容区的尺寸至minContentWidth。继续缩小组件尺寸时,保持内容区宽度minContentWidth不变,优先缩小侧边栏的尺寸。
当缩小侧边栏的尺寸至minSideBarWidth后,继续缩小组件尺寸时,
- 如果autoHide属性为false,则会保持侧边栏宽度minSideBarWidth和内容区宽度minContentWidth不变,但内容区会被截断显示;
- 如果autoHide属性为true,则会优先隐藏侧边栏,然后继续缩小至内容区宽度minContentWidth后,内容区宽度保持不变,但内容区会被截断显示。
minContentWidth优先于侧边栏的maxSideBarWidth与sideBarWidth属性,minContentWidth未设置时默认值优先级低于设置的minSideBarWidth与maxSideBarWidth属性。 |
## ButtonStyle对象说明
| 名称 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| left | number | 否 | 设置侧边栏控制按钮距离容器左界限的间距。
默认值:16vp
单位:vp |
| top | number | 否 | 设置侧边栏控制按钮距离容器上界限的间距。
默认值:48vp
单位:vp |
| width | number | 否 | 设置侧边栏控制按钮的宽度。
默认值:
API version 9及之前版本:32vp
从API version 10开始:24vp
单位:vp |
| height | number | 否 | 设置侧边栏控制按钮的高度。
默认值:
API version 9及之前版本:32vp
从API version 10开始:24vp
单位:vp |
| icons | {
shown: string \| PixelMap \| [Resource](ts-types.md) ,
hidden: string \| PixelMap \| [Resource](ts-types.md) ,
switching?: string \| PixelMap \| [Resource](ts-types.md)
} | 否 | 设置侧边栏控制按钮的图标: