Startseite
NexoPOS

ns-Tabs

Die Komponenten `ns-tabs` und `ns-tabs-item` arbeiten zusammen, um in NexoPOS eine tabellarische Benutzeroberfläche zu erstellen. Die Komponente `ns-tabs` fungiert als Container, der den Tab-Status und die Navigation verwaltet, während die Komponenten `ns-tabs-item` den jeweiligen Tab-Inhalt darstellen.

Komponentenübersicht

ns-tabs (übergeordnete Komponente)

Die Komponente `ns-tabs` stellt den Tab-Navigationskopf bereit und verwaltet den aktiven Status der untergeordneten Tabs.

ns-tabs-item (Unterkomponente)  

Die Komponente `ns-tabs-item` stellt einzelnen Tab-Inhalt dar, der je nach aktivem Tab angezeigt bzw. ausgeblendet wird.

Grundlegende Verwendung

Einfache Tab-Struktur


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

Komponenteneigenschaften

ns-tabs-Props

  • `active` (String): Der Bezeichner des aktuell aktiven Tabs

ns-tabs-item-Eigenschaften

  • `label` (String, erforderlich): Der anzuzeigende Text für die Tab-Überschrift
  • `identifier` (String, erforderlich): Eindeutiger Bezeichner für den Tab
  • `closable` (Boolean, optional): Ob der Tab mit einem X-Schaltflächen geschlossen werden kann
  • `padding` (String, optional): Benutzerdefinierte Padding-Klasse (Standard: 'p-4')

ns-tabs-Attribute

  • `visible` (String): Auf „true“ oder „false“ setzen, um die Sichtbarkeit der Registerkarte zu steuern
  • Alle Props können auch als HTML-Attribute übergeben werden.

Veranstaltungen

ns-tabs Ereignisse

  • `@active`: Wird ausgelöst, wenn ein Tab angeklickt/aktiviert wird, erhält die Tab-Kennung
  • `@changeTab`: Alias für `@active`, wird ausgelöst, wenn sich der Tab ändert
  • `@close`: Wird ausgelöst, wenn auf die Schaltfläche zum Schließen eines schließbaren Tabs geklickt wird; erhält das Tab-Objekt

Fortgeschrittene Beispiele

1. Tabs mit benutzerdefiniertem Innenabstand

Dies erklärt, wie Sie benutzerdefiniertes Padding zu Tabs hinzufügen.

<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. Schließbare Tabs

Dies erklärt, wie Sie schließbare Tabs erstellen können.

<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. Bedingte Sichtbarkeit von Tabs

Dies zeigt, wie eine Registerkarte bedingt angezeigt wird.

<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. Tabs mit zusätzlichem Header-Inhalt

Dies zeigt, wie Sie zusätzliche Elemente in der Tab-Überschrift hinzufügen.

<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. Dynamische Tabs

Dynamische Tabs sind Tabs, die programmgesteuert hinzugefügt werden. 

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

Best Practices

1. Registeridentifikation

  • Verwenden Sie stets eindeutige, aussagekräftige Bezeichner für Tabs.
  • Verwenden Sie Kebab-Case für Bezeichner (z. B. „user-settings“, „order-history“)

2. Internationalisierung

  • Wickeln Sie alle Labels in die `__()`-Übersetzungsfunktion ein
  • Verwenden Sie beschreibende Übersetzungsschlüssel

3. Zustandsverwaltung

  • Behalte die aktive Registerkarte in den Komponentendaten im Blick
  • Behandle Tab-Wechsel entsprechend
  • Berücksichtigen Sie die Persistenz für Benutzereinstellungen

4. Leistung

  • Verwende bedingtes Rendering für umfangreichen Inhalt.
  • Berücksichtigen Sie das Lazy Loading für Tab-Inhalte, die API-Aufrufe erfordern.

5. Barrierefreiheit

  • Stellen Sie sicher, dass die Tab-Bezeichnungen aussagekräftig sind.
  • Verwenden Sie geeignete ARIA-Attribute, wenn Sie die Komponente erweitern

6. Fehlerbehandlung

  • Stellen Sie sicher, dass die aktive Registerkarte in der Tab-Liste vorhanden ist.
  • Stellen Sie einen Fallback für fehlende Tabs bereit
  • Behandle Sonderfälle, wenn alle Tabs geschlossen sind