vue-tabBar-custom

This is a tabbar component customized based on the Vue3+Vite project, which can customize icons, paths, names, and can be freely combined. It is easy to use, convenient, and fast.

Project install

npm i vue-tab-bar-custom

defaultTabsModule.js model

export const defaultTabs = [
  {
    name: 'Home-1',
    icon: 'fa-solid fa-bar-home',
    path: '/airplaneGame',
  },
  {
    name: 'Profile',
    icon: 'fa-solid fa-bar-profiler',
    path: '/profile',
  },
  { name: 'Settings', icon: 'fa-solid fa-tab-settings', path: '/settings' },
  { name: 'About', icon: 'fa-solid fa-tab-about', path: '/about' },
  { name: 'Contact', icon: 'fa-solid fa-tab-contact', path: '/contact' },
  
];

Example of standalone use

<template>
  <div>
    <TabBarNavMask :tabs="defaultTabs" />
  </div>
</template>
<script setup>


import { defaultTabs } from "./defaultTabsModule.js";
import TabBarNavMask from 'vue-tab-bar-custom/index.js'

Tip

  如：icon: 'fa-solid fa-bar-home', 其中 fa-solid fa-bar-home 自定义样式图标名称，你可以根据需要自行替换。

示例