# 3.4 菱形标签（Diamond Tab）
菱形标签栏，用于让用户在不同的视图中进行切换。
# 组件设计
1、标签栏建议支持 2 至 5 个标签项。
2、默认情况下，2、3 个标签时最多显示 4 个字；超过 3 个标签时最多显示 2 个字，超出部分以省略号显示。可通过 max-len 自定义最大显示字数。
3、当前选中的标签边框和文本高亮；按下标签时显示点击态背景色。
# 应用示例
# 实例
# 基础用法
<template>
<div class="box">
<dof-minibar title="dof-diamond-tab" />
<div class="show-item">
<dof-diamond-tab
:tab-data="tabData"
:active="active"
:text-color="textColor"
:active-text-color="activeTextColor"
:text-font-size="textFontSize"
:bg-color="bgColor"
:border-color="borderColor"
:active-border-color="activeBorderColor"
:touch-color="touchColor"
@tabActiveChange="onTabActiveChange"
/>
<dof-diamond-tab
:tab-data="tabData2"
:active="active2"
:bg-color="bgColor"
:border-color="borderColor"
:active-border-color="activeBorderColor"
style="margin-top: 60px"
/>
<dof-diamond-tab
:tab-data="tabData3"
:active="active3"
text-font-size="30px"
:bg-color="bgColor"
:border-color="borderColor"
:active-border-color="activeBorderColor"
:item-height="80"
style="margin-top: 60px"
/>
</div>
</div>
</template>
<script>
import { DofDiamondTab, DofMinibar } from 'dolphin-weex-ui'
export default {
components: { DofDiamondTab, DofMinibar },
data() {
return {
tabData: [{ label: '上桶' }, { label: '下桶' }],
tabData2: [{ label: '上下风' }, { label: '左右风' }, { label: '无风感' }],
tabData3: [{ label: '1档' }, { label: '2档' }, { label: '3档' }, { label: '4档' }],
active: 0,
active2: 1,
active3: 2,
bgColor: '#000000',
borderColor: 'rgba(61, 61, 66, 1)',
activeBorderColor: '#b35336',
touchColor: '#1A1A1C',
textColor: '#71717A',
activeTextColor: '#FFFFFF',
textFontSize: '24px',
}
},
methods: {
onTabActiveChange(index) {
console.log('当前选中项：', index)
},
},
}
</script>
<style scoped>
.box,
.show-item {
background-color: #000000;
}
.show-item {
padding: 30px 0;
}
</style>
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
tab-data | Array | N | [] | 标签数据；每项可为字符串或包含 label 字段的对象 |
active | Number | N | null | 初始选中项索引 |
bg-color | String | N | '#151617' | 标签背景颜色 |
active-border-color | String | N | '#b35336' | 选中态边框颜色 |
text-font-size | String | N | '28px' | 标签文字大小 |
text-color | String | N | "rgba(255,255,255,0.40)" | 非选中态文字颜色 |
active-text-color | String | N | 'rgba(255, 255, 255, 0.8)' | 选中态文字颜色 |
border-color | String | N | 'rgba(61, 61, 66, 1)' | 非选中态边框颜色 |
touch-color | String | N | '#2d2e2f' | 按下时背景颜色 |
item-height | Number | N | 64 | 标签高度，单位为 px |
max-len | Number | N | 0 | 标签最大显示字数；0 使用组件默认规则 |
is-flexible | Boolean | N | false | 是否让标签项自动撑满容器宽度 |
need-dark-mode | Boolean | N | false | 是否启用 M-dark/T-dark 内置暗黑适配 |
isRTL | Boolean | N | false | 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10 |
RTL 下标签、首尾圆角及斜线装饰镜像，选中索引仍对应原 tab-data 数组。
设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。
# tab-data 数据项
| 字段 | Type | Required | Description |
|---|---|---|---|
label | String | Y | 标签显示内容 |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
tabActiveChange | 选中项变化时触发 | 当前选中项索引 index |