HdsSideMenu

本模块提供一种菜单栏样式组件。设置侧边栏对应的一级菜单和二级菜单，并显示其新消息数量。

起始版本： 6.0.0(20)

导入模块

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

接口

HdsSideMenu({items?: HdsSideMenuMainItem[], selectedIndex: number, $selectedIndex?: OnSelectedIndexChange, maxItemTextLines?: number})

侧边菜单栏组件信息。

装饰器类型： @ComponentV2

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

参数名	类型	必填	装饰器类型	说明
items	HdsSideMenuMainItem[]	否	@Param	一级菜单栏组，数量最多为5个。
selectedIndex	number	是	@Param @Require	当前选中的菜单栏。 取值范围：大于等于-1的整数。 -1表示当前侧边菜单栏没有菜单被选中。
$selectedIndex	OnSelectedIndexChange	否	@Event	用于双向绑定selectedIndex。
maxItemTextLines	number	否	@Param	设置最大内容行数。 默认值：1。 取值范围：(0, +∞)的整数。

build

build(): void

struct的默认构造函数，无法直接调用此方法。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

HdsSideMenuMainItem

HdsSideMenu一级菜单栏。

装饰器类型：@ObservedV2

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

constructor

constructor(param: HdsSideMenuMainItemParam)

HdsSideMenuMainItem的构造函数。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

参数：

参数名	类型	必填	说明
param	HdsSideMenuMainItemParam	是	HdsSideMenu一级菜单栏的参数。

getSideMenuSubItem

getSideMenuSubItem(): HdsSideMenuSubItem[]

从一级菜单对象获取当前菜单下的二级菜单对象数组。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

返回值：

类型	说明
HdsSideMenuSubItem[]	当前菜单下的二级菜单对象数组。

updateBadge

updateBadge(badge?: HdsSideMenuBadgeParam): HdsSideMenuMainItem

更新一级菜单栏的角标属性。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

参数：

参数名	类型	必填	说明
badge	HdsSideMenuBadgeParam	否	HdsSideMenu上带信息提醒的图标配置信息。

返回值：

类型	说明
HdsSideMenuMainItem	当前菜单下的一级菜单对象。

HdsSideMenuSubItem

HdsSideMenu二级菜单栏。

装饰器类型：@ObservedV2

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

constructor

constructor(param: HdsSideMenuSubItemParam)

HdsSideMenuSubItem的构造函数。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

参数：

参数名	类型	必填	说明
param	HdsSideMenuSubItemParam	是	HdsSideMenu二级菜单栏的参数。

updateBadge

updateBadge(badge?: HdsSideMenuBadgeParam): HdsSideMenuSubItem

更新二级菜单栏的角标属性。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

参数：

参数名	类型	必填	说明
badge	HdsSideMenuBadgeParam	否	HdsSideMenu上带信息提醒的图标配置信息。

返回值：

类型	说明
HdsSideMenuSubItem	当前菜单下的二级菜单对象。

HdsSideMenuBadgeParam

HdsSideMenu上带信息提醒的图标配置信息。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

名称	类型	只读	可选	说明
count	number	否	是	设置提醒消息数。值为0时不显示；值为1时，显示“·”；大于99时，显示“99+”。不支持设置小于0的数字。 默认值：0。
value	string	否	是	提示内容的文本字符串，超长文本换行显示。 默认值：""。

HdsSideMenuBaseItemParam

HdsSideMenu菜单栏基础类。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

名称	类型	只读	可选	说明
itemId	string	否	是	菜单的id。 默认值：""。
label	ResourceStr	否	是	菜单显示的文本内容。
action	Callback	否	是	点击菜单时的回调。

HdsSideMenuMainItemParam

HdsSideMenu一级菜单栏配置项，继承自HdsSideMenuBaseItemParam。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

名称	类型	只读	可选	说明
icon	ResourceStr	否	是	设置一级菜单栏的图标，优先级高于symbol。
symbol	SymbolGlyphModifier	否	是	设置一级菜单栏的图标。
hdsSideMenuSubItem	HdsSideMenuSubItem[]	否	是	设置一级菜单栏中的二级菜单栏数组。二级菜单栏数量最多5个。
badge	HdsSideMenuBadgeParam	否	是	设置一级菜单栏上带信息提醒的图标配置信息。

HdsSideMenuSubItemParam

HdsSideMenu二级菜单栏配置项，继承自HdsSideMenuBaseItemParam。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

名称	类型	只读	可选	说明
badge	HdsSideMenuBadgeParam	否	是	设置二级菜单栏上带信息提醒的图标配置信息。

事件

OnSelectedIndexChange

type OnSelectedIndexChange = (selectedIndex: number) => void

HdsSideMenu的selectedIndex发生变化时的回调函数。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.UIDesign.HDSPattern.Standard

起始版本： 6.0.0(20)

参数：

参数名	类型	必填	说明
selectedIndex	number	是	选择项的序号。

示例

HdsSideMenu提供一种菜单栏样式。

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

@Entry
@ComponentV2
struct Index {
  @Local isShowSidebar: boolean = true;
  @Local selectedIndex: number = 1;
  listOptionsDefault?: HdsSideMenuMainItem[] = [
    new HdsSideMenuMainItem({
      symbol: new SymbolGlyphModifier($r('sys.symbol.doc_plaintext')),
      label: '全部备忘',
    }),
    new HdsSideMenuMainItem({
      symbol: new SymbolGlyphModifier($r('sys.symbol.star')),
      label: '收藏',
    }),
    new HdsSideMenuMainItem({
      symbol: new SymbolGlyphModifier($r('sys.symbol.lock')),
      label: '加锁',
    }),
    new HdsSideMenuMainItem({
      symbol: new SymbolGlyphModifier($r('sys.symbol.trash')),
      label: '最近删除',
    }),
    new HdsSideMenuMainItem({
      label: '文件夹',
    }),
  ]

  @Builder
  SideBarPanelBuilder() {
    Column() {
      HdsSideMenu({
        items: this.listOptionsDefault,
        selectedIndex: this.selectedIndex,
        $selectedIndex: (selectedIndex: number) => {
          this.selectedIndex = selectedIndex;
        },
      })
    }
    .width('100%')
    .height('100%')
    .margin(40)
  }

  @Builder
  ContentPanelBuilder() {
    Column() {
      Image($r('sys.media.ohos_ic_public_albums'))
        .width('120vp')
        .height('120vp')
    }
    .margin({ top: 250 })
  }

  @BuilderParam contentBuilder: () => void = this.ContentPanelBuilder
  @BuilderParam sideBarBuilder: () => void = this.SideBarPanelBuilder

  @Builder
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      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)
      }
      .id('side_bar_button')
      .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
      .height(30)
      .width(30)
      .onClick(() => {
        this.isShowSidebar = !this.isShowSidebar;
      })
      .zIndex(1)
      .margin({ top: 10, left: 10 })

      HdsSideBar({
        sideBarPanelBuilder: (): void => {
          this.sideBarBuilder()
        },
        contentPanelBuilder: (): void => {
          this.contentBuilder()
        },
        isShowSideBar: this.isShowSidebar,
        $isShowSideBar: (isShowSidebar: boolean) => {
          this.isShowSidebar = !isShowSidebar
        },
      })
    }
  }
}