# Tab 标签页

请扫码查看示例

# 介绍

选项卡组件，用于在不同的内容区域之间进行切换。

# 引入

通过以下方式来引入组件

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

# 代码演示

# 基本用法

<element name="m-tab" src="@/node_modules/mui-minix/src/tab/index"></element>
<element name="m-tab-page" src="@/node_modules/mui-minix/src/tab-page/index"></element>
<m-tab class="h-300" headers="{{headers}}" @m-change="onChange">
  <m-tab-page class="b-brand f-j-c f-a-c">
    <text class="txt f-s-24 c-white">1</text>
  </m-tab-page>
  <m-tab-page class="b-success f-j-c f-a-c">
    <text class="txt f-s-24 c-white">2</text>
  </m-tab-page>
  <m-tab-page class="b-gray-offline f-j-c f-a-c">
    <text class="txt f-s-24 c-white">3</text>
  </m-tab-page>
  <m-tab-page class="b-warning f-j-c f-a-c">
    <text class="txt f-s-24 c-white">4</text>
  </m-tab-page>
</m-tab>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default {
  data(){
    return {
      headers:['page1','page2','page3','page4']
    }
  },
  onChange(e){
    console.log(`current selected page index: ${e.detail}`)
  }
}

1
2
3
4
5
6
7
8
9
10

.h-300{
  height:300px;
}

.f-a-c{
  align-items:center;
}

.f-j-c{
  justify-content: center;
}

.b-brand{
  background-color: #267aff;
}

.b-success{
  background-color: #25cf42;
}

.b-gray-offline{
  background-color: #7c879b;
}

.b-warning{
  background-color: #ff8225;
}

.txt{

}

.f-s-24{
  font-size: 24px;
}

.c-white{
  color: #ffffff;
}

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
33
34
35
36
37
38
39

# 水平布局

通过设置 position 属性, 可以控制头部的位置。支持 top left。默认为 top。

<element name="m-tab" src="@/node_modules/mui-minix/src/tab/index"></element>
<element name="m-tab-page" src="@/node_modules/mui-minix/src/tab-page/index"></element>
<m-tab position="left" class="h-300" headers="{{headers}}" @m-change="onChange">
  <m-tab-page class="b-brand f-j-c f-a-c">
    <text class="txt f-s-24 c-white">1</text>
  </m-tab-page>
  <m-tab-page class="b-success f-j-c f-a-c">
    <text class="txt f-s-24 c-white">2</text>
  </m-tab-page>
  <m-tab-page class="b-gray-offline f-j-c f-a-c">
    <text class="txt f-s-24 c-white">3</text>
  </m-tab-page>
  <m-tab-page class="b-warning f-j-c f-a-c">
    <text class="txt f-s-24 c-white">4</text>
  </m-tab-page>
</m-tab>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default {
  data(){
    return {
      headers:['page1','page2','page3','page4']
    }
  },
  onChange(e){
    console.log(`current selected page index: ${e.detail}`)
  }
}

1
2
3
4
5
6
7
8
9
10

.h-300{
  height:300px;
}

.f-a-c{
  align-items:center;
}

.f-j-c{
  justify-content: center;
}

.b-brand{
  background-color: #267aff;
}

.b-success{
  background-color: #25cf42;
}

.b-gray-offline{
  background-color: #7c879b;
}

.b-warning{
  background-color: #ff8225;
}

.txt{

}

.f-s-24{
  font-size: 24px;
}

.c-white{
  color: #ffffff;
}

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
33
34
35
36
37
38
39

# Api

# Prop

字段	说明	类型	默认值	是否必须
`value`	当前页面索引	`number`	`0`	`是`
`headers`	页面标题	`string[]`	`[]`	`是`
`position`	头部位置。可选值： `top` `left`	`string`	`top`	`否`
`duration`	页面切换时,动画时间	`number`	`360`	`否`
`line-color`	头部线条颜色	`string`	`#000000`	`否`
`shrink`	是否开启左侧收缩布局	`boolean`	`false`	`否`

# Events

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