Home
NexoPOS

ns-tabs

I componenti `ns-tabs` e `ns-tabs-item` lavorano insieme per creare un’interfaccia a schede in NexoPOS. Il componente `ns-tabs` funge da contenitore che gestisce lo stato delle schede e la navigazione, mentre i componenti `ns-tabs-item` rappresentano i singoli contenuti delle schede.

Panoramica dei componenti

ns-tabs (Componente padre)

Il componente `ns-tabs` fornisce l’intestazione di navigazione delle schede e gestisce lo stato attivo delle schede figlie.

ns-tabs-item (Componente figlio)  

Il componente `ns-tabs-item` rappresenta il contenuto di ciascuna scheda, che viene mostrato o nascosto in base alla scheda attiva.

Uso di base

Struttura schede semplice


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

Proprietà del componente

ns-tabs Proprietà

  • `active` (String): L’identificatore della scheda attualmente attiva

ns-tabs-item Proprietà

  • `label` (String, obbligatorio): Il testo visualizzato per l’intestazione della scheda
  • `identifier` (String, obbligatorio): identificatore univoco per la scheda
  • `closable` (boolean, opzionale): indica se la scheda può essere chiusa con un pulsante “X”
  • `padding` (String, opzionale): Classe di padding personalizzata (predefinita: 'p-4')

Attributi ns-tabs

  • `visible` (String): Imposta su 'true' o 'false' per controllare la visibilità della scheda
  • Tutte le props possono anche essere passate come attributi HTML

Eventi

Eventi ns-tabs

  • `@active`: Scatta quando viene fatto clic/attivata una scheda, riceve l’identificatore della scheda
  • `@changeTab`: Alias di `@active`, attivato quando cambia la scheda
  • `@close`: Viene attivato quando viene fatto clic sul pulsante di chiusura di una scheda chiudibile, riceve l’oggetto scheda

Esempi avanzati

1. Schede con spaziatura personalizzata

Spiega come aggiungere un padding personalizzato alle schede.

<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. Schede chiudibili

Questo spiega come creare schede chiudibili.

<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. Visibilità condizionale delle schede

Questo mostra come visualizzare in modo condizionale una scheda.

<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. Schede con contenuto di intestazione aggiuntivo

Questo mostra come aggiungere elementi aggiuntivi nell’intestazione della scheda.

<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. Schede dinamiche

Le schede dinamiche sono schede aggiunte in modo programmatico. 

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

Buone pratiche

1. Identificazione della scheda

  • Usa sempre identificatori univoci e descrittivi per le schede
  • Usa kebab-case per gli identificatori (ad esempio 'user-settings', 'order-history')

2. Internazionalizzazione

  • Racchiudi tutte le etichette nella funzione di traduzione `__()`
  • Usa chiavi di traduzione descrittive

3. Gestione dello stato

  • Tieni traccia della scheda attiva nei dati del componente
  • Gestire correttamente le modifiche delle schede
  • Considera la persistenza per le preferenze dell’utente

4. Prestazioni

  • Usa il rendering condizionale per i contenuti pesanti
  • Considera il caricamento lazy del contenuto delle schede che richiede chiamate API

5. Accessibilità

  • Assicurati che le etichette delle schede siano descrittive
  • Usa attributi ARIA appropriati quando estendi il componente

6. Gestione degli errori

  • Verifica che la scheda attiva esista nell’elenco delle schede
  • Fornisci un’alternativa per le schede mancanti
  • Gestisci i casi limite quando tutte le schede sono chiuse