Sard Uniapp

Appearance

在新窗口打开⤴

Tabbar标签栏

介绍 ​

固定在页面底部的导航栏，用于切换不同的页面。

引入 ​

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是否显示外边框booleantrue
fixed 1.16+是否固定到页面底部booleanfalse
safe-area-inset-bottom 1.16+是否开启底部安全区适配booleanfalse

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);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao