Cómo usar el Tabs.vue

El componente Tabs proporciona una interfaz de pestañas reutilizable y personalizable para tu aplicación Vue, utilizando Vuetify como base. Aquí te explico cómo integrarlo sin problemas en tus propios proyectos.

Uso

Props:

tabs (Objeto): Un objeto que representa los nombres de las pestañas que deseas mostrar. Este prop es obligatorio.
tabsNumber (Número): Determina la pestaña activa por índice en la carga inicial. Si no se proporciona, por defecto es 0 (la primera pestaña).

Eventos:

changeCurrentItem: Se emite cuando se hace clic en una pestaña. Devuelve el índice de la pestaña seleccionada.

Pasos de Integración:

Prepara tus datos:

Antes de integrar el componente, prepara los datos de las pestañas que deseas mostrar:

const myTabs = {
  tab1: "Tab Name 1",
  tab2: "Tab Name 2",
  // ... cualquier otra pestaña que desees
};

Opcionalmente, si quieres que una pestaña específica esté activa por defecto, determina su índice:

const defaultTabIndex = 1; // Esto hará que 'Tab Name 2' sea la pestaña activa por defecto

Incorpora el componente:

Ahora, puedes incluir el componente Tabs en tu plantilla:

<template>
  <Tabs
    :tabs="myTabs"
    :tabsNumber="defaultTabIndex"
    @changeCurrentItem="handleTabChange"
  ></Tabs>
</template>

Maneja los cambios de pestañas:

Para reaccionar a los cambios de pestañas, puedes configurar un método:

const handleTabChange = (index) => {
  // Lógica para cuando se hace clic en una pestaña. 'index' contendrá el índice de la pestaña seleccionada.
};

Personalización:

El estilo predeterminado utiliza colores predefinidos de hooks personalizados (graphiteOpacityColor y principalColor). Si deseas adaptar o extender el estilo del componente, es posible que necesites adentrarte en la plantilla del componente y ajustar las propiedades de estilo según tus requerimientos.

Recomendaciones:

Asegúrate de tener las estructuras de datos necesarias para las pestañas antes de integrar el componente Tabs.
Si hay efectos secundarios o comportamientos específicos que deseas desencadenar al cambiar de pestañas, manéjalos dentro del método handleTabChange o una función similar.
Este componente está diseñado con la escalabilidad en mente, por lo que es apto para varios casos de uso. ¡Ajusta y expande según sea necesario!