# Tabs
标签页
案例
import { defineComponent } from "vue";
import { Tabs, Typography } from "sl-vue2-template";
const { H5 } = Typography;
export default defineComponent({
data() {
return {
active: 1,
};
},
render() {
return (
<div>
<Tabs active={this.active}>
<Tabs.Pane
mark={1}
tab="Pane1"
icon={{
name: "Add Circle",
}}
>
Tabs.Pane1
</Tabs.Pane>
<Tabs.Pane
mark={2}
tab="Pane222222222222222"
icon={{
name: "Add Circle",
placement: "left",
}}
>
<H5>Test</H5>
Tabs.Pane2222222
</Tabs.Pane>
<Tabs.Pane
mark={3}
tab="Pane3333333333333333333333333333333333333333"
icon={{
name: "Arrow Down Filling",
placement: "left",
color: "blue",
size: "32",
}}
>
Tabs.Pane33333333333333333
</Tabs.Pane>
</Tabs>
<Tabs active="2" animation={false}>
<Tabs.Pane mark="1" tab="Pane1">
Tabs.Pane1
</Tabs.Pane>
<Tabs.Pane mark="2" tab="Pane222222222222222" disabled>
Tabs.Pane2222222
</Tabs.Pane>
<Tabs.Pane
mark="3"
tab="Pane3333333333333333333333333333333333333333"
>
Tabs.Pane33333333333333333
</Tabs.Pane>
<Tabs.Pane mark="4" tab="Tabs.Pane4">
Tabs.Pane4
</Tabs.Pane>
</Tabs>
</div>
);
},
});
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
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
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| active | 默认显示的 tab 标识（mark） | String|Number | 否 | true | -- |
| justify | flex 布局下的水平排列方式 | 'start' | 'end' | 'center' | 'around' | 'between' | 'evenly' | 否 | -- | -- |
| animation | 动画效果 | Boolean | 否 | true | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# Tabs.Pane 标签插槽
标签插槽
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| mark | 标识 | String|Number | 是 | -- | -- |
| tab | 标签名 | String | 是 | -- | -- |
| disabled | 禁用 | Boolean | 否 | false | -- |
| icon | 图标 | 查看 icon 属性 | 否 | -- | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# icon 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| name | 图标名 | icon 名 | 是 | -- | -- |
| placement | 箭头位置 | "right" | "left" | 否 | "right" | -- |
| size | 图标大小 | '10' | '12' | '14' | '16' | '18' | '20' | '22' | '24' | '28' | '32' | '36' | '40' | '48' | '56' | '64' | 否 | '16' | -- |
| color | 图标颜色 | 颜色名 | 否 | -- | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |