IBest-UI@HarmonyOS

Appearance

NavBar 导航栏 ​

介绍 ​

为页面提供导航功能，常用于页面顶部。

引入 ​

ts
import { IBestNavBar } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestNavBar({
      title: "IBest-UI"
    })
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column({space: 14}){
      IBestNavBar({
        title: "IBest-UI",
        titleColor: "#fff",
        titleFontSize: 14,
        titleFontWeight: FontWeight.Bold,
        navBarBgColor: "#476ce3",
        leftIconColor: "#fff"
      })
      IBestNavBar({
        title: "IBest-UI",
        titleColor: "#fff",
        bgLinearGradient: {
          angle: 90,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        }
      })
    }
  }
}

自定义显示区域 ​

自定义显示区域

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column({space: 14}){
      IBestNavBar({
        leftIcon: "https://img1.baidu.com/it/u=498751481,2849377151&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800",
        leftLabel: "IBest-UI",
        leftIconRadius: 999
      })
      IBestNavBar({
        isShowLeft: false,
        title: "IBest-UI",
        titleIcon: $r("app.media.app_icon"),
      })
      IBestNavBar({
        isShowLeft: false,
        isShowRight: true,
        rightIcon: "https://img1.baidu.com/it/u=498751481,2849377151&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800",
        rightLabel: "IBest-UI"
      })
    }
  }
}

自定义标题内容 ​

自定义标题内容

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder titleBuilder(){
		TextInput({text: this.searchVal, placeholder: "请输入搜索内容"}).width("70%").height("70%")
	}
  build() {
    IBestNavBar({
      titleBuilder: (): void => this.titleBuilder()
    })
  }
}

自定义左右内容 ​

自定义左右内容

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder leftBuilder(){
		Row({space: 14}){
			Image($r("app.media.icon_star_o"))
				.width(16)
			Text("自定义左侧")
		}
	}
	@Builder rightBuilder(){
		Row({space: 14}){
			Image($r("app.media.icon_like"))
				.width(16)
			Text("自定义右侧")
		}
	}
  build() {
    Column({space: 14}) {
      IBestNavBar({
        title: "IBest-UI",
        leftLabel: "返回",
        isShowRight: true,
        rightIconName: "wap-nav",
        rightLabel: "更多"
      })
      IBestNavBar({
        title: "IBest-UI",
        leftBuilder: (): void => this.leftBuilder(),
        isShowRight: true,
        rightBuilder: (): void => this.rightBuilder()
      })
    }
  }
}

二级标题 ​

二级标题

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestNavBar({
      title: "IBest-UI",
      subTitle: "一套轻量、可定制化主题的鸿蒙UI组件库"
    })
  }
}

显示状态栏 ​

显示状态栏

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State navBarBgColor: string = "#3D8AF2"
  getRandomColor(): string {
    return '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')
  }
  build() {
    IBestNavBar({
      title: "点我修改颜色",
      titleColor: "#fff",
      leftIconColor: "#fff",
      navBarBgColor: this.navBarBgColor,
      isShowStatusBar: true,
      onTitleClick: () => {
        this.navBarBgColor = this.getRandomColor()
      }
    })
  }
}

API ​

@Props ​

参数说明类型默认值
navBarHeight导航栏高度number | string46
navBarBgColor导航栏背景颜色ResourceColor#fff
bgLinearGradient导航栏渐变背景色, 优先级高于navBarBgColorLinearGradient-
leftRightPadding导航栏左右内边距number16
isShowBorder是否显示下边框线booleantrue
title标题文字string''
titleColor标题文字颜色ResourceColor#323233
titleFontSize标题文字大小number | string16
titleIconName标题图标名称string''
titleIcon标题图标, 优先级大于titleIconNameResourceStr-
titleIconColor标题图标颜色ResourceColor#323233
titleIconSize标题图标大小number | string20
titleIconRadius标题图标圆角number | string0
titleFontWeight标题字重FontWeight600
subTitle副标题文字string''
subTitleColor副标题文字颜色ResourceColor#969799
subTitleFontSize副标题文字大小number | string12
isShowLeft是否显示左侧内容booleantrue
leftIconName左侧图标名称stringarrow-left
leftIcon自定义左侧图标, 优先级大于leftIconNamestring''
leftIconColor左侧图标颜色ResourceColor#323233
leftIconSize左侧图标大小number | string20
leftIconRadius左侧图标圆角number | string0
leftLabel左侧文字string''
leftLabelColor左侧文字颜色ResourceColor#323233
leftLabelFontSize左侧文字大小number | string16
isShowRight是否显示右侧booleanfalse
rightIconName右侧图标名称string''
rightIcon自定义右侧图标, 优先级大于rightIconNamestring''
rightIconColor右侧图标颜色ResourceColor#323233
rightIconSize右侧图标大小number | string20
rightIconRadius右侧图标圆角number | string0
rightLabel右侧文字string''
rightLabelColor右侧文字颜色ResourceColor#323233
rightLabelFontSize右侧文字大小number | string16
isShowStatusBar是否显示状态栏booleanfalse
statusBarBgColor状态栏背景色, 默认与导航栏背景色一致ResourceColor#fff
isKeepBgColorSame是否保持与导航栏背景色一致，默认为是，即状态栏背景色会跟随导航栏背景色变化booleantrue

Events ​

事件名说明回调参数
onLeftClick点击左侧内容区域回调-
onRightClick点击右侧内容区域回调-
onTitleClick点击标题区域回调-

插槽 ​

插槽名说明类型
leftBuilder自定义左侧内容CustomBuilder
rightBuilder自定义右侧内容CustomBuilder
titleBuilder自定义标题内容CustomBuilder