From c324bb890676dad35abb7b2d1eed8f76f91a7f61 Mon Sep 17 00:00:00 2001 From: yaoyuchi Date: Fri, 18 Feb 2022 16:34:41 +0800 Subject: [PATCH] sidebar docs Signed-off-by: yaoyuchi --- .../reference/arkui-ts/figures/sidebar.png | Bin 0 -> 31542 bytes .../arkui-ts/ts-container-sidebar.md | 301 ++++++++++++++++++ 2 files changed, 301 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/figures/sidebar.png b/zh-cn/application-dev/reference/arkui-ts/figures/sidebar.png new file mode 100644 index 0000000000000000000000000000000000000000..906d11269c167f100d8928156727ed49a2edb297 GIT binary patch literal 31542 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 z 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 literal 0 HcmV?d00001 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 00000000000..ceb85e77ea2 --- /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 -- Gitee