用于在不同功能模块之间进行快速切换，位于页面底部
# 何时使用
import { HiTabbar } from 'hi-kits/tabbar'
1
# 基本用法
<h-row>
<h-col span="12">
<h-tabbar>
<h-tabbar-item>
<h-icon name="home" size="24">
<h-badge size="small" count="3"></h-badge>
</h-icon>
首页
</h-tabbar-item>
<h-tabbar-item>
<h-icon name="messages" size="24">
<h-badge badgeStyle="background: red;" dot></h-badge>
</h-icon>
消息中心
</h-tabbar-item>
<h-tabbar-item>
<h-icon name="store" size="24"></h-icon>
商城
</h-tabbar-item>
<h-tabbar-item>
<h-icon name="person" size="24">
<h-badge badgeStyle="background: red;" dot></h-badge>
</h-icon>
用户中心
</h-tabbar-item>
</h-tabbar>
</h-col>
</h-row>
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
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
Expand Copy Copy
# 仅图标
<h-row>
<h-col span="12">
<h-tabbar>
<h-tabbar-item>
<h-icon name="home" size="24">
<h-badge size="small" count="3"></h-badge>
</h-icon>
</h-tabbar-item>
<h-tabbar-item>
<h-icon name="messages" size="24">
<h-badge badgeStyle="background: red;" dot></h-badge>
</h-icon>
</h-tabbar-item>
<h-tabbar-item>
<h-icon name="store" size="24"></h-icon>
</h-tabbar-item>
<h-tabbar-item>
<h-icon name="person" size="24">
<h-badge badgeStyle="background: red;" dot></h-badge>
</h-icon>
</h-tabbar-item>
</h-tabbar>
</h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Expand Copy Copy
# 文字
<h-row>
<h-col span="12">
<h-tabbar>
<h-tabbar-item>
首页
</h-tabbar-item>
<h-tabbar-item>
消息中心
</h-tabbar-item>
<h-tabbar-item>
商城
</h-tabbar-item>
<h-tabbar-item>
用户中心
</h-tabbar-item>
</h-tabbar>
</h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy Copy
# 混合
<h-row>
<h-col span="12">
<h-tabbar>
<h-tabbar-item>
首页
</h-tabbar-item>
<h-tabbar-item>
<h-icon name="messages" size="24">
<h-badge badgeStyle="background: red;" dot></h-badge>
</h-icon>
</h-tabbar-item>
<h-tabbar-item>
<h-icon name="store" size="24"></h-icon>
商城
</h-tabbar-item>
<h-tabbar-item>
<h-button type="primary">用户中心</h-button>
</h-tabbar-item>
</h-tabbar>
</h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy