Accueil
NexoPOS

ns-tabs

Les composants `ns-tabs` et `ns-tabs-item` fonctionnent ensemble pour créer une interface à onglets dans NexoPOS. Le composant `ns-tabs` agit comme un conteneur qui gère l’état des onglets et la navigation, tandis que les composants `ns-tabs-item` représentent le contenu de chaque onglet.

Aperçu des composants

ns-tabs (composant parent)

Le composant `ns-tabs` fournit l’en-tête de navigation par onglets et gère l’état actif des onglets enfants.

ns-tabs-item (composant enfant)  

Le composant `ns-tabs-item` représente le contenu individuel d’un onglet, affiché ou masqué en fonction de l’onglet actif.

Utilisation de base

Structure d’onglets 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>

Propriétés des composants

Propriétés de ns-tabs

  • `active` (String) : L’identifiant de l’onglet actuellement actif

Propriétés de ns-tabs-item

  • `label` (String, requis) : Le texte d’affichage pour l’en-tête de l’onglet
  • `identifier` (String, requis) : identifiant unique de l’onglet
  • `closable` (booléen, optionnel) : Indique si l’onglet peut être fermé à l’aide d’un bouton « X »
  • `padding` (String, optionnel) : classe de remplissage personnalisée (par défaut : 'p-4')

Attributs ns-tabs

  • `visible` (String) : Définissez-le sur « true » ou « false » pour contrôler la visibilité de l’onglet
  • Tous les props peuvent également être passés en tant qu’attributs HTML.

Événements

Événements des onglets ns-tabs

  • `@active` : Déclenché lorsqu’un onglet est cliqué/activé, reçoit l’identifiant de l’onglet
  • `@changeTab` : Alias de `@active`, déclenché lors du changement d’onglet
  • `@close` : Déclenché lorsque le bouton de fermeture d’un onglet ferma­ble est cliqué ; reçoit l’objet onglet

Exemples avancés

1. Onglets avec rembourrage personnalisé

Cela explique comment ajouter un rembourrage (padding) personnalisé aux onglets.

<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. Onglets fermables

Cela explique comment créer des onglets fermables.

<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é conditionnelle de l’onglet

Cela montre comment afficher conditionnellement un onglet.

<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. Onglets avec contenu d’en-tête supplémentaire

Cela montre comment ajouter des éléments supplémentaires dans l’en-tête de l’onglet.

<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. Onglets dynamiques

Les onglets dynamiques sont des onglets ajoutés par programmation. 

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

Bonnes pratiques

1. Identification de l’onglet

  • Utilisez toujours des identifiants uniques et descriptifs pour les onglets
  • Utilisez le kebab-case pour les identifiants (par exemple « user-settings », « order-history »)

2. Internationalisation

  • Encapsulez toutes les étiquettes avec la fonction de traduction `__()`
  • Utilisez des clés de traduction descriptives

3. Gestion de l’état

  • Suivez l’onglet actif dans les données du composant
  • Gérer correctement les changements d’onglet
  • Tenir compte de la persistance des préférences utilisateur

4. Performance

  • Utilisez le rendu conditionnel pour le contenu volumineux
  • Envisagez le chargement différé du contenu des onglets qui nécessite des appels à l’API

5. Accessibilité

  • Assurez-vous que les libellés des onglets sont descriptifs
  • Utilisez des attributs ARIA appropriés lors de l’extension du composant

6. Gestion des erreurs

  • Vérifiez que l’onglet actif existe dans la liste des onglets
  • Fournir un remplacement en cas d’onglets manquants
  • Gérer les cas limites lorsque toutes les fenêtres sont fermées