# 卡片-按钮（Card-Button）
当设备只需进行分段档位/级别操作时，推荐使用本控件
交互原则
数值或程度可分段；数值变化精度相对较低；仅支持单选，不可同时多选项操作
# 示例
<template>
<div class="wrapper">
<dof-minibar title="5.3卡片-按钮"></dof-minibar>
<scroller>
<div class="title-box">
<text class="title-text">基础样式</text>
</div>
<div class="normal-box">
<dof-diamond-tab :tabData="tabData" :active="active"></dof-diamond-tab>
<dof-diamond-tab :tabData="tabData2" :active="active2" style="margin-top: 60px"></dof-diamond-tab>
<dof-diamond-tab :tabData="tabData3" :active="active3" style="margin-top: 60px"></dof-diamond-tab>
</div>
<div class="title-box">
<text class="title-text">示例</text>
</div>
<div class="card-box">
<dof-card class="m-b-16">
<div class="slider-text-box">
<text class="slider-text">温度</text>
<text class="divider">|</text>
<text class="slider-text">{{ value }}℃</text>
</div>
<dof-diamond-tab
:tabData="tabData"
:active="active"
:isFlexible="true"
:bgColor="'#1c1e21'"
:itemHeight="80"
></dof-diamond-tab>
</dof-card>
<dof-card class="m-b-16">
<div class="slider-text-box">
<text class="slider-text">温度</text>
<text class="divider">|</text>
<text class="slider-text">{{ value }}℃</text>
</div>
<dof-diamond-tab
:tabData="tabData2"
:active="active2"
:isFlexible="true"
:bgColor="'#1c1e21'"
:itemHeight="80"
></dof-diamond-tab>
</dof-card>
<dof-card class="m-b-16">
<div class="slider-text-box">
<text class="slider-text">温度</text>
<text class="divider">|</text>
<text class="slider-text">{{ value }}℃</text>
</div>
<dof-diamond-tab
:tabData="tabData3"
:active="active3"
:isFlexible="true"
:bgColor="'#1c1e21'"
:itemHeight="80"
></dof-diamond-tab>
</dof-card>
</div>
</scroller>
</div>
</template>
<style scoped>
.wrapper {
background-color: #f9f9f9;
}
.m-b-16 {
margin-bottom: 16px;
}
.icon-btn-box {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.m-t-40 {
margin-top: 40px;
}
.title-box {
padding: 32px;
background-color: #e5e5e8;
}
.title-text {
font-family: PingFangSC-Medium;
font-size: 36px;
color: #000000;
font-weight: 500;
}
.normal-box {
padding: 27px 0;
}
.slider-text-box {
margin-bottom: 30px;
display: flex;
flex-direction: row;
align-items: center;
}
.slider-text {
font-family: COLMO-Mono-Regular;
font-size: 32px;
color: rgba(255, 255, 255, 0.8);
}
.divider {
font-family: COLMO-Mono-Regular;
font-size: 28px;
color: rgba(255, 255, 255, 0.4);
margin: 0 14px;
}
.card-box {
padding: 16px 32px;
}
@media screen and (weex-theme: colmo) {
.wrapper {
background-color: #151617;
}
}
</style>
<script>
import { DofMinibar, DofCard, DofDiamondTab } from 'dolphin-weex-ui'
export default {
components: { DofMinibar, DofCard, DofDiamondTab },
data: () => ({
tabData: [{ label: '上桶' }, { label: '下桶' }],
tabData2: [{ label: '上下风' }, { label: '左右风' }, { label: '无风感' }],
tabData3: [{ label: '1档' }, { label: '2档' }, { label: '3档' }, { label: '4档' }],
active: 0,
active2: 1,
active3: 2,
value: 30
}),
computed: {},
created() {},
methods: {}
}
</script>
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| tabData | Array | Y | [] | 标签数据，label字段为显示文案 |
| active | Number | N | null | 标签初始选中项 |
| bgColor | String | N | #000 | 背景颜色 |
| borderColor | String | N | rgba(61, 61, 66, 1) | 边框颜色 |
| activeBorderColor | String | N | #b35336 | 选中态边框颜色 |
| touchColor | String | N | #1A1A1C | 点击未松开背景颜色 |
| textColor | String | N | #71717A | 字体颜色 |
| activeTextColor | String | N | #FFFFFF | 选中态字体颜色 |
| textFontSize | String | N | 24px | 字体大小 |
| itemHeight | Number | N | 64 | 标签高度 |
| isFlexible | Boolean | false | false | 是否撑开 |
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| label | String | N | `` | 标签显示内容 |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
tabActiveChange | 选中态改变事件， 返回参数为：当前选中项index | index |
点我扫二维码 查看demo