Início
NexoPOS

ns-tabs

Os componentes `ns-tabs` e `ns-tabs-item` trabalham juntos para criar uma interface com abas no NexoPOS. O componente `ns-tabs` atua como o contêiner que gerencia o estado das abas e a navegação, enquanto os componentes `ns-tabs-item` representam o conteúdo individual de cada aba.

Visão geral do componente

ns-tabs (Componente Pai)

O componente `ns-tabs` fornece o cabeçalho de navegação por abas e gerencia o estado ativo das abas filhas.

ns-tabs-item (Componente filho)  

O componente `ns-tabs-item` representa o conteúdo individual de uma aba, que é exibido/ocultado com base na aba ativa.

Uso básico

Estrutura Simples de Abas


<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>

Propriedades do componente

ns-tabs Props

  • `active` (String): O identificador da aba atualmente ativa

Props do ns-tabs-item

  • `label` (String, obrigatório): O texto exibido para o cabeçalho da aba
  • `identifier` (String, obrigatório): Identificador único para a aba
  • `closable` (boolean, opcional): Se a aba pode ser fechada com um botão “X”
  • `padding` (String, opcional): Classe de padding personalizada (padrão: 'p-4')

Atributos ns-tabs

  • `visible` (String): Defina como 'true' ou 'false' para controlar a visibilidade da aba
  • Todos os props também podem ser passados como atributos HTML

Eventos

Eventos ns-tabs

  • `@active`: Disparado quando uma aba é clicada/ativada, recebe o identificador da aba
  • `@changeTab`: Alias de `@active`, disparado quando a aba é alterada
  • `@close`: Disparado quando o botão de fechar de uma aba fechável é clicado; recebe o objeto da aba

Exemplos Avançados

1. Abas com preenchimento personalizado

Isto explica como adicionar preenchimento (padding) personalizado às abas.

<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. Abas Fecháveis

Isto explica como você pode criar abas fecháveis.

<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. Visibilidade Condicional da Aba

Isto mostra como exibir uma aba condicionalmente.

<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. Abas com Conteúdo de Cabeçalho Adicional

Isto mostra como adicionar elementos adicionais no cabeçalho da aba.

<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. Abas Dinâmicas

As abas dinâmicas são abas que são adicionadas programaticamente. 

<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>

Melhores práticas

1. Identificação da Aba

  • Use sempre identificadores exclusivos e descritivos para as abas
  • Use kebab-case para identificadores (por exemplo, 'user-settings', 'order-history')

2. Internacionalização

  • Envolva todas as etiquetas com a função de tradução `__()`
  • Use chaves de tradução descritivas

3. Gerenciamento de Estado

  • Acompanhe a aba ativa nos dados do componente
  • Lide adequadamente com as alterações de abas
  • Considere a persistência para preferências do usuário

4. Desempenho

  • Use renderização condicional para conteúdo pesado
  • Considere o carregamento lento para o conteúdo das abas que requer chamadas de API

5. Acessibilidade

  • Garanta que os rótulos das abas sejam descritivos
  • Use atributos ARIA apropriados ao estender o componente

6. Tratamento de Erros

  • Verifique se a aba ativa existe na lista de abas
  • Forneça uma alternativa para abas ausentes
  • Lidar com casos-limite quando todas as abas estiverem fechadas