Registerkarten

Die Avonni Tabs-Komponente hilft Ihnen, Informationen auf einer Seite zu organisieren und anzuzeigen. Sie ermöglicht es, Informationen in verschiedene Registerkarten zu unterteilen, sodass Benutzer leichter finden, was sie suchen.

Hauptunterschied zum Tabs-Komponent

Verstehen des Unterschieds zwischen den Avonni-Tabs und Registerkarten-Container Komponenten ist entscheidend, da sie unterschiedliche Zwecke erfüllen.

• Avonni-Tabs: Diese Komponente ist dafür ausgelegt, Registerkarten zu erstellen dynamisch basierend auf einer Datenquelle. Sie verbinden sie mit einer Datenquelle (wie einer Liste von Datensätzen, einer Auswahlliste oder manuell eingegebenen Werten), und die Komponente erstellt automatisch eine Registerkarte für jeden Eintrag in dieser Datenquelle. Sie kann keine anderen Avonni-Komponenten per Drag & Drop in den Registerkarten platzieren. Betrachten Sie sie als ein datengetriebenes Navigationselement.

• Registerkarten-Container: Diese Komponente ist ein Layout-Container. Er ermöglicht Ihnen, eine Registerkartenstruktur zu erstellen und dann manuell hinzuzufügen und anzuordnen jedes Avonni-Komponenten innerhalb des Inhaltsbereichs des jede Registerkarte. Sie haben völlige Freiheit, das Layout und den Inhalt jeder Registerkarte unabhängig zu gestalten. Es geht darum, Ihre UI zu strukturieren und andere Komponenten zu organisieren.

Verwenden Sie die Avonni-Tabs Komponente zur Erstellung von Registerkarten basierend auf einer Liste von Datensätzen oder Optionen. Verwenden Sie die Registerkarten-Container Komponente, wenn Sie ein Registerkarten-Layout mit beliebigen Komponenten innerhalb jeder Registerkarte erstellen.

Einrichten Ihrer Registerkarten

1. Datenquelle konfigurieren

Bevor Ihre Tabs Inhalte anzeigen können, müssen Sie ihnen sagen, woher die Daten kommen sollen. Die Avonni-Tabs-Komponente bietet flexible Optionen, um sich je nach Bedarf und gewünschter Verwaltung des Registerkarteninhalts mit verschiedenen Datenquellen zu verbinden.

Wählen Sie aus, wie Ihre Tab-Namen befüllt werden sollen:

2. Legen Sie die aktive Registerkarte fest

Wenn Ihre Tabs-Komponente zum ersten Mal geladen wird, möchten Sie sicherstellen, dass dem Benutzer die richtige Registerkarte angezeigt wird. Dies wird durch die Einstellung "Aktiver Registerkartenwert" gesteuert.

• Verstehen der Registerkartenwerte: Jede Registerkarte in Ihrer Komponente ist mit einem bestimmten Wert verknüpft, normalerweise identisch mit dem Label der Registerkarte. Dieser Wert dient als Kennung für die Registerkarte.

• Voreinstellung festlegen: Um zu wählen, welche Registerkarte anfänglich aktiv sein soll, geben Sie ihren entsprechenden Wert in das Feld "Aktiver Registerkartenwert" ein.

  • Beispiel: Wenn Sie eine Registerkarte mit der Bezeichnung "Details" haben und möchten, dass diese die erste Registerkarte ist, die Benutzer sehen, würden Sie "Details" in das Feld "Aktiver Registerkartenwert" eingeben.

Wichtiger Hinweis

Es ist entscheidend, den Registerkartenwert genau so einzugeben, wie er in Ihrer Registerkartenkonfiguration erscheint. Schon kleine Unterschiede in der Schreibweise oder Groß-/Kleinschreibung können verhindern, dass die Registerkarte korrekt ausgewählt wird.

3. Scrollen konfigurieren (optional)

