From 598cb2b087496eb0c118390359f84d386c421f8c Mon Sep 17 00:00:00 2001 From: yaoyuchi Date: Mon, 21 Feb 2022 16:58:21 +0800 Subject: [PATCH] add_sidebar_docs Signed-off-by: yaoyuchi --- .../reference/arkui-ts/Readme-CN.md | 1 + .../reference/arkui-ts/figures/sidebar.png | Bin 0 -> 19819 bytes .../arkui-ts/ts-container-sidebar.md | 271 ++++++++++++++++++ 3 files changed, 272 insertions(+) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/sidebar.png create mode 100644 zh-cn/application-dev/reference/arkui-ts/ts-container-sidebar.md 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 ef5825ceb1e..15bd5198f16 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 GIT binary patch literal 19819 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 + +>![](../../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 -- Gitee