diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebar.png b/zh-cn/application-dev/reference/arkui-ts/figures/sidebar.png new file mode 100644 index 0000000000000000000000000000000000000000..906d11269c167f100d8928156727ed49a2edb297 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/sidebar.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebar.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebar.md new file mode 100644 index 0000000000000000000000000000000000000000..ceb85e77ea2e9d939b184e75176c93518e5fe8e5 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebar.md @@ -0,0 +1,301 @@ +# SideBar + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +侧边栏容器，分为侧边栏和内容区两部分，可单独添加子组件。 + +## 权限列表 + +无 + +## 子组件 + +可以包含column和rowsplite子组件。 + +## 接口 + +SideBarContainer({ type?: SideBarContainerType }) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

type

+

SideBarContainerType

+

否

+

Embed

+

设置侧边栏的显示状态。

+
+ +- SideBarContainerType枚举说明 + + + + + + + + + + + + + + +

名称

+

描述

+

Embed

+

设置侧边栏显示状态为展开。

+

Overlay

+

设置侧边栏显示状态为收起。

+
+ +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

参数描述

+

showSideBar

+

boolean

+

true

+

设置是否显示侧边栏。

+

controlButton

+

ButtonStyle

+

-

+

设置侧边栏控制按钮的属性。

+

showControlButton

+

boolean

+

true

+

设置是否显示控制按钮。

+

sidebarWidth

+

number

+

200vp

+

设置侧边栏的宽度。

+

minSideBarWidth

+

number

+

200vp

+

设置侧边栏最小宽度。

+

maxSideBarWidth

+

number

+

280vp

+

设置侧边栏最大宽度。

+
+ +- ButtonStyle参数说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

left

+

Length

+

-

+

设置侧边栏控制按钮距离屏幕左侧间距。

+

top

+

Length

+

-

+

设置侧边栏控制按钮距离屏幕顶部间距。

+

width

+

Length

+

-

+

设置侧边栏控制按钮的宽度。

+

height

+

Length

+

-

+

设置侧边栏控制按钮的高度。

+

icons

+		 +

{ +

shown: string,

+

hidden: string,

+

switching?: string

+

}

+

-

+

设置侧边栏控制按钮的图标：

+
  • shown: 设置侧边栏显示时的控制按钮图标。
  • hidden: 设置侧边栏隐藏时的控制按钮图标。
  • switching: 设置侧边栏控制按钮图标为显示和隐藏的切换状态。
+

+
+ +## 事件 + + + + + + + + + + + +

名称

+

功能描述

+

onChange(callback: (value: boolen) => void)

+

当侧边栏的显示方式发生变化时触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct Index { + normalIcon : Resource = $r("app.media.user") + selectedIcon: Resource = $r("app.media.user") + @State current: number = 1 + build() { + SideBarContainer({ style: SideBarContainerStyle.Embed, + buttonAttr: { top: 30, left: 80, icons: { shown: '', hidden: '' } } }) + { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) { + Column({ space: 5 }) { + Image(this.current === 1 ? this.selectedIcon : this.normalIcon).width(64).height(64) + Text("Index01") + .fontSize(25) + .fontColor(this.current === 1 ? '#0A59F7' : '#999') + .fontFamily('source-sans-pro,cursive,sans-serif') + }.padding(5).width('70%') + .onClick(() => { + this.current = 1 + }) + Column({ space: 5 }) { + Image(this.current === 2 ? this.selectedIcon : this.normalIcon).width(64).height(64) + Text("Index02") + .fontSize(25) + .fontColor(this.current === 2 ? '#0A59F7' : '#999') + .fontFamily('source-sans-pro,cursive,sans-serif') + }.margin(10).padding(5).width('70%') + .onClick(() => { + this.current = 2 + }) + Column({ space: 5 }) { + Image(this.current === 3 ? this.selectedIcon : this.normalIcon).width(64).height(64) + Text("Index03") + .fontSize(25) + .fontColor(this.current === 3 ? '#0A59F7' : '#999') + .fontFamily('source-sans-pro,cursive,sans-serif') + }.width('70%').padding(5) + .onClick(() => { + this.current = 3 + }) + Column({ space: 5 }) { + Image(this.current === 4 ? this.selectedIcon : this.normalIcon).width(64).height(64) + Text("Index04") + .fontSize(25) + .fontColor(this.current === 4 ? '#0A59F7' : '#999') + .fontFamily('source-sans-pro,cursive,sans-serif') + }.width('70%').padding(5).margin(10) + .onClick(() => { + this.current = 4 + }) + }.width('100%') + .backgroundColor('#33000000') + .margin({ top: 80}) + + RowSplit() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ + Text('Split page one').fontSize(30) + } + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ + Text('Split page two') + } + }.width(666) + } + .showControlButton(true) + .sideBarWidth(200) + .minSideBarWidth(180) + .maxSideBarWidth(260) + .margin({ bottom: 150 }) + .onChange((value: boolean) => { + console.info('status' + value) + }) + } +} +``` +![](figures/sidebar.png) \ No newline at end of file