IBest-UI@HarmonyOS

Appearance

SideBar 侧边导航 ​

介绍 ​

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入 ​

ts
import { IBestSideBar, IBestSideBarItem } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State groupId: string = "group"
  @State active: number = 0
  @State itemList: Array<string> = ["选项1", "选项2", "选项3"]
  build() {
    IBestSideBar({
      groupId: this.groupId,
      active: $active
    }){
      ForEach(this.itemList, (item: string, index) => {
        IBestSideBarItem({
          groupId: this.groupId,
          index: index,
          title: item
        })
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State groupId: string = "group"
  @State active: number = 0
  @State itemList: Array<string> = ["选项1", "选项2", "选项3"]
  build() {
    IBestSideBar({
      groupId: this.groupId,
      active: $active,
      leftBarColor: "#ee0a24",
      activeFontColor: "#3d8af2"
    }){
      ForEach(this.itemList, (item: string, index) => {
        IBestSideBarItem({
          groupId: this.groupId,
          index: index,
          title: item
        })
      })
    }
  }
}

禁用选项 ​

禁用选项

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State groupId: string = "group"
  @State active: number = 0
  @State itemList: Array<string> = ["选项1", "选项2", "选项3"]
  build() {
    IBestSideBar({
      groupId: this.groupId,
      active: $active
    }){
      ForEach(this.itemList, (item: string, index) => {
        IBestSideBarItem({
          groupId: this.groupId,
          index: index,
          title: item,
          disabled: index == 1
        })
      })
    }
  }
}

切换事件 ​

切换事件

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State groupId: string = "group"
  @State active: number = 0
  @State itemList: Array<string> = ["选项1", "选项2", "选项3"]
  build() {
    IBestSideBar({
      groupId: this.groupId,
      active: $active,
      onChange: (index: number) => {
        console.log(this.itemList[index])
      }
    }){
      ForEach(this.itemList, (item: string, index) => {
        IBestSideBarItem({
          groupId: this.groupId,
          index: index,
          title: item
        })
      })
    }
  }
}

API ​

IBestSideBar @Props ​

参数说明类型默认值
groupId分组idstring''
active当前导航项的索引number0
sideWidth宽度number | string80
maxHeight是否显示外边框number | string0
titleColor文字颜色ResourceColor#323233
titleFontSize文字大小string | number14
bgColor背景色ResourceColor#f7f8fa
activeBgColor激活项背景色ResourceColor#fff
showLeftBar是否显示左侧颜色条booleantrue
leftBarSize左侧颜色条尺寸LeftBarSize{width: 4, height: 16}
leftBarColor左侧颜色条颜色ResourceColor#3d8af2
activeFontColor激活项文字颜色ResourceColor#323232
activeFontWeight激活项文字字重FontWeightMedium

LeftBarSize 数据类型 ​

属性名说明类型默认值
width宽度number | string4
height高度number | string16

IBestSideBar 插槽 ​

插槽名说明类型
defaultBuilder默认内容CustomBuilder

IBestSideBar Events ​

事件名说明回调参数
onChange切换事件回调index: number

IBestSideBarItem @Props ​

参数说明类型默认值
groupId分组id, 与IBestSideBar groupId 一致string''
index索引number0
title选项文字string''
disabled是否禁用booleanfalse

IBestSideBarItem 插槽 ​

插槽名说明类型
defaultBuilder默认内容CustomBuilder

IBestSideBarItem Events ​

事件名说明回调参数
onItemClick选项点击回调index: number