Inicio
NexoPOS

ns-tabs

Los componentes `ns-tabs` y `ns-tabs-item` trabajan juntos para crear una interfaz de pestañas en NexoPOS. El componente `ns-tabs` actúa como contenedor que gestiona el estado de las pestañas y la navegación, mientras que los componentes `ns-tabs-item` representan el contenido de cada pestaña.

Descripción general del componente

ns-tabs (componente principal)

El componente `ns-tabs` proporciona el encabezado de navegación por pestañas y gestiona el estado activo de las pestañas secundarias.

ns-tabs-item (componente hijo)  

El componente `ns-tabs-item` representa el contenido individual de una pestaña que se muestra u oculta según la pestaña activa.

Uso básico

Estructura de pestañas simple


<template>
  <ns-tabs :active="activeTab" @active="handleTabChange">
    <ns-tabs-item 
      :label="__('First Tab')" 
      identifier="tab1">
      <p>Content for the first tab</p>
    </ns-tabs-item>
    
    <ns-tabs-item 
      :label="__('Second Tab')" 
      identifier="tab2">
      <p>Content for the second tab</p>
    </ns-tabs-item>
  </ns-tabs>
</template>
<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    }
  },
  methods: {
    handleTabChange(tabIdentifier) {
      this.activeTab = tabIdentifier;
      // Handle tab change logic
    }
  }
}
</script>

Propiedades del componente

ns-tabs Propiedades

  • `active` (String): El identificador de la pestaña actualmente activa

ns-tabs-item Propiedades

  • `label` (String, requerido): El texto que se muestra para la cabecera de la pestaña
  • `identifier` (String, requerido): Identificador único de la pestaña
  • `closable` (Boolean, opcional): si la pestaña se puede cerrar con un botón X
  • `padding` (String, opcional): Clase de relleno personalizada (predeterminado: 'p-4')

Atributos de ns-tabs

  • `visible` (String): Establezca en 'true' o 'false' para controlar la visibilidad de la pestaña
  • Todos los props también se pueden pasar como atributos HTML

Eventos

Eventos de ns-tabs

  • `@active`: Se activa cuando se hace clic/activa una pestaña; recibe el identificador de la pestaña
  • `@changeTab`: Alias de `@active`, se activa cuando cambia la pestaña
  • `@close`: Se activa cuando se hace clic en el botón de cerrar de una pestaña que se puede cerrar; recibe el objeto de la pestaña

Ejemplos avanzados

1. Pestañas con relleno personalizado

Esto explica cómo agregar relleno personalizado a las pestañas.

<ns-tabs :active="currentTab" @active="setActiveTab">
  <ns-tabs-item 
    :label="__('Settings')" 
    identifier="settings"
    padding="0">
    <!-- Content without default padding -->
    <div class="p-2 border-b">
      <ns-field v-for="field in fields" :field="field" :key="field.name"></ns-field>
    </div>
    <div class="flex justify-end p-2">
      <ns-button type="info">{{ __('Save') }}</ns-button>
    </div>
  </ns-tabs-item>
  
  <ns-tabs-item 
    :label="__('Summary')" 
    identifier="summary"
    padding="p-6">
    <!-- Content with custom padding -->
    <div>Summary content with extra padding</div>
  </ns-tabs-item>
</ns-tabs>

2. Pestañas cerrables

Esto explica cómo puedes crear pestañas cerrables.

<ns-tabs :active="activeTab" @active="setActiveTab" @close="closeTab">
  <ns-tabs-item 
    :label="__('Document 1')" 
    identifier="doc1"
    :closable="true">
    <p>Document 1 content</p>
  </ns-tabs-item>
  
  <ns-tabs-item 
    :label="__('Document 2')" 
    identifier="doc2"
    :closable="true">
    <p>Document 2 content</p>
  </ns-tabs-item>
</ns-tabs>

<script>
export default {
  data() {
    return {
      activeTab: 'doc1',
      tabs: ['doc1', 'doc2']
    }
  },
  methods: {
    setActiveTab(tabId) {
      this.activeTab = tabId;
    },
    closeTab(tab) {
      // Remove tab from list
      this.tabs = this.tabs.filter(t => t !== tab.identifier);
      
      // If closing active tab, switch to another tab
      if (tab.identifier === this.activeTab && this.tabs.length > 0) {
        this.activeTab = this.tabs[0];
      }
    }
  }
}
</script>

