diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png new file mode 100644 index 0000000000000000000000000000000000000000..1cbb01859041e2028d76b49db655148cf4eb3062 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md index d3f5d40f7d5787bb830f89ee4a82d57e67ff2072..b9c0fbfb166fab6f2c22f60630af11cda0a18a40 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -4,7 +4,7 @@ > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -侧边栏容器，分为侧边栏和内容区两部分，可单独添加子组件。 +提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。 ## 权限列表 @@ -14,10 +14,7 @@ ## 子组件 -可以包含两个子组件。 -> ![](../../public_sys-resources/icon-note.gif) **说明：** -> 第一个子组件的类型必须为[Column](ts-container-column.md)，表示侧边栏，第二个子组件的类型必须为[RowSplit](ts-container-rowsplit.md)，表示内容区。 - +可以包含子组件。 ## 接口 @@ -42,18 +39,18 @@ SideBarContainer( type?: SideBarContainerType ) | showSideBar | boolean | true | 设置是否显示侧边栏。 | | controlButton | ButtonStyle | - | 设置侧边栏控制按钮的属性。 | | showControlButton | boolean | true | 设置是否显示控制按钮。 | -| sidebarWidth | number | 200vp | 设置侧边栏的宽度。 | -| minSideBarWidth | number | 200vp | 设置侧边栏最小宽度。 | -| maxSideBarWidth | number | 280vp | 设置侧边栏最大宽度。 | +| sideBarWidth | number | 200 | 设置侧边栏的宽度。 | +| minSideBarWidth | number | 200 | 设置侧边栏最小宽度。 | +| maxSideBarWidth | number | 280 | 设置侧边栏最大宽度。 | - ButtonStyle对象说明 | 名称 | 参数类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | - | left | number | 否 | 16vp | 设置侧边栏控制按钮距离容器左界限的间距。 | - | top | number | 否 | 48vp | 设置侧边栏控制按钮距离容器上界限的间距。 | - | width | number | 否 | 32vp | 设置侧边栏控制按钮的宽度。 | - | height | number | 否 | 32vp | 设置侧边栏控制按钮的高度。 | - | icons | {
shown: string \| PixelMap \| [Resource](../../ui/ts-types.md#resource类型) ,
hidden: string \| PixelMap \| [Resource](../../ui/ts-types.md#resource类型) ,
switching?: string \| PixelMap \| [Resource](../../ui/ts-types.md#resource类型)
} | 否 | - | 设置侧边栏控制按钮的图标：

- shown: 设置侧边栏显示时控制按钮的图标。
- hidden: 设置侧边栏隐藏时控制按钮的图标。
- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 | + | left | number | 否 | 16 | 设置侧边栏控制按钮距离容器左界限的间距。 | + | top | number | 否 | 48 | 设置侧边栏控制按钮距离容器上界限的间距。 | + | width | number | 否 | 32 | 设置侧边栏控制按钮的宽度。 | + | height | number | 否 | 32 | 设置侧边栏控制按钮的高度。 | + | icons | {
shown: string \| PixelMap \| [Resource](../../ui/ts-types.md) ,
hidden: string \| PixelMap \| [Resource](../../ui/ts-types.md) ,
switching?: string \| PixelMap \| [Resource](../../ui/ts-types.md)
} | 否 | - | 设置侧边栏控制按钮的图标：

- shown: 设置侧边栏显示时控制按钮的图标。
- hidden: 设置侧边栏隐藏时控制按钮的图标。
- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 | @@ -113,4 +110,5 @@ struct SideBarContainerExample { } } ``` - + +![](figures/sidebarcontainer.png)