MiniX自绘渲染跨平台框架

# TabBar 标签栏

请扫码查看示例

# 介绍

底部导航栏，用于在不同页面之间进行切换。

# 引入

通过以下方式来引入组件

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

# 代码演示

# 基本用法

<element name="m-tab-bar" src="@/node_modules/mui-minix/src/tab-bar/index"></element>
<m-tab-bar value="{{value}}" items="{{items}}" @m-change="onActiveItem"></m-tab-bar>
1
2
export default {
  data(){
    return {
      value: 0,
      items:[
        {
          icon:'star',
          activeIcon:'star-fill',
          text:'标签'
        },
        {
          icon:'tag',
          activeIcon:'tag-fill',
          text:'标签'
        },
        {
          icon:'demo',
          activeIcon:'demo-fill',
          text:'标签'
        },
        {
          icon:'my',
          activeIcon:'my-fill',
          text:'标签'
        },
      ]
    }
  },
  onActiveItem(e){
    this.value = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 自定义图标大小

通过设置 icon-size 属性,可以控制图标的尺寸大小。

<element name="m-tab-bar" src="@/node_modules/mui-minix/src/tab-bar/index"></element>
<m-tab-bar icon-size="{{36}}" value="{{value}}" items="{{items}}" @m-change="onActiveItem"></m-tab-bar>
1
2
export default {
  data(){
    return {
      value: 0,
      items:[
        {
          icon:'star',
          activeIcon:'star-fill',
          text:'标签'
        },
        {
          icon:'tag',
          activeIcon:'tag-fill',
          text:'标签'
        },
        {
          icon:'demo',
          activeIcon:'demo-fill',
          text:'标签'
        },
        {
          icon:'my',
          activeIcon:'my-fill',
          text:'标签'
        },
      ]
    }
  },
  onActiveItem(e){
    this.value = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 自定义文本大小

通过设置 text-size 属性,可以控制文本的字体大小。

<element name="m-tab-bar" src="@/node_modules/mui-minix/src/tab-bar/index"></element>
<m-tab-bar text-size="{{16}}" value="{{value}}" items="{{items}}" @m-change="onActiveItem"></m-tab-bar>
1
2
export default {
  data(){
    return {
      value: 0,
      items:[
        {
          icon:'star',
          activeIcon:'star-fill',
          text:'标签'
        },
        {
          icon:'tag',
          activeIcon:'tag-fill',
          text:'标签'
        },
        {
          icon:'demo',
          activeIcon:'demo-fill',
          text:'标签'
        },
        {
          icon:'my',
          activeIcon:'my-fill',
          text:'标签'
        },
      ]
    }
  },
  onActiveItem(e){
    this.value = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 自定义文本颜色

通过设置 color 属性,可以控制默认文本的颜色。 通过设置 active-color 属性, 可以控制激活文本的颜色。

<element name="m-tab-bar" src="@/node_modules/mui-minix/src/tab-bar/index"></element>
<m-tab-bar color="#267aff" active-color="#00cbb8" value="{{value}}" items="{{items}}" @m-change="onActiveItem"></m-tab-bar>
1
2
export default {
  data(){
    return {
      value: 0,
      items:[
        {
          icon:'star',
          activeIcon:'star-fill',
          text:'标签'
        },
        {
          icon:'search',
          activeIcon:'child',
          text:'标签'
        },
        {
          icon:'air',
          activeIcon:'audio',
          text:'标签'
        },
        {
          icon:'info',
          activeIcon:'leaf',
          text:'标签'
        },
      ]
    }
  },
  onActiveItem(e){
    this.value = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 显示右上角红点

通过设置 tab-bar-item 的 dot 属性，可以在该项右上角显示红点。

<element name="m-tab-bar" src="@/node_modules/mui-minix/src/tab-bar/index"></element>
<m-tab-bar color="#267aff" active-color="#00cbb8" value="{{value}}" items="{{items}}" @m-change="onActiveItem"></m-tab-bar>
1
2
export default {
  data(){
    return {
      value: 0,
      items:[
        {
          icon:'star',
          activeIcon:'star-fill',
          text:'标签',
          dot: true
        },
        {
          icon:'demo',
          activeIcon:'demo-fill',
          text:'标签'
        },
        {
          icon:'my',
          activeIcon:'my-fill',
          text:'标签'
        },
      ]
    }
  },
  onActiveItem(e){
    this.value = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 适配安全区

通过设置 tab-bar 的 safe-area-inset-bottom 或者 fixed 属性，可以适配底部安全区。

<element name="m-tab-bar" src="@/node_modules/mui-minix/src/tab-bar/index"></element>
<!-- 方式一：设置safe-area-inset-bottom属性 -->
<m-tab-bar value="{{value}}" items="{{items}}" safe-area-inset-bottom="{{true}}"></m-tab-bar>

<!-- 方式二：设置fixed属性。固定在底部时，默认开启底部安全区适配 -->
<m-tab-bar value="{{value}}" items="{{items}}" fixed="{{true}}"></m-tab-bar>
1
2
3
4
5
6
export default {
  data(){
    return {
      value: 0,
      items:[
        {
          icon:'star',
          activeIcon:'star-fill',
          text:'标签'
        },
        {
          icon:'demo',
          activeIcon:'demo-fill',
          text:'标签'
        },
        {
          icon:'my',
          activeIcon:'my-fill',
          text:'标签'
        },
      ]
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Api

# Prop

字段 说明 类型 默认值 是否必须
value 当前选中项 number 0 是
fixed 是否固定在底部 boolean false 否
safe-area-inset-bottom 是否开启底部安全区适配，设置 fixed 时默认开启 boolean false 否
padding-top 顶部内留白 number 10 否
padding-bottom 底部内留白 number 10 否
border 是否显示上边框 boolean false 否
background-color 背景颜色 string #ffffff 否
z-index z 轴排序 number 1036 否
items 导航项。 TabBarItem[] [] 是
icon-size 图标大小 number 28 否
color 文本默认颜色 string #8a8a8f 否
active-color 选中文本颜色 string #000000 否
text-size 文本字体大小 number 12 否
text-margin-top 文本和图标的间距 number 0 否
top-radius 顶部左右圆角 number 0 否
is-design 用于判断是否自定义内容，若为true，items 内容将不展示 boolean false 否

# Slots

当以上配置都不满足的时候，可以使用自定义默认插槽来自定义刷新状态。

名称 说明
status 定义刷新状态，前提: is-refresh-design="true"
default 默认插槽，用于展示需要刷新的列表

# Events

名称 说明 回调参数
m-change 选中项改变时触发 index:number 选中项索引

# TabBarItem

名称 类型 说明
icon string 默认图标。支持图片链接
activeIcon string 选中时图标。支持图片链接
text string 文本
dot boolean 是否显示右上角红点