From 452ab82a114051b6563c6d180b624d61b8e4cd60 Mon Sep 17 00:00:00 2001 From: yaoyuchi Date: Wed, 23 Feb 2022 15:15:02 +0800 Subject: [PATCH] add_sidebarcontainer_docs Signed-off-by: yaoyuchi --- .../reference/arkui-ts/Readme-CN.md | 1 + .../arkui-ts/figures/sidebarcontainer.png | Bin 0 -> 22772 bytes .../arkui-ts/ts-container-sidebarcontainer.md | 116 ++++++++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png create mode 100644 zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.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 797bf3f30f8..1179c545604 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -87,6 +87,7 @@ - [RowSplit](ts-container-rowsplit.md) - [Scroll](ts-container-scroll.md) - [ScrollBar](ts-basic-components-scrollbar.md) + - [SideBarContainer](ts-container-sidebarcontainer.md) - [Stack](ts-container-stack.md) - [Swiper](ts-container-swiper.md) - [Tabs](ts-container-tabs.md) 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..0447567e9bbfa6d46d5e61c810263387ba0aa981 GIT binary patch literal 22772 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�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 E0AU%<3jhEB literal 0 HcmV?d00001 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 new file mode 100644 index 00000000000..aa7d64c8a43 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -0,0 +1,116 @@ +# SideBarContainer + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + + +侧边栏容器,分为侧边栏和内容区两部分,可单独添加子组件。 + + +## 权限列表 + +无 + + +## 子组件 + +可以包含两个子组件。 +> ![](../../public_sys-resources/icon-note.gif) **说明:** +> 第一个子组件的类型必须为[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 | 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:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 | + + + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onChange(callback: (value: boolen) => void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。

value的true表示显示,false表示隐藏。| + + +## 示例 + +``` +@Entry +@Component +struct SideBarContainerExample { + 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() { + 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') + } + .onClick(() => { + this.current = item + }) + }, item => item) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor('#19000000') + RowSplit() { + Column(){ + Text('Split page one').fontSize(30) + }.justifyContent(FlexAlign.Center) + Column(){ + Text('Split page two').fontSize(30) + }.justifyContent(FlexAlign.Center) + }.width('100%') + } + .sideBarWidth(240) + .minSideBarWidth(210) + .maxSideBarWidth(260) + .onChange((value: boolean) => { + console.info('status:' + value) + }) + } +} +``` + -- Gitee