diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index ef5825ceb1eedf1962c146f5eaeaff37a2f314b1..15bd5198f16b3bdf864721e8c7aac1fc9f8a3c56 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -88,6 +88,7 @@ - [TabContent](ts-container-tabcontent.md) - [Stepper](ts-container-stepper.md) - [StepperItem](ts-container-stepperitem.md) + - [Sidebar](ts-container-stepperitem.md) - [绘制组件](ts-drawing-components.md) - [Circle](ts-drawing-components-circle.md) 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..b44f6e09809ca3cb58d12fe8fcb23f5340ec7bcb 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..aa0239bd9118b08aa019fb2251b0b56ef5bf4cfb --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebar.md @@ -0,0 +1,271 @@ +# SideBar + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +侧边栏容器，分为侧边栏和内容区两部分，可单独添加子组件。 + +## 权限列表 + +无 + +## 子组件 + +仅可包含一个 [Column](ts-container-column.md) 和 [RowSplit](ts-container-rowsplit.md) 子组件。 + +## 接口 + +SideBarContainer( type?: SideBarContainerType ) + +- 参数 + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

type

+

SideBarContainerType

+

否

+

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 | PixelMap | Resource,

+

hidden: string | PixelMap | Resource,

+

switching?: ststring | PixelMap | Resourcering

+

}

+

-

+

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

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

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

名称

+

功能描述

+

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

+

当侧边栏的状态在显示和隐藏之间切换时触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct SidebarExample { + normalIcon : Resource = $r("app.media.user") + selectedIcon: Resource = $r("app.media.userFull") + @State arr: number[] = [1, 2, 3] + @State current: number = 1 + + build() { + SideBarContainer({ type: SideBarContainerType.Embed }) + { + Column({ space: 10 }) { + ForEach(this.arr, (item, index) => { + Column({ space: 5 }) { + Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64) + Text("Index0" + item) + .fontSize(25) + .fontColor(this.current === item ? '#0A59F7' : '#999') + .fontFamily('source-sans-pro,cursive,sans-serif') + }.padding(5).width('70%') + .onClick(() => { + this.current = item + }) + }, item => item) + }.width('100%') + .alignItems(HorizontalAlign.Center) + .backgroundColor('#19000000') + .padding({ top: 300, bottom: 100 }) + if (this.current === this.arr[this.current - 1]) { + Row() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ + Text("page " + this.current).fontSize(30) + }.width('100%').height('100%') + } + } + } + .showControlButton(true) + .sideBarWidth(240) + .minSideBarWidth(210) + .maxSideBarWidth(260) + .onChange((value: boolean) => { + console.info('status' + value) + }) + } +} +``` +![](figures/sidebar.png) \ No newline at end of file