Componente TabBar

El componente TabBar proporciona una barra de pestañas interactiva que permite al usuario seleccionar entre diferentes secciones o pestañas.

Uso en Componentes

Utilizando en un Componente

Puedes integrar el componente TabBar en tus componentes de la siguiente manera:

<template>
  <div>
    <TabBar
      :tabs="tabs"
      :defaultTab="defaultTab"
      @onChange="handleTabChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tabs = ref<any>([
  {
    title: "Vehiculo",
    bgColor: "c-bg-blanco",
    textColor: "c-text-gray-light",
    currentTabBgColor: "c-bg-violeta",
    currentTabTextColor: "c-text-blanco",
    id: onlyRead.value ? "leer-vehiculo": "nuevo-vehiculo",
    name: onlyRead.value ? { name: "leer-vehiculo"} : { name: "nuevo-vehiculo" },
  },
  {
    title: "Denuncia",
    bgColor: "c-bg-blanco",
    textColor: "c-text-gray-light",
    currentTabBgColor: "c-bg-violeta",
    currentTabTextColor: "c-text-blanco",
    id: onlyRead.value ? "leer-denuncia": "nuevo-denuncia",
    name: onlyRead.value ? { name: "leer-denuncia"} : { name: "nuevo-denuncia" },
  },
  {
    title: "Archivos",
    bgColor: "c-bg-blanco",
    textColor: "c-text-gray-light",
    currentTabBgColor: "c-bg-violeta",
    currentTabTextColor: "c-text-blanco",
    id: onlyRead.value ? "leer-archivo": "nuevo-archivo",
    name: onlyRead.value ? { name: "leer-archivo"} : { name: "nuevo-archivo" },
  },
]);
const currentTab = ref<string>("nuevo-vehiculo");
const defaultTab = ref<string>("");

const handleTabChange = (item: { index: number; tab: ItemTab }) => {
   if (item.tab.name) router.push(item.tab.name);
    if (typeof item.tab.id === "string") currentTab.value = item.tab.id;
};

onMounted(() => {
  if (route.name !== currentTab.value && route.name) {
    defaultTab.value = route.name.toString();
  }
});

watch(
  () => route.path,
  async (newPath) => {
    const path = newPath.split("/")[2];
    defaultTab.value = route.name?.toString() || '';
  }
);

onMounted(async () => {
  const path = route.path.split("/")[2];
});

</script>

Propiedades

Propiedad	Tipo	Descripción
tabs	Array -> itemTab	Lista de objetos de pestañas.
defaultTab	String	Pestaña predeterminada seleccionada.

Eventos

Evento	Parámetros	Descripción
onChange	item: { index, tab }	Se emite cuando cambia la pestaña seleccionada.