介绍
固定在页面底部的导航栏,用于切换不同的页面。
引入
js
import Tabbar from 'sard-uniapp/components/tabbar/tabbar.vue'
import TabbarItem from 'sard-uniapp/components/tabbar-item/tabbar-item.vue'代码演示
基础使用
使用 current 属性控制选中的标签。
vue
<template>
<sar-tabbar v-model:current="current">
<sar-tabbar-item
:name="0"
icon="house-door-fill"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
icon="cart-fill"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item
:name="2"
icon="chat-dots-fill"
icon-family="demo-icons"
text="消息"
/>
<sar-tabbar-item
:name="3"
icon="person-fill"
icon-family="demo-icons"
text="我的"
/>
</sar-tabbar>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const current = ref(0)
</script>vue
<template>
<sar-tabbar v-model:current="current">
<sar-tabbar-item
:name="0"
icon="house-door-fill"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
icon="cart-fill"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item
:name="2"
icon="chat-dots-fill"
icon-family="demo-icons"
text="消息"
/>
<sar-tabbar-item
:name="3"
icon="person-fill"
icon-family="demo-icons"
text="我的"
/>
</sar-tabbar>
</template>
<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
</script>自定义图标
通过 icon 属性自定义图标。
vue
<template>
<sar-tabbar v-model:current="current">
<sar-tabbar-item
:name="0"
:icon="current === 0 ? 'house-door-fill' : 'house-door'"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
:icon="current === 1 ? 'cart-fill' : 'cart'"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item
:name="2"
:icon="current === 2 ? 'chat-dots-fill' : 'chat-dots'"
icon-family="demo-icons"
text="消息"
/>
<sar-tabbar-item
:name="3"
:icon="current === 3 ? 'person-fill' : 'person'"
icon-family="demo-icons"
text="我的"
/>
</sar-tabbar>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const current = ref(0)
</script>vue
<template>
<sar-tabbar v-model:current="current">
<sar-tabbar-item
:name="0"
:icon="current === 0 ? 'house-door-fill' : 'house-door'"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
:icon="current === 1 ? 'cart-fill' : 'cart'"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item
:name="2"
:icon="current === 2 ? 'chat-dots-fill' : 'chat-dots'"
icon-family="demo-icons"
text="消息"
/>
<sar-tabbar-item
:name="3"
:icon="current === 3 ? 'person-fill' : 'person'"
icon-family="demo-icons"
text="我的"
/>
</sar-tabbar>
</template>
<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
</script>自定义颜色
使用 color 属性设置未选中标签的颜色。 使用 activeColor 属性设置选中标签的颜色。
vue
<template>
<sar-tabbar v-model:current="current" active-color="var(--sar-red)">
<sar-tabbar-item
:name="0"
icon="house-door-fill"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
icon="cart-fill"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item
:name="2"
icon="chat-dots-fill"
icon-family="demo-icons"
text="消息"
/>
<sar-tabbar-item
:name="3"
icon="person-fill"
icon-family="demo-icons"
text="我的"
/>
</sar-tabbar>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const current = ref(0)
</script>vue
<template>
<sar-tabbar v-model:current="current" active-color="var(--sar-red)">
<sar-tabbar-item
:name="0"
icon="house-door-fill"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
icon="cart-fill"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item
:name="2"
icon="chat-dots-fill"
icon-family="demo-icons"
text="消息"
/>
<sar-tabbar-item
:name="3"
icon="person-fill"
icon-family="demo-icons"
text="我的"
/>
</sar-tabbar>
</template>
<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
</script>徽标
使用 badge 属性设置徽标。
vue
<template>
<sar-tabbar>
<sar-tabbar-item
:name="0"
icon="house-door-fill"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
icon="cart-fill"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item
:name="2"
icon="chat-dots-fill"
icon-family="demo-icons"
:badge="5"
text="消息"
/>
<sar-tabbar-item
:name="3"
icon="person-fill"
icon-family="demo-icons"
dot
text="我的"
/>
</sar-tabbar>
</template>中间鼓起
通过覆盖默认插槽自定义标签结构和样式。
vue
<template>
<sar-tabbar v-model:current="current">
<sar-tabbar-item
:name="0"
icon="house-door-fill"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
icon="cart-fill"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item @click="toast('点击了添加按钮')">
<view class="bulge">
<view class="cover"></view>
<view class="button">
<sar-icon name="plus" size="96rpx" />
</view>
</view>
<text class="text">添加</text>
</sar-tabbar-item>
<sar-tabbar-item
:name="2"
icon="chat-dots-fill"
icon-family="demo-icons"
text="消息"
/>
<sar-tabbar-item
:name="3"
icon="person-fill"
icon-family="demo-icons"
text="我的"
/>
</sar-tabbar>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { toast } from 'sard-uniapp'
const current = ref(0)
</script>
<style lang="scss" scoped>
.bulge {
position: absolute;
top: 0;
transform-origin: top center;
transform: scale(0.5) translateY(-33%);
display: flex;
justify-content: center;
align-items: center;
width: 192rpx;
height: 192rpx;
border-radius: 50%;
background-color: var(--sar-tabbar-bg);
box-shadow: inset 0 0 0 1px var(--sar-border-color);
&:active {
opacity: 0.8;
}
}
.cover {
position: absolute;
top: 33%;
width: 100%;
height: 70%;
transform: translateY(1px);
background-color: var(--sar-tabbar-bg);
}
.button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 152rpx;
height: 152rpx;
border-radius: 50%;
background-color: var(--sar-primary);
color: var(--sar-white);
}
.text {
position: relative;
margin-top: auto;
margin-bottom: 10rpx;
}
</style>vue
<template>
<sar-tabbar v-model:current="current">
<sar-tabbar-item
:name="0"
icon="house-door-fill"
icon-family="demo-icons"
text="首页"
/>
<sar-tabbar-item
:name="1"
icon="cart-fill"
icon-family="demo-icons"
text="购物车"
/>
<sar-tabbar-item @click="toast('点击了添加按钮')">
<view class="bulge">
<view class="cover"></view>
<view class="button">
<sar-icon name="plus" size="96rpx" />
</view>
</view>
<text class="text">添加</text>
</sar-tabbar-item>
<sar-tabbar-item
:name="2"
icon="chat-dots-fill"
icon-family="demo-icons"
text="消息"
/>
<sar-tabbar-item
:name="3"
icon="person-fill"
icon-family="demo-icons"
text="我的"
/>
</sar-tabbar>
</template>
<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
</script>
<style lang="scss" scoped>
.bulge {
position: absolute;
top: 0;
transform-origin: top center;
transform: scale(0.5) translateY(-33%);
display: flex;
justify-content: center;
align-items: center;
width: 192rpx;
height: 192rpx;
border-radius: 50%;
background-color: var(--sar-tabbar-bg);
box-shadow: inset 0 0 0 1px var(--sar-border-color);
&:active {
opacity: 0.8;
}
}
.cover {
position: absolute;
top: 33%;
width: 100%;
height: 70%;
transform: translateY(1px);
background-color: var(--sar-tabbar-bg);
}
.button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 152rpx;
height: 152rpx;
border-radius: 50%;
background-color: var(--sar-primary);
color: var(--sar-white);
}
.text {
position: relative;
margin-top: auto;
margin-bottom: 10rpx;
}
</style>API
TabbarProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| current (v-model) | 当前选中标签的 name 属性 | number | string | - |
| color | 未选中标签的颜色 | string | - |
| active-color | 选中标签的颜色 | string | - |
| bordered | 是否显示外边框 | boolean | true |
| fixed 1.16+ | 是否固定到页面底部 | boolean | false |
| safe-area-inset-bottom 1.16+ | 是否开启底部安全区适配 | boolean | false |
TabbarSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义默认内容 | - |
TabbarEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:current | 切换标签时触发 | (name: number | string) => void |
| change 1.12+ | 切换标签时触发 | (name: number | string) => void |
TabbarItemProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| name | 标签唯一标识符 | string | number | - |
| text | 要显示的标签文本 | string | - |
| icon | 图标名称 | string | - |
| icon-family | 图标字体 | string | - |
| icon-size | 图标大小 | string | - |
| badge | 显示的徽标值 | number | string | - |
| dot | 是否显示小红点 | boolean | - |
TabbarItemSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义文本内容 | - |
| icon | 自定义图标 | {active: boolean} |
TabbarItemEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| click | 点击标签时触发 | (event: any) => void |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-tabbar-z-index: 999;
--sar-tabbar-height: 100rpx;
--sar-tabbar-border-color: var(--sar-border-color);
--sar-tabbar-bg: var(--sar-emphasis-bg);
--sar-tabbar-color: var(--sar-secondary-color);
--sar-tabbar-item-ative-color: var(--sar-primary);
--sar-tabbar-item-icon-margin-bottom: 8rpx;
--sar-tabbar-item-icon-font-size: 40rpx;
--sar-tabbar-item-icon-line-height: var(--sar-leading-none);
--sar-tabbar-item-text-font-size: var(--sar-text-sm);
--sar-tabbar-item-text-line-height: var(--sar-leading-tight);
}