IBest-UI

Appearance

NavBar 导航栏 ​

介绍 ​

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

TIP

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

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      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(){
      IBestNavBar({
        title: "IBest-UI",
        titleTextAlign: "left"
      })
    }
  }
}

自定义显示区域 ​

自定义显示区域

点我查看代码
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() {
    Column(){
      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,
        rightIcon: "wap-nav",
        rightLabel: "更多"
      })
      IBestNavBar({
        title: "IBest-UI",
        leftBuilder: (): void => this.leftBuilder(),
        isShowRight: true,
        rightBuilder: (): void => this.rightBuilder()
      })
    }
  }
}

二级标题 ​

二级标题

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      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() {
    Column(){
      IBestNavBar({
        title: "点我修改颜色",
        titleColor: "#fff",
        leftIconColor: "#fff",
        navBarBgColor: this.navBarBgColor,
        isShowStatusBar: true,
        onTitleClick: () => {
          this.navBarBgColor = this.getRandomColor()
        }
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
navBarHeight导航栏高度string | number46
navBarBgColor导航栏背景颜色ResourceColor#fff
bgLinearGradient导航栏渐变背景色, 优先级高于navBarBgColorLinearGradient-
leftRightPadding导航栏左右内边距number16
isShowBorder是否显示下边框线booleantrue
title标题文字ResourceStr''
titleColor标题文字颜色ResourceColor#323233
titleFontSize标题文字大小string | number16
titleIcon标题图标ResourceStr''
titleIconColor标题图标颜色ResourceColor#323233
titleIconSize标题图标大小string | number20
titleIconRadius标题图标圆角string | number0
titleFontWeight标题字重FontWeight600
subTitle副标题文字ResourceStr''
subTitleColor副标题文字颜色ResourceColor#969799
subTitleFontSize副标题文字大小string | number12
isShowLeft是否显示左侧内容booleantrue
leftIcon自定义左侧图标ResourceStrarrow-left
leftIconColor左侧图标颜色ResourceColor#323233
leftIconSize左侧图标大小string | number20
leftIconRadius左侧图标圆角string | number0
leftLabel左侧文字ResourceStr''
leftLabelColor左侧文字颜色ResourceColor#323233
leftLabelFontSize左侧文字大小string | number16
isShowRight是否显示右侧booleanfalse
rightIcon自定义右侧图标ResourceStr''
rightIconColor右侧图标颜色ResourceColor#323233
rightIconSize右侧图标大小string | number20
rightIconRadius右侧图标圆角string | number0
rightLabel右侧文字ResourceStr''
rightLabelColor右侧文字颜色ResourceColor#323233
rightLabelFontSize右侧文字大小string | number16
isShowStatusBar是否显示状态栏booleanfalse
statusBarBgColor状态栏背景色, 默认与导航栏背景色一致ResourceColor#fff
isKeepBgColorSame是否保持与导航栏背景色一致，默认为是，即状态栏背景色会跟随导航栏背景色变化booleantrue
titleTextAlign标题文字对齐方式, 可选值 left centerstringcenter
expandSafeAreaType导航栏扩展区域类型SafeAreaType[][SafeAreaType.SYSTEM, SafeAreaType.CUTOUT]

Events ​

事件名说明事件类型
onLeftClick点击左侧内容区域回调() => void
onRightClick点击右侧内容区域回调() => void
onTitleClick点击标题区域回调() => void

插槽 ​

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

主题定制 ​

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

名称描述默认值
ibest_navbar_background标题栏背景色#fff
ibest_navbar_sub_title_text_color副标题文字颜色#969799
ibest_navbar_border_color边框颜色#ebedf0