IBest-UI-V2

Appearance

SideBar 侧边导航 ​

介绍 ​

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

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

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

自定义样式 ​

自定义样式

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

禁用选项 ​

禁用选项

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

切换事件 ​

切换事件

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local groupId: string = "group"
  @Local active: number = 0
  @Local itemList: Array<string> = ["选项1", "选项2", "选项3"]
  build() {
    Column(){
      IBestSideBar({
        groupId: this.groupId,
        active: this.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 | number''
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 | number''
index索引number0
title选项文字ResourceStr''
disabled是否禁用booleanfalse

IBestSideBarItem 插槽 ​

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

IBestSideBarItem Events ​

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