3. Visibilidad condicional de pestañas

Esto muestra cómo mostrar una pestaña de forma condicional.

<ns-tabs :active="activeTab" @active="setActiveTab">
  <ns-tabs-item 
    :label="__('Basic Info')" 
    identifier="basic"
    visible="true">
    <p>Always visible basic information</p>
  </ns-tabs-item>
  
  <ns-tabs-item 
    :label="__('Advanced Settings')" 
    identifier="advanced"
    :visible="userRole === 'admin' ? 'true' : 'false'">
    <p>Only visible to admins</p>
  </ns-tabs-item>
  
  <ns-tabs-item 
    :label="__('Debug Info')" 
    identifier="debug"
    :visible="debugMode ? 'true' : 'false'">
    <p>Only visible in debug mode</p>
  </ns-tabs-item>
</ns-tabs>

4. Pestañas con contenido de encabezado adicional

Esto muestra cómo agregar elementos adicionales en el encabezado de la pestaña.

<ns-tabs :active="activeTab" @active="setActiveTab">
  <template #extra>
    <div class="flex items-center space-x-2">
      <ns-button size="sm" type="info" @click="refreshData">
        <i class="las la-sync-alt mr-1"></i>{{ __('Refresh') }}
      </ns-button>
      <ns-button size="sm" type="success" @click="addNewTab">
        <i class="las la-plus mr-1"></i>{{ __('Add Tab') }}
      </ns-button>
    </div>
  </template>
  
  <ns-tabs-item 
    :label="__('Data View')" 
    identifier="data">
    <div>Your data content here</div>
  </ns-tabs-item>
  
  <ns-tabs-item 
    :label="__('Settings')" 
    identifier="settings">
    <div>Settings content here</div>
  </ns-tabs-item>
</ns-tabs>

5. Pestañas dinámicas

Las pestañas dinámicas son pestañas que se agregan mediante programación. 

<template>
  <ns-tabs :active="activeTab" @active="setActiveTab" @close="closeTab">
    <ns-tabs-item 
      v-for="tab in dynamicTabs"
      :key="tab.id"
      :label="tab.title"
      :identifier="tab.id"
      :closable="tab.closable">
      <component :is="tab.component" v-bind="tab.props"></component>
    </ns-tabs-item>
  </ns-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'overview',
      dynamicTabs: [
        {
          id: 'overview',
          title: this.__('Overview'),
          component: 'OverviewComponent',
          closable: false,
          props: {}
        },
        {
          id: 'details',
          title: this.__('Details'),
          component: 'DetailsComponent', 
          closable: true,
          props: { itemId: 123 }
        }
      ]
    }
  },
  methods: {
    setActiveTab(tabId) {
      this.activeTab = tabId;
    },
    closeTab(tab) {
      this.dynamicTabs = this.dynamicTabs.filter(t => t.id !== tab.identifier);
      if (tab.identifier === this.activeTab && this.dynamicTabs.length > 0) {
        this.activeTab = this.dynamicTabs[0].id;
      }
    },
    addTab(tabConfig) {
      this.dynamicTabs.push(tabConfig);
      this.activeTab = tabConfig.id;
    }
  }
}
</script>

Mejores prácticas

1. Identificación de pestañas

  • Utiliza siempre identificadores únicos y descriptivos para las pestañas
  • Usa kebab-case para los identificadores (por ejemplo, 'user-settings', 'order-history')

2. Internacionalización

  • Envuelve todas las etiquetas con la función de traducción `__()`
  • Usa claves de traducción descriptivas

3. Gestión del estado

  • Mantén un registro de la pestaña activa en los datos del componente
  • Manejar los cambios de pestaña de manera adecuada
  • Considere la persistencia para las preferencias del usuario

4. Rendimiento

  • Usa renderizado condicional para contenido pesado
  • Considere la carga diferida para el contenido de las pestañas que requiere llamadas a la API

5. Accesibilidad

  • Asegúrate de que las etiquetas de las pestañas sean descriptivas
  • Usa atributos ARIA adecuados al extender el componente

6. Manejo de errores

  • Valida que la pestaña activa exista en la lista de pestañas
  • Proporciona una alternativa en caso de que falten pestañas
  • Maneja los casos límite cuando se cierran todas las pestañas