SideBarContainer

The <SideBarContainer> component contains a sidebar and content area as its child components. The sidebar is the first child component and can be shown or hidden as needed. The content area is the second child component.

NOTE

This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Supported

NOTE

• Built-in components and custom components are allowed, without support for (if/else, ForEach, and LazyForEach) rendering control.
• This component must contain two child components.
• If there are three or more child components, only the first and second child components are displayed. If there is only one child component, the sidebar is displayed, and the content area is blank.

APIs

SideBarContainer( type?: SideBarContainerType )

Parameters

SideBarContainerType

Attributes

In addition to the universal attributes, the following attributes are supported.

ButtonStyle

SideBarPosition⁹⁺

DividerStyle¹⁰⁺

NOTE

The settings of the universal size attributes width and height do not take effect for the sidebar child component. The settings do not take effect for the sidebar content area either. By default, the sidebar content area takes up the remaining space of the sidebar container.

If the showSideBar attribute is not set, the sidebar's visibility is subject to its size.

• If the size is less than the sum of minSideBarWidth and minContentWidth, the sidebar is not displayed by default.
• If the size is greater than or equal to the sum of minSideBarWidth and minContentWidth, the sidebar is displayed by default.

Events

In addition to the universal events, the following events are supported.

Example

// xxx.ets
@Entry
@Component
struct SideBarContainerExample {
  normalIcon: Resource = $r("app.media.icon")
  selectedIcon: Resource = $r("app.media.icon")
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1

  build() {
    SideBarContainer(SideBarContainerType.Embed) {
      Column() {
        ForEach(this.arr, (item: number) => {
          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: string) => item)
      }.width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#19000000')

      Column() {
        Text('SideBarContainer content text1').fontSize(25)
        Text('SideBarContainer content text2').fontSize(25)
      }
      .margin({ top: 50, left: 20, right: 30 })
    }
    .controlButton({
      icons: {
        hidden: $r('app.media.drawer'),
        shown: $r('app.media.drawer'),
        switching: $r('app.media.drawer')
      }
    })
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
    .divider({ strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp' })
  }
}