ts-container-sidebarcontainer.md 4.7 KB
Newer Older
Y
yaoyuchi 已提交
1 2
# SideBarContainer

H
geshi  
HelloCrease 已提交
3
>  **说明:**
Y
yaoyuchi 已提交
4 5 6
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。


Y
yaoyuchi 已提交
7
提供侧边栏可以显示和隐藏的侧边栏容器,通过子组件定义侧边栏和内容区,第一个子组件表示侧边栏,第二个子组件表示内容区。
Y
yaoyuchi 已提交
8 9 10 11 12 13 14 15 16


## 权限列表




## 子组件

Y
yaoyuchi 已提交
17
可以包含子组件。
Y
yaoyuchi 已提交
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41


## 接口

SideBarContainer( type?: SideBarContainerType )

- 参数
  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
  | -------- | -------- | -------- | -------- | -------- |
  | type | SideBarContainerType | 否 | SideBarContainerType.Embed | 设置侧边栏的显示类型。 | 

- SideBarContainerType枚举说明
  | 名称 | 描述 |
  | -------- | -------- |
  | Embed | 侧边栏嵌入到组件内,侧边栏和内容区并列显示。 |
  | Overlay | 侧边栏浮在内容区上面。 |

## 属性

| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| showSideBar | boolean | true | 设置是否显示侧边栏。 |
| controlButton | ButtonStyle                                                | - | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | true | 设置是否显示控制按钮。 |
X
xuzhidan 已提交
42 43 44
| sideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#长度类型) | 200 | 设置侧边栏的宽度。 |
| minSideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#长度类型) | 200 | 设置侧边栏最小宽度。 |
| maxSideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#长度类型) | 280 | 设置侧边栏最大宽度。 |
X
xuzhidan 已提交
45
| autoHide<sup>9+</sup> | boolean | true | 设置当侧边栏拖拽到小于最小宽度后,是否自动隐藏。 |
46
| sideBarPosition<sup>9+</sup> | SideBarPosition | SideBarPosition.Start | 设置侧边栏显示位置。 |
Y
yaoyuchi 已提交
47 48 49 50

- ButtonStyle对象说明
  | 名称 | 参数类型 | 必填 | 默认值 | 描述 |
  | -------- | -------- | -------- | -------- | -------- |
Y
yaoyuchi 已提交
51 52 53 54 55
  | left | number | 否 | 16 | 设置侧边栏控制按钮距离容器左界限的间距。 |
  | top | number | 否 | 48 | 设置侧边栏控制按钮距离容器上界限的间距。 |
  | width | number | 否 | 32 | 设置侧边栏控制按钮的宽度。 |
  | height | number | 否 | 32 | 设置侧边栏控制按钮的高度。 |
  | icons | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) <br/>} | 否 | - | 设置侧边栏控制按钮的图标:<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 | 
Y
yaoyuchi 已提交
56

57 58 59 60 61
- SideBarPosition<sup>9+</sup>枚举说明
  | 名称 | 描述 |
  | -------- | -------- |
  | Start | 侧边栏位于容器左侧。 |
  | End | 侧边栏位于容器右侧。 | 
Y
yaoyuchi 已提交
62 63 64 65 66 67 68



## 事件

| 名称 | 功能描述 | 
| -------- | -------- |
69
| onChange(callback: (value: boolean) =&gt; void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> value的true表示显示,false表示隐藏。|  
Y
yaoyuchi 已提交
70 71 72 73


## 示例

H
geshi  
HelloCrease 已提交
74 75
```ts
// xxx.ets
Y
yaoyuchi 已提交
76 77 78 79 80 81 82 83 84
@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() {
Y
yaoyuchi 已提交
85
    SideBarContainer(SideBarContainerType.Embed)
Y
yaoyuchi 已提交
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
    {
      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)
    })
  }
}
```
Y
yaoyuchi 已提交
121 122

![](figures/sidebarcontainer.png)