目录

Sidebar Menu Style

Use Case

The function of configuring the sidebar menu style is available since version 6.0.0(20).

The HdsSideMenu (side menu) component allows menu bar style configuration for you to set a two-level menu for the sidebar and display the number of new messages for each menu item.

Development Procedure

  1. Import required modules.

    import { HdsSideMenu, HdsSideMenuMainItem, HdsSideMenuSubItem, HdsSideMenuBadgeParam, HdsSideBar } from '@kit.UIDesignKit';
import { SymbolGlyphModifier } from '@kit.ArkUI';

  2. Set the level-1 and level-2 menu items for the sidebar and display the number of new messages for each item.

    @Entry
@ComponentV2
struct Index {
  @Local showControlButton: boolean = true;
  @Local sideBarMask: boolean = false;
  @Local autoHide: boolean = true;
  @Local barStateTypeText: string = 'Select BarState';
  @Local widthIndex: number = 0;
  @Local badgeNumber: HdsSideMenuBadgeParam = { count: 50 };
  @Local useTheme: boolean = false;
  @Local selectedIndex: number = 2;
  @Local selectedTransparency: number = 0.6;
  @Local str: string = 'Text message';
  @Local isShowSidebar: boolean = true;
  listOptionsDefault?: HdsSideMenuMainItem[] = [
    new HdsSideMenuMainItem(
      {
        symbol: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontSize(14),
        // label: $r('sys.string.TextView_engr_phone')
      }),
    new HdsSideMenuMainItem({
      icon: $r('sys.symbol.person_wave_3'),
      label: 'Tuesday',
      hdsSideMenuSubItem: [
        new HdsSideMenuSubItem({ label: this.str, badge: this.badgeNumber })],
    }),
    new HdsSideMenuMainItem({
      symbol: new SymbolGlyphModifier($r('sys.symbol.person_crop_circle_fill_1')),
      label: 'Wednesday'
    }),
  ]
  @Builder
  SideBarPanelBuilder() {
    Column() {
      HdsSideMenu({
        items: this.listOptionsDefault,
        selectedIndex: this.selectedIndex,
        $selectedIndex: (selectedIndex: number) => {
          this.selectedIndex = selectedIndex
        }
      })
    }
    .height('100%')
  }
  // Content area on the right.
  @Builder
  ContentPanelBuilder() {
    Column() {
      Column() {
        Button() {
          SymbolGlyph(this.isShowSidebar ? $r('sys.symbol.open_sidebar') : $r('sys.symbol.close_sidebar'))
            .fontWeight(FontWeight.Normal)
            .fontSize($r('sys.float.ohos_id_text_size_headline7'))
            .fontColor([$r('sys.color.ohos_id_color_titlebar_icon')])
            .hitTestBehavior(HitTestMode.None)
        }
        .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
        .height(24)
        .width(24)
        .animation({ curve: Curve.Sharp, duration: 100 })
        .onClick(() => {
          this.isShowSidebar = !this.isShowSidebar;
        })
      }
    }
    .height('100%')
    .width('100%')
  }
  @BuilderParam sideBarBuilder: () => void = this.SideBarPanelBuilder
  @BuilderParam contentBuilder: () => void = this.ContentPanelBuilder
  @Builder
  build() {
    Column() {
      HdsSideBar({
        sideBarPanelBuilder: (): void => {
          this.sideBarBuilder()
        },
        contentPanelBuilder: (): void => {
          this.contentBuilder()
        },
        isShowSideBar: this.isShowSidebar,
        $isShowSideBar: (isShowSidebar: boolean) => {
          this.isShowSidebar = !isShowSidebar
        }
      })
    }
  }
}