Wenn Sie viele Registerkarten haben, die nicht alle gleichzeitig auf den Bildschirm passen, können Sie das Scrollen aktivieren, damit Benutzer auf alle Registerkarten zugreifen können. Avonni bietet zwei Scrolloptionen:

• Scrollbare Registerkarten: Mit dieser Option können Benutzer die Registerkarten nach links oder rechts wischen, um zusätzliche, außerhalb des Bildschirms liegende Registerkarten anzuzeigen. Dies bietet eine nahtlose und intuitive Möglichkeit, zwischen Registerkarten zu navigieren, insbesondere auf Touch-Geräten.

• Scroll-Buttons: Wenn Sie eine explizitere Möglichkeit bevorzugen, durch Registerkarten zu scrollen, können Sie Scroll-Buttons aktivieren. Dadurch werden Schaltflächen auf beiden Seiten der Registerkartenleiste angezeigt, mit denen Benutzer durch die Registerkarten scrollen können. Diese Option zeigt außerdem die Gesamtanzahl der Registerkarten an, was den Benutzern hilft, den Umfang des Inhalts einzuschätzen.

Die Wahl zwischen scrollbaren Registerkarten und Scroll-Buttons hängt von Ihren Designvorlieben und der Anzahl der Registerkarten ab. Scrollbare Registerkarten bieten ein saubereres Erscheinungsbild, während Scroll-Buttons explizitere Steuerungen und Informationen über die Anzahl der Registerkarten bereitstellen.

4. Ändern Sie die Ausrichtung

Die Avonni-Tabs-Komponente bietet Flexibilität bei der Anordnung Ihrer Registerkarten. Sie können zwischen zwei Ausrichtungen wählen:

• Horizontal: Dies ist die gebräuchlichste Ausrichtung für Registerkarten, bei der sie horizontal oben oder unten im Abschnitt angeordnet sind. Dieses Layout ist ideal, wenn Sie eine begrenzte Anzahl von Registerkarten haben oder eine klare visuelle Hierarchie mit dem Inhalt unter den Registerkarten beibehalten möchten.

• Vertikal: Bei dieser Ausrichtung sind die Registerkarten vertikal angeordnet, typischerweise links oder rechts neben dem Abschnitt. Dieses Layout eignet sich, wenn Sie viele Registerkarten haben oder den horizontalen Platz für Ihren Inhalt maximieren möchten.

Die Wahl zwischen horizontaler und vertikaler Ausrichtung hängt von Ihren Designvorlieben, der Anzahl der Registerkarten und dem Gesamtlayout Ihrer Seite ab.

5. Interaktionen definieren

Interaktionen ermöglichen es Ihnen, dynamisches Verhalten zu Ihren Registerkarten hinzuzufügen und sie mehr als statische Navigationselemente zu machen.

• Beim Klicken auf eine Registerkarte: Diese Interaktion ermöglicht es Ihnen zu definieren, was passiert, wenn ein Benutzer auf eine Registerkarte klickt, um sie zu aktivieren. Sie können aus verschiedenen Aktionen wählen, wie zum Beispiel:

  • Navigation: Zu einer anderen Seite oder einem anderen Abschnitt innerhalb Ihrer Anwendung navigieren.

  • Nachrichten anzeigen: Zeigen Sie eine Toast-Nachricht an oder öffnen Sie ein modales Dialogfenster, um dem Benutzer Feedback oder Informationen zu geben.

  • Und mehr: Erkunden Sie die gesamte Bandbreite der verfügbaren Interaktionen, um ein dynamisches und ansprechendes Benutzererlebnis zu schaffen

Stil

Die Avonni-Tabs-Komponente bietet eine breite Palette von Stiloptionen, um sich in Ihr Design zu integrieren und ein benutzerfreundliches Erlebnis zu bieten. Sie können Farben, Schriftarten, Rahmen, Abstände und mehr anpassen, um Ihre Markenidentität und Vorlieben widerzuspiegeln.