IBest-UI

Appearance

SideBar 侧边导航 ​

介绍 ​

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

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

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() {
    Column(){
      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() {
    Column(){
      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() {
    Column(){
      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() {
    Column(){
      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 | number''
active当前导航项的索引number0
sideWidth宽度string | number80
maxHeight最大高度string | number''
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宽度string | number4
height高度string | number16

IBestSideBar 插槽 ​

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

IBestSideBar Events ​

事件名说明事件类型
onChange切换事件回调(index: number) => void

IBestSideBarItem @Props ​

参数说明类型默认值
groupId分组id, 与IBestSideBar groupId 一致string | number''
index索引number0
title选项文字ResourceStr''
disabled是否禁用booleanfalse
contentPadding 2.2.0内边距Length | Padding | LocalizedPadding{top:20, bottom:20, right:12}

IBestSideBarItem 插槽 ​

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

IBestSideBarItem Events ​

事件名说明事件类型
onItemClick选项点击回调(index: number) => void

主题定制 ​

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称描述默认值
ibest_sidebar_background背景色#f7f8fa