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 )

Creates a sidebar container.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

SideBarContainerType

Enumerates the types of sidebars in a container.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Attributes

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

showSideBar

showSideBar(value: boolean)

Specifies whether to display the sidebar.

Since API version 10, this attribute supports two-way binding through $$.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

controlButton

controlButton(value: ButtonStyle)

Sets the attributes of the sidebar control button.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

showControlButton

showControlButton(value: boolean)

Specifies whether to display the sidebar control button.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

sideBarWidth

sideBarWidth(value: number)

Sets the width of the sidebar. If a value less than 0 is set, the default value is used. The value must comply with the width constraints. If it is not within the valid range, the valid value closest to the set one is used.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

sideBarWidth⁹⁺

sideBarWidth(value: Length)

Sets the width of the sidebar. If a value less than 0 is set, the default value is used. The value must comply with the width constraints. If it is not within the valid range, the valid value closest to the set one is used. Compared to sideBarWidth, this API supports percentage strings and other pixel units for the value parameter.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

minSideBarWidth

minSideBarWidth(value: number)

Sets the minimum width of the sidebar. If a value less than 0 is set, the default value is used. The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.

minSideBarWidth, whether it is specified or kept at the default value, takes precedence over minWidth of the sidebar child components.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

minSideBarWidth⁹⁺

minSideBarWidth(value: Length)

Sets the minimum width of the sidebar. If a value less than 0 is set, the default value is used. The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used. Compared to minSideBarWidth, this API supports percentage strings and other pixel units for the value parameter.

minSideBarWidth, whether it is specified or kept at the default value, takes precedence over minWidth of the sidebar child components.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

maxSideBarWidth

maxSideBarWidth(value: number)

Sets the maximum width of the sidebar. If a value less than 0 is set, the default value is used. The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.

maxSideBarWidth, whether it is specified or kept at the default value, takes precedence over maxWidth of the sidebar child components.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

maxSideBarWidth⁹⁺

maxSideBarWidth(value: Length)

Sets the maximum width of the sidebar. If a value less than 0 is set, the default value is used. The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.

maxSideBarWidth, whether it is specified or kept at the default value, takes precedence over maxWidth of the sidebar child components.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

autoHide⁹⁺

autoHide(value: boolean)

Specifies whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width. The value is subject to the minSideBarWidth attribute method. If it is not set in minSideBarWidth, the default value is used.

Whether the sidebar should be hidden is determined when it is being dragged. When it is dragged to be smaller than the minimum width, the damping effect is required to trigger hiding (a distance out of range).

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

sideBarPosition⁹⁺

sideBarPosition(value: SideBarPosition)

Sets the position of the sidebar.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

divider¹⁰⁺

divider(value: DividerStyle|null)

Sets the divider style.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

minContentWidth¹⁰⁺

minContentWidth(value: Dimension)

Sets the minimum content area width of the sidebar container.

If this attribute is set to a value less than 0, the default value 360vp will be used. If this attribute is not set, the width of the content area can shrink to 0.

In Embed mode, when the component size is increased, only the content area is enlarged;

when the component size is decreased, the content area is shrunk until its width reaches the value defined by minContentWidth; if the component size is further decreased, while respecting the minContentWidth settings, the sidebar is shrunk

until its width reaches the value defined by minSideBarWidth; if the component size is further decreased, then:

• If autoHide is set to false, while respecting the minSideBarWidth and minContentWidth settings, the content area has its content clipped.
• If autoHide is set to true, the sidebar is hidden first, and then the content area is shrunk. After its width reaches the value defined by minContentWidth, the content area has its content clipped.

minContentWidth, whether it is specified or kept at the default value, takes precedence over minSideBarWidth and sideBarWidth of the sidebar.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

ButtonStyle

Describes the style of the sidebar control button.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

ButtonIconOptions¹⁴⁺

Describes the icons of the sidebar control button.

Atomic service API: This API can be used in atomic services since API version 14.

System capability: SystemCapability.ArkUI.ArkUI.Full

NOTE

When an error occurs during resource obtaining, the default icon is used.

SideBarPosition⁹⁺

Enumerates the positions of the sidebar.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

DividerStyle¹⁰⁺

Sets the divider style.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

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.

onChange

onChange(callback: (value: boolean) => void)

Triggered when the status of the sidebar switches between shown and hidden.

This event is triggered when any of the following conditions is met:

1. The value of showSideBar changes.

2. The showSideBar attribute adapts to behavior changes.

3. The autoHide API is triggered when the divider is dragged.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

This example demonstrates how to use the SideBarContainer component and implement the page layout.

// 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' })
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton