MiniX自绘渲染跨平台框架

# NavBar 导航栏

请扫码查看示例

# 介绍

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

# 引入

通过以下方式来引入组件

  1. 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
  2. 在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

通过设置 title 属性,表示当前显示的页面。

<element name="m-nav-bar" src="@/node_modules/mui-minix/src/nav-bar/index"></element>
<m-nav-bar title="标题" background-color="#ff0" @m-left-click="onLeftClick"></m-nav-bar>
1
2
export default {
  onLeftClick(){
    console.log('go back')
  }
}
1
2
3
4
5

# 副标题

通过设置 subtitle 属性,增加副标题。

<element name="m-nav-bar" src="@/node_modules/mui-minix/src/nav-bar/index"></element>
<m-nav-bar title="家电安装" subtitle="2台设备"></m-nav-bar>
1
2

# 右边显示文本

通过设置 right-text 属性, 控制右侧显示为文本。

<element name="m-nav-bar" src="@/node_modules/mui-minix/src/nav-bar/index"></element>
<m-nav-bar title="家电安装" subtitle="2台设备" right-text="选择" @m-right-click="onRightClick"></m-nav-bar>
1
2
export default {
  onRightClick(){
    console.log('select menu')
  }
}
1
2
3
4
5

# 右边显示图标

通过设置 right-icon 属性, 控制右侧显示为图标。

<element name="m-nav-bar" src="@/node_modules/mui-minix/src/nav-bar/index"></element>
<m-nav-bar title="hello navbar" subtitle="subtitle" right-icon="more-right" @m-right-click="onRightClick"></m-nav-bar>
1
2
export default {
  onRightClick(){
    console.log('select menu')
  }
}
1
2
3
4
5

# 使用插槽

可以通过插槽自定义导航栏两侧的内容。

<element name="m-nav-bar" src="@/node_modules/mui-minix/src/nav-bar/index"></element>
<m-nav-bar title="hello navbar"><text slot="right">更多</text></m-nav-bar>
1
2

# Api

# Prop

字段 说明 类型 默认值 是否必须
title 标题 string - 是
subtitle 副标题 string - 否
fixed 是否固定在顶部 boolean false 否
z-index z 轴排序 number 1030 是
border 是否显示下边框 boolean false 否
color 标题字体，副标题字体，左侧返回按钮颜色 string #000000 否
background-color 背景颜色 string #ffffff 否
right-icon 右侧显示图标的名称，与right-text互斥 string - 否
right-text 右侧显示文本，与right-icon互斥。不宜超过4个字 string - 否
use-default-back 左侧按钮是否使用默认的返回 boolean true 否
safe-area-inset-top 是否开启顶部安全区适配 boolean true 否

# Slots

当以上配置都不满足的时候，可以使用插槽来自定义组件。

名称 说明
left 自定义左侧区域内容。必须使用m-left-click事件
right 自定义右侧区域内容。无默认事件，可自行绑定事件
middle 自定义中间标题区域内容。无默认事件，可自行绑定事件

# Events

名称 说明 回调参数
m-left-click 左侧部分点击时触发 -
m-right-click 右侧部分点击时触发 -

WARNING

⚠️ 注意：点击左侧返回图标默认带有返回上一级的行为，m-left-click点击事件中不需要重复写返回的代码逻辑，否则会出现向上返回两级的问题。如需取消该默认行为，请设置use-default-back属性为 false