mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
106 lines
3.2 KiB
Plaintext
106 lines
3.2 KiB
Plaintext
<demo-block title="基础用法">
|
|
<van-tabbar
|
|
active="{{ active }}"
|
|
data-key="active"
|
|
custom-class="tabbar-position"
|
|
safe-area-inset-bottom="{{ false }}"
|
|
bind:change="onChange"
|
|
>
|
|
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
|
</van-tabbar>
|
|
</demo-block>
|
|
|
|
<demo-block title="通过名称匹配">
|
|
<van-tabbar
|
|
active="{{ active2 }}"
|
|
data-key="active2"
|
|
custom-class="tabbar-position"
|
|
safe-area-inset-bottom="{{ false }}"
|
|
bind:change="onChange"
|
|
>
|
|
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
|
|
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
|
|
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
|
|
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
|
|
</van-tabbar>
|
|
</demo-block>
|
|
|
|
<demo-block title="显示徽标">
|
|
<van-tabbar
|
|
active="{{ active3 }}"
|
|
data-key="active3"
|
|
custom-class="tabbar-position"
|
|
safe-area-inset-bottom="{{ false }}"
|
|
bind:change="onChange"
|
|
>
|
|
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
|
|
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
|
|
</van-tabbar>
|
|
</demo-block>
|
|
|
|
<demo-block title="自定义图标">
|
|
<van-tabbar
|
|
active="{{ active4 }}"
|
|
data-key="active4"
|
|
custom-class="tabbar-position"
|
|
safe-area-inset-bottom="{{ false }}"
|
|
bind:change="onChange"
|
|
>
|
|
<van-tabbar-item info="3">
|
|
<image
|
|
slot="icon"
|
|
src="{{ icon.normal }}"
|
|
mode="aspectFit"
|
|
style="width: 30px; height: 18px;"
|
|
/>
|
|
<image
|
|
slot="icon-active"
|
|
src="{{ icon.active }}"
|
|
mode="aspectFit"
|
|
style="width: 30px; height: 18px;"
|
|
/>
|
|
自定义
|
|
</van-tabbar-item>
|
|
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
|
</van-tabbar>
|
|
</demo-block>
|
|
|
|
<demo-block title="自定义颜色">
|
|
<van-tabbar
|
|
active="{{ active5 }}"
|
|
data-key="active5"
|
|
custom-class="tabbar-position"
|
|
active-color="#07c160"
|
|
inactive-color="#000"
|
|
safe-area-inset-bottom="{{ false }}"
|
|
bind:change="onChange"
|
|
>
|
|
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
|
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
|
</van-tabbar>
|
|
</demo-block>
|
|
|
|
|
|
<demo-block title="切换标签事件">
|
|
<van-tabbar
|
|
active="{{ active6 }}"
|
|
data-key="active6"
|
|
custom-class="tabbar-position"
|
|
safe-area-inset-bottom="{{ false }}"
|
|
bind:change="handleChange"
|
|
>
|
|
<van-tabbar-item icon="home-o">标签1</van-tabbar-item>
|
|
<van-tabbar-item icon="search">标签2</van-tabbar-item>
|
|
<van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
|
|
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
|
|
</van-tabbar>
|
|
</demo-block>
|