- Registerkartenbasierte Benutzeroberflächen organisieren mehrere Ansichten oder Dokumente in einem einzigen Fenster mithilfe übersichtlicher, umschaltbarer Abschnitte.
- Android TabLayout, Elementor Nested Tabs und Bootstrap Nav Tabs decken die meisten Anwendungsfälle für Tabs innerhalb einer Seite ab.
- Der PWA-Tab-Anwendungsmodus bringt systemweite Dokument-Tabs in Progressive Web Apps unter ChromeOS.
- Ein gutes Tab-Design beschränkt die Anzahl der Elemente, verwendet eindeutige Symbole und sorgt für eine konsistente, stets sichtbare Navigation.
Registerkartenbasierte Benutzeroberflächen gehören zu den bekanntesten Navigationsmustern in moderner Software.Von mobilen Apps und Web-Dashboards bis hin zu komplexen Entwicklungstools – Tabs ermöglichen es Nutzern, innerhalb desselben Fensters zwischen verschiedenen Abschnitten oder Dokumenten zu wechseln. So bleibt die Benutzeroberfläche übersichtlich, schnell erfassbar und leicht zu erlernen. Durchdacht gestaltete Tabs reduzieren Unordnung deutlich und machen klar, welche Inhalte aktuell sichtbar sind.
Hinter dieser einfachen Etikettenreihe verbergen sich zahlreiche Designentscheidungen und technische Optionen.: feste oder scrollbare Tabs, Layouts mit reinen Symbolen, verschachtelte Tab-Systeme in Page-Buildern, Tab-Fenster im Dokumentstil in Progressive Web Apps oder benutzerdefinierte Tab-Widgets, die mit Frameworks wie Bootstrap oder Xajax erstellt wurden. In diesem Leitfaden werden wir eine breite Palette davon durchgehen. Beispiele für Registerkarten-Oberfläche und Implementierungsansätze, die alle Ideen von Android, Web-UI, PWA-Manifesten und klassischen PHP + Ajax-Lösungen zusammenführen.
Registerkartenbasierte Benutzeroberflächen in Android mit TabLayout und ViewPager
Unter Android ist das TabLayout-Widget der wichtigste Baustein für die Tab-Navigation im Material Design.Tabs werden häufig mit einem ViewPager (oder in neueren Projekten mit einem ViewPager2) kombiniert. Googles eigenes Material-Design-Team beschreibt Tabs sehr einfach: Sie erleichtern das Erkunden und Wechseln zwischen verschiedenen Ansichten innerhalb derselben Aktivität.
Ein TabLayout ordnet Tabs horizontal an und bietet zwei Hauptbetriebsmodi: fixiert und scrollbar.Im festen Modus sind alle Tabs gleichzeitig sichtbar und die verfügbare Breite wird zwischen ihnen aufgeteilt. Dieses Muster wird beispielsweise in Apps wie WhatsApp verwendet, wo einige wenige, klar voneinander abgegrenzte Bereiche stets mit einem Fingertipp erreichbar sind und die Tabs die gesamte Zeile ausfüllen.
Scrollbare Tabs kommen zum Einsatz, wenn die Anzahl der Abschnitte oder die Länge der Beschriftungen die Bildschirmbreite überschreitet.In dieser Konfiguration kann der Nutzer horizontal über die Tab-Leiste wischen, um weitere Optionen anzuzeigen. Googles eigene News & Wetter-App ist ein gutes Beispiel für ein scrollbares TabLayout, bei dem die Inhaltskategorien den Rahmen eines einzelnen Bildschirms sprengen.
Jeder Tab in einem TabLayout entspricht üblicherweise einem Fragment, das in einem ViewPager angezeigt wird.Wenn der Benutzer auf einen Tab tippt, aktualisiert TabLayout seinen ausgewählten Status und der ViewPager navigiert zum entsprechenden Fragment. Ebenso bewegt sich beim Wischen zwischen Seiten die Anzeige des ausgewählten Tabs entsprechend dem aktuell sichtbaren Fragment. Diese enge Kopplung wird üblicherweise über folgende Schritte realisiert: setupWithViewPager(), wodurch automatisch Tabs erstellt und Listener für Scroll- und Klickereignisse eingerichtet werden.
Material-Registerkarten können Text, Symbole oder eine Kombination aus beidem anzeigen.Einige Apps, wie beispielsweise Twitter auf Android, setzen verstärkt auf aussagekräftige Symbole anstelle von Beschriftungen. Das spart Platz und ermöglicht ein schnelleres Scannen, sobald die Bedeutung der einzelnen Symbole verstanden ist. TabLayout unterstützt all diese Optionen, egal ob sie in XML definiert oder programmatisch festgelegt wurden.
Schritt für Schritt eine einfache Android-Registerkartenoberfläche erstellen
Um in Android Studio eine einfache Registerkarten-Benutzeroberfläche von Grund auf zu erstellen, beginnt man typischerweise mit einer leeren Aktivität., oft auch so etwas wie genannt MainActivityund führen Sie dann drei Schlüsselelemente ein: eine Handvoll Fragmente, ein TabLayout in Ihrem Layout-XML und einen ViewPager, der von einem Pager-Adapter verwaltet wird.
Der erste Baustein ist ein kleiner Satz von Fragmentklassen, eine pro Tab.Zum Beispiel könnten Sie definieren FragmentOne, FragmentTwo , FragmentThree, wobei jedes seine eigene XML-Layout-Struktur aufbläht (zum Beispiel, fragment_one.xmlDer Code für jedes Fragment ist unkompliziert: Die Ansicht wird aufgeblasen, alle Widgets werden gebunden und der für den jeweiligen Tab relevante Inhalt wird bereitgestellt.
Als Nächstes fügen Sie TabLayout und ViewPager zu Ihrem Hauptaktivitätslayout hinzu.. in activity_main.xml Sie erklären eine TabLayout Element mit einer ID wie tab_layout und einem ViewPager direkt darunter. Mit Attributen wie app:tabMode , app:tabGravity Sie legen fest, ob Tabs fixiert oder scrollbar sind und ob sie sich an die verfügbare Breite anpassen. Einstellung tabMode="fixed" , tabGravity="fill" Dadurch werden alle Tabs gleichmäßig über die Leiste verteilt, was besonders auf breiten Bildschirmen wie Tablets auffällt.
Die Gestaltung von Tabs erfolgt üblicherweise über eine benutzerdefinierte Stilreferenz im TabLayout.Durch einen Stil wie @style/CustomTabLayoutSie können Dinge wie die Indikatorfarbe definieren (tabIndicatorColor), Indikatorhöhe (tabIndicatorHeight) und Textfarben für ausgewählte und nicht ausgewählte Zustände (tabTextColor , tabSelectedTextColorDie gleichen Eigenschaften können auch programmatisch mit Methoden wie den folgenden festgelegt werden: setSelectedTabIndicatorColor() or setTabTextColors()Die Zentralisierung des Designs in XML erleichtert es jedoch, ein einheitliches Erscheinungsbild zu gewährleisten.
Nachdem Sie das Layout definiert haben, fügen Sie einen Pager-Adapter hinzu, der steuert, welches Fragment für jeden Tab angezeigt wird.Eine gängige Implementierung erweitert FragmentPagerAdapter (oder FragmentStatePagerAdapter oder die neuere FragmentStateAdapter für ViewPager2) und überschreibt drei Methoden: getItem() um das Fragment für eine bestimmte Position bereitzustellen, getCount() um zu melden, wie viele Seiten vorhanden sind, und getPageTitle() um den Beschriftungstext für jeden Tab anzuzeigen. Wenn der erste Tab, der beispielsweise „Tab-Element 1“ heißt, ausgewählt wird, getItem() wird zurückkehren FragmentOne, wodurch das Label mit seinem Inhalt verknüpft wird.
Alle Teile fügen sich in der Aktivität zusammen. onCreate() MethodeDort erhalten Sie Verweise auf TabLayout und ViewPager von activity_main.xmlErstellen Sie Ihren Adapter mit dem FragmentManager und weisen Sie ihn dem ViewPager zu. Ein Aufruf von tabLayout.setupWithViewPager(viewPager) Die Verdrahtung wird abgeschlossen, wobei für jeden Eintrag im Adapter Registerkarten erstellt und Benutzerinteraktionen synchronisiert werden. Durch Wischen zwischen Seiten wird die ausgewählte Registerkarte aktualisiert, und durch Tippen auf Registerkarten wird der Pager zum entsprechenden Abschnitt gescrollt.
Wenn Sie eine detailliertere Kontrolle über Benutzeraktionen benötigen, können Sie eine OnTabSelectedListenerDieser Listener stellt drei Rückruffunktionen bereit: onTabSelected() wenn ein Tab ausgewählt wird, onTabUnselected() wenn es den Fokus verliert, onTabReselected() Wenn der Nutzer auf einen bereits aktiven Tab tippt, können diese Hooks genutzt werden, um zusätzliche Daten nur dann zu laden, wenn ein Tab tatsächlich angezeigt wird, oder um dezente Animationen auszulösen, wenn sich der Fokus ändert.
Scrollbare vs. fixierte Tabs und Verwendung von Symbolen anstelle von Text
Material Design unterscheidet klar zwischen fixierten und scrollbaren Tabs, und jede hat ihre idealen Anwendungsfälle.Feste Tabs sind empfehlenswert, wenn Sie nur wenige kurze Bezeichnungen haben, die Nutzer direkt miteinander vergleichen möchten. Sie eignen sich perfekt für die primäre Navigation auf Touchscreens, wo Übersichtlichkeit und Stabilität wichtiger sind als die Darstellung einer riesigen Seitenliste.
Scrollbare Tabs sind besonders praktisch, wenn die Beschriftungen länger sind oder man mehr als etwa vier Tabs benötigt.Wenn man versucht, lange Namen in ein festes TabLayout einzufügen, bricht Android die Bezeichnungen über mehrere Zeilen um oder schneidet sie sogar ab. Das sieht nicht nur unübersichtlich aus, sondern beeinträchtigt auch die Benutzerfreundlichkeit. Im Scrollmodus kann der Benutzer die Tableiste flüssig nach links und rechts verschieben, und jede Bezeichnung hat genügend Platz, um gut lesbar zu sein.
Der Wechsel zwischen diesen Modi kann entweder in XML über app:tabMode oder programmatisch mit setTabMode(). Vorbeigehen TabLayout.MODE_FIXED ergibt feste Tabs, während TabLayout.MODE_SCROLLABLE Erstellt eine horizontal scrollbare Liste. Beachten Sie, dass bei mehr als vier Kategorien die Richtlinien dringend die Verwendung einer scrollbaren Konfiguration empfehlen.
Eine weitere wirkungsvolle Variante ist die Verwendung von Symbolen anstelle von Text für Registerkartenbeschriftungen.Durch einen Anruf getTabAt(index) auf einer TabLayout-Instanz und dann aufrufen setIcon()Sie weisen einem bestimmten Tab eine Grafik zu. Dadurch ergeben sich sehr kompakte Tab-Leisten, insbesondere wenn die Symbole allgemein verständlich sind. Wenn Sie die Einstellungen dennoch überschreiben getPageTitle() In Ihrem Adapter können Sie Text und Symbole kombinieren; wenn Sie diese Überschreibung weglassen, erhalten Sie am Ende nur noch Symbol-Registerkarten.
Das Verhalten der Tabs lässt sich auch ohne Bearbeitung des XML-Codes umfassend konfigurieren.Sie können Tabs explizit erstellen mit newTab(), anstatt sich auf setupWithViewPager()Sie können den Tab-Modus im laufenden Betrieb umschalten, über Listener auf die Auswahl reagieren oder sogar benutzerdefinierte Tab-Ansichten einfügen, wenn Sie komplexere Designs als eine einfache Beschriftung und ein Symbol benötigen.
Verwendung von Android Studio-Vorlagen zum Erstellen von Registerkartenaktivitäten
Das Erstellen einer Registerkarten-Oberfläche von Grund auf ist ideal, um zu verstehen, wie alles zusammenhängt, aber Android Studio kann Ihnen in Sekundenschnelle eine funktionierende Konfiguration generieren.Die IDE wird mit Vorlagen für gängige Muster ausgeliefert, darunter eine „Registerkarten-Aktivität“, die sowohl in Java als auch in Kotlin verfügbar ist.
Wenn Sie ein neues Projekt starten, können Sie nach der Auswahl des Anwendungsnamens und der Zielgeräte die Option „Registerkartenaktivität“ aus der Aktivitätsliste auswählen.Im abschließenden Konfigurationsdialog können Sie den Navigationsstil auswählen, beispielsweise „Aktionsleisten-Tabs (mit ViewPager)“. Nach der Bestätigung generiert Android Studio eine Activity mit TabLayout, ViewPager und Beispielfragmenten, die Sie sofort ausführen und erkunden können.
Diese integrierten Vorlagen sind äußerst praktisch für Prototypen und einfache Apps.Sie stellen den Standardcode, Beispiel-Layouts und die Verbindungslogik bereit, sodass Sie sich auf die eigentlichen Inhalte und das gewünschte Verhalten konzentrieren können. In bestehenden Projekten können Sie dieselbe Aktivität über das Menü „Datei“ hinzufügen, indem Sie eine neue „Registerkartenaktivität“ einfügen und die gleichen Schritte befolgen.
Für anspruchsvollere Apps mit komplexer Navigation oder einer sehr individuellen visuellen Sprache können Vorlagen von Drittanbietern die Entwicklung zusätzlich beschleunigen.Marktplätze wie Envato bieten vorgefertigte Android-App-Vorlagen mit anspruchsvollen Tab-Oberflächen und Material-Design-Mustern. Diese Kits sind besonders nützlich, wenn Sie sich auf einzigartige Funktionen konzentrieren möchten, anstatt die Standardnavigation von Grund auf neu zu erstellen.
Verschachtelte Tabs in Elementor für fortgeschrittene Web-Layouts
Im Web übertragen Page-Builder wie Elementor das Konzept der Registerkarten-Oberfläche in Drag-and-Drop-Design-Workflows.Ein besonders flexibles Muster sind verschachtelte Tabs: Tabs, die in anderen Tabs enthalten sind, ermöglichen es Ihnen, verwandte Inhalte in tief strukturierten, aber dennoch kompakten Layouts zu gruppieren, ohne die Seite zu überladen.
Ein guter erster Schritt beim Entwerfen verschachtelter Tabs ist die Definition einer einheitlichen visuellen Sprache.Ein Tab könnte beispielsweise ein Hero-Bild, einen Titel, der einen Veranstaltungsort oder ein Programm zusammenfasst, eine kurze Textbeschreibung und einen Button enthalten. Sobald diese Struktur festgelegt ist, lässt sich das Layout der einzelnen Tabs variieren – etwa ein einzelner vertikaler Block in einem Tab, eine zweispaltige Anordnung in einem anderen und eine dreizeilige Anordnung in einem dritten –, wobei die gleichen Elemente beibehalten werden, sodass die Benutzeroberfläche weiterhin ein einheitliches Erscheinungsbild aufweist.
Mit den verschachtelten Tabs von Elementor können Sie beliebige Widgets einfügen, nicht nur einfachen Text.Sie können Preistabellen einbetten, um Monats-, Halbjahres- und Jahresabonnements in verschiedenen Tabs anzuzeigen, oder diese mit Schleifenraster kombinieren, um Blogbeiträge, Produkte oder Portfolio-Elemente dynamisch nach Kategorie zu filtern. Durch die Zuordnung von Kategorien zu Tabs können Besucher schnell auf die für sie relevanten Inhalte zugreifen, ohne die aktuelle Seite zu verlassen.
Tabs sind außerdem ein leistungsstarkes Mittel, um Benutzer durch Prozesse oder Geschichten zu führen.Ein Beispiel hierfür ist die Verwendung von etwa vier Registerkarten als Schritte in einem Einrichtungsprozess: Jede Registerkarte könnte ein Symbol, eine Schrittnummer und eine kurze Bezeichnung in der Registerkartenleiste anzeigen, während der Panelinhalt für diesen Schritt jeweils einen individuellen Text und Bilder enthält. Durch Hinzufügen von Bewegungseffekten oder dezenten Animationen zu den Bildern und Elementen lässt sich eine geführte, narrative Benutzererfahrung schaffen, die deutlich ansprechender ist als eine lange, statische Seite.
Für komplexere Dashboards und Ansichten im Admin-Stil gehen Designer manchmal noch eine Ebene tiefer und verwenden verschachtelte Tabs innerhalb verschachtelter Tabs.Stellen Sie sich eine vertikale Spalte mit Tabs auf der linken Seite vor, die als Hauptabschnitte dienen und jeweils horizontale Unterabschnitte mit Tabs für Unteransichten enthalten. Mit etwas benutzerdefiniertem CSS – beispielsweise durch die Verwendung der CSS-ID jedes Tabs zum Drehen der Beschriftungen und Komprimieren der vertikalen Navigation – können Sie hochfunktionale Tab-Bedienfelder vollständig mit Elementor-Containern und Schleifenraster erstellen.
Die wichtigste Erkenntnis ist, dass verschachtelte Tabs nahezu unendliche Möglichkeiten zur Strukturierung von Inhalten bieten.Ob Sie nun Feature-Touren, Preisoptionen, Portfolios oder Analyse-Dashboards organisieren – die Kombination aus einer einheitlichen Designsprache und flexiblen Layouts ermöglicht es Ihnen, eine riesige Menge an Informationen in einem Bereich unterzubringen, der sich dennoch intuitiv erkunden lässt.
Registerkartenmodus in progressiven Web-Apps
Registerkartenbasierte Benutzeroberflächen sind nicht nur in Webseiten zu finden; sie können auch in die Funktionsweise von Progressive Web Apps als eigenständige Fenster integriert werden.Unter ChromeOS ermöglicht ein spezieller „Tabbed Application Mode“ einer PWA, ihre eigene Tableiste im Dokumentstil anzuzeigen, ähnlich wie man es von einem nativen Editor oder einer IDE erwarten würde.
PWAs unterstützen mehrere Anzeigemodi, die über die display Mitglied im Web-App-Manifest. Optionen umfassen fullscreen, standalone, minimal-ui , browserBrowser greifen auf eine definierte Abfolge von Alternativen zurück, falls ein bestimmter Modus nicht unterstützt wird. Für eine noch feinere Steuerung gibt es eine display_override Eigenschaft, mit der Entwickler eine benutzerdefinierte Fallback-Reihenfolge festlegen können.
Der neue Registerkartenmodus schließt eine bisherige Lücke, indem er eine integrierte Registerkarten-Dokumentschnittstelle (TDI) für PWAs bereitstellt.Anstatt Tabs innerhalb einer Seite mit benutzerdefiniertem HTML und JavaScript zu simulieren, kann die App das System anweisen, mehrere Dokumente oder Ansichten in echten Tabs der obersten Ebene innerhalb eines dedizierten PWA-Fensters darzustellen. Dies unterscheidet sich von display: browser, wodurch die App einfach in einem normalen Browser-Tab mit der vollständigen Browser-Benutzeroberfläche geöffnet wird.
Typische Anwendungsfälle für diesen Modus sind Produktivitäts-Apps, Kommunikationstools und Leseerlebnisse.Eine Code-Editor-PWA könnte mehrere Dateien in separaten Tabs öffnen, ein Chat-Client könnte einen Tab pro Raum oder Kanal bereitstellen und eine Lese-App könnte Artikellinks in neuen Anwendungs-Tabs öffnen, wobei alles übersichtlich im selben Fenster bleibt, anstatt den allgemeinen Browser zu überladen.
Zwischen diesem integrierten Tab-Modus und von Entwicklern erstellten benutzerdefinierten Tab-Benutzeroberflächen bestehen wichtige Unterschiede.Systemweite Tabs können große Mengen an Dokumenten problemlos verarbeiten, profitieren von Ressourcenisolation und integrieren sich nahtlos in Browserfunktionen wie den Navigationsverlauf, „Link dieser Seite kopieren“, das Umschalten vom aktuellen Tab oder das Öffnen des aktiven Dokuments in einem regulären Browserfenster. Werden Tabs lediglich innerhalb einer Seite simuliert, gelten diese Funktionen nur für die äußere Hülle, nicht für die einzelnen Unteransichten.
So konfigurieren Sie den PWA-Tab-Anwendungsmodus
Die Aktivierung des Tab-Modus für eine PWA beginnt im Manifest durch die entsprechende Festlegung eines entsprechenden Eintrags. display_override KetteEine minimale Konfiguration könnte Folgendes spezifizieren "display": "standalone" , "display_override": Das bedeutet, dass der Browser nach Möglichkeit ein Fenster mit Registerkarten bevorzugen und andernfalls auf ein normales, eigenständiges Fenster zurückgreifen sollte.
Darüber hinaus ist die tab_strip Mit der Member-Funktion können Sie das Verhalten der Tab-Leiste der App anpassen.Dieses Objekt kann zwei optionale Untereigenschaften definieren: home_tab , new_tab_button. Wenn du weglässt tab_strip Der Browser wird standardmäßig das Verhalten verwenden, bei dem die Start-URL der App als Grundlage für die Erstellung neuer Tabs dient.
Das Konzept des Startbildschirms ist besonders wichtig.Es handelt sich um einen angehefteten Tab, der immer sichtbar sein muss, wenn das Anwendungsfenster geöffnet ist, und der seinen definierten Bereich nicht verlassen darf. Alle Links, die innerhalb dieses Tabs angeklickt werden, sollen stattdessen in neuen Anwendungstabs geöffnet werden. Die Konfiguration erfolgt über home_tab.scope_patterns, das ist eine Liste von URL-Mustern (oft einfache Pfadnamen wie "/" or "/index.html") relativ zur Manifest-URL.
Das new_tab_button Der Eintrag beschreibt das Verhalten der „Neuer Tab“-Funktion der Benutzeroberfläche.Es hat ein einziges url Ein Element, das angibt, welche Seite beim Klicken auf die Schaltfläche geöffnet werden soll, typischerweise etwas innerhalb des Anwendungsbereichs, wie z. B. "/create"Wenn diese URL in den Bereich des Startbildschirms fällt, zeigt die App überhaupt kein separates „Neuer Tab“-Steuerelement an, da davon ausgegangen wird, dass die Navigation von der Startansicht aus erfolgt.
Ein Beispielmanifest, das ein App-Fenster mit Registerkarten verknüpft, könnte (konzeptionell) folgendermaßen aussehen:Es definiert einen Namen, start_url, display einstellen standalone, display_override mit "tabbed"herunter, eine home_tab deren Geltungsbereich umfasst / , /index.htmlUnd eine new_tab_button konfiguriert mit einem "/create" URL. Mit dieser Konfiguration erhalten Benutzer einen permanenten Startbildschirm sowie die Möglichkeit, mit einem einzigen Klick weitere Dokumente zu öffnen.
Apps können außerdem zur Laufzeit erkennen, ob sie im Tab-Modus ausgeführt werden.. Verwendung der display-mode Für eine Medienfunktion könnten Sie beispielsweise einen CSS-Block wie folgt schreiben: @media (display-mode: tabbed) um Stile feinabzustimmen oder zu verwenden window.matchMedia('(display-mode: tabbed)').matches in JavaScript prüfen, ob der Tab-Anwendungsmodus aktiv ist, und das Verhalten der Benutzeroberfläche entsprechend anpassen.
Schließlich gibt es eine interessante Interaktion mit der Launch Handler API.Wenn eine Registerkarten-PWA festlegt "client_mode": "navigate-new" In der Startkonfiguration können Anwendungen in neuen Tabs innerhalb eines bestehenden Anwendungsfensters geöffnet werden, anstatt mehrere Fenster zu öffnen. Dies sorgt für einen übersichtlichen Arbeitsbereich und unterstützt die Idee einer einzigen, tabzentrierten Anwendungsumgebung.
Erstellung benutzerdefinierter Tab-Navigation mit PHP, Ajax und Xajax
Lange bevor PWAs systemweite Tabs hatten, entwickelten Webentwickler bereits eigene Tab-Navigationskomponenten mithilfe von HTML, CSS, JavaScript und serverseitigem Code.Ein klassischer Ansatz verwendet PHP zusammen mit dem Xajax-Framework, um Tab-Inhalte asynchron zu laden und die Seite ohne vollständiges Neuladen zu aktualisieren.
Die HTML-Struktur in einem solchen Beispiel ist recht einfach.Eine Verpackung <div> trägt eine Klasse wie pestanas und darin ein <ul> enthält <li> Elemente für jeden Tab. Jeder Listeneintrag hat eine eindeutige ID (z. B. pestana0, pestana1, pestana2und eine CSS-Klasse, die angibt, ob das Element aktiv oder inaktiv ist. Anker-Tags innerhalb dieser Listenelemente rufen eine von Xajax generierte JavaScript-Funktion auf, zum Beispiel javascript:void(xajax_cambia_contenido(0))und übergibt den Tab-Index an den Server.
Unterhalb der Tab-Liste befindet sich ein separater Container für den Inhalt des Tabs., oft a <div> mit einer ID wie cuerpopestanasWenn der Benutzer auf einen beliebigen Tab klickt, ruft der Ajax-Aufruf das entsprechende HTML-Fragment ab und fügt es in diesen Inhaltsbereich ein. Die Seite selbst wird nicht neu geladen; nur der innere HTML-Code des Inhaltscontainers ändert sich.
CSS spielt eine zentrale Rolle dabei, die Tabs interaktiv aussehen und sich auch so anfühlen zu lassen.Es könnten zwei Schlüsselklassen definiert werden: eine für inaktive Tabs (zum Beispiel) li.pestanainactivaund eine weitere für die ausgewählte Registerkarte (z. B. li.pestanaseleccionadaDie stilistischen Unterschiede – Hintergrundfarbe, Rahmen, Schriftarten – geben dem Nutzer klares Feedback darüber, welcher Tab aktiv ist. Zusätzliche Regeln erzwingen bestimmte Linkfarben oder entfernen Textdekorationen, sodass die Beschriftungen der gewünschten visuellen Identität entsprechen.
Serverseitig kann beispielsweise eine PHP-Funktion wie cambia_contenido() orchestriert die ReaktionEs empfängt den Tab-Index als Parameter und erstellt einen xajaxResponse Es sucht nach dem übereinstimmenden Inhalt eines PHP-Arrays von Strings. addAssign() Um die Seite zu aktualisieren: Ein Aufruf setzt die innerHTML of cuerpopestanas zum ausgewählten Text ändert eine weitere className Der angeklickte Tab wird auf den Stil „ausgewählt“ gesetzt, und eine Schleife setzt die übrigen Tabs auf die Klasse „inaktiv“ zurück.
Dieses Muster ist flexibel hinsichtlich der Herkunft der Inhalte.Anstelle fest codierter Textzeichenfolgen im Array können Sie HTML aus Vorlagen erstellen, Datensätze aus einer Datenbank abrufen oder Formulare und interaktive Widgets dynamisch generieren. Die Clientseite ist davon unbeeinflusst; sie erhält einfach aktualisiertes Markup, das im Tab-Body angezeigt wird, wenn der Benutzer den Tab wechselt.
Die Initialisierung erfolgt mit einem kleinen JavaScript-Codeabschnitt.Durch einen Anruf xajax_cambia_contenido(0) on window.onloadDie Seite wählt automatisch den ersten Tab aus und lädt dessen Inhalt, sobald das DOM bereit ist. Dadurch müssen Sie keine Inhalte im ursprünglichen HTML-Code fest codieren – das Tab-System wird von Anfang an vollständig per Ajax gesteuert.
Gestaltung von mobilen Tab-Leisten nach bewährten Methoden
Auf Mobilgeräten ist die untere Tab-Leiste eines der wichtigsten Navigationselemente und verdient daher besondere Aufmerksamkeit.Eine unübersichtliche oder uneinheitliche Tab-Leiste kann Benutzer schnell verwirren, insbesondere auf kleinen Bildschirmen, wo jedes Pixel zählt.
Eine der ersten Richtlinien ist, die Anzahl der Elemente in der Tableiste zu begrenzen.Beschränken Sie sich auf maximal vier oder fünf Symbole; andernfalls werden die Touch-Ziele und Beschriftungen so klein, dass sie schwer zu treffen und schwer verständlich sind. Benötigen Sie wirklich mehr Navigationsoptionen, ziehen Sie sekundäre Menüs oder andere Darstellungsformen wie Schubladen in Betracht.
Die Wahl des Symbols ist gleichermaßen entscheidend.Jedes Symbol sollte den Hauptzweck des jeweiligen Abschnitts klar vermitteln und sofort erkennbar sein. Textbeschriftungen können sparsam zur Erläuterung eingesetzt werden. Sind die Symbole jedoch gut gewählt und entsprechen sie den Konventionen der Plattform, lernen die Nutzer sie schnell und verlassen sich allein auf die visuelle Darstellung.
Die Zustandsangabe muss eindeutig sein.Verwenden Sie Farb-, Form- oder Größenänderungen, um den aktiven Tab hervorzuheben – beispielsweise durch einen farbigen Akzent, eine ausgefüllte Symbolvariante anstelle einer Kontur oder eine dezente Größenerhöhung. So wird deutlich, welchen Bereich der Nutzer gerade betrachtet. Gleichzeitig ist es ratsam, Benachrichtigungs-Badges oder numerische Zähler direkt in der Tableiste zu vermeiden, da diese ständig visuelle Unruhe erzeugen und von der Navigation ablenken können.
Platzierung und Ausdauer spielen ebenfalls eine große Rolle.Die Tab-Leiste sollte am unteren Bildschirmrand platziert sein und sowohl im Hoch- als auch im Querformat stets gut sichtbar und mit dem Daumen erreichbar sein. Sie darf nicht von Tastaturen, Dialogfeldern oder schwebenden Aktionsschaltflächen verdeckt werden und sollte nicht mit anderen Elementen überlagert werden, die Berührungen abfangen könnten. Eine stabile Position der Leiste fördert die intuitive Bedienung und sorgt für eine vorhersehbare Navigation.
Nutzung von Bootstrap, Bootbox.js und Font Awesome für Web-Tab-UIs
Für traditionelle Webprojekte bieten Frameworks wie Bootstrap 3 sofort einsatzbereite Tab-Komponenten, die sich leicht gestalten und erweitern lassen; siehe wie man eine Website von Grund auf erstelltDas gleiche Toolkit bietet Schaltflächen, Dropdown-Menüs, Panels und Modalfenster, wodurch sich auf einfache Weise zusammenhängende Benutzeroberflächen erstellen lassen, bei denen sich die Registerkarten nahtlos in das übrige Design einfügen.
Die Navigationskomponenten von Bootstrap enthalten vorgefertigtes Markup und Klassen zum Erstellen horizontaler Tab-Leisten.Durch die Kombination der Standard-Navigationsklassen mit tabspezifischen Klassen können Sie mit minimalem JavaScript zwischen Inhaltsbereichen wechseln. Da alle Elemente dasselbe Bootstrap-Stilsystem verwenden, passen sich Ihre Tabs automatisch dem Erscheinungsbild von Menüs, Panels und Formularen auf der gesamten Website an.
Um Benachrichtigungen und Bestätigungen so zu handhaben, dass sie dem Erscheinungsbild von Bootstrap entsprechen, greifen viele Entwickler auf Bootbox.js zurück.Diese kleine Bibliothek umschließt Bootstrap-Modalfenster mit praktischen JavaScript-APIs, sodass Sie Bestätigungsdialoge oder Warnmeldungen anzeigen können, wenn Benutzer zwischen Tabs wechseln, versuchen, nicht gespeicherte Ansichten zu schließen oder potenziell destruktive Aktionen auslösen – und das alles, ohne die durch das CSS-Framework etablierte visuelle Konsistenz zu beeinträchtigen.
Die Ikonografie basiert häufig auf Font Awesome.Dieses umfangreiche Icon-Set integriert sich nahtlos in Bootstrap und bietet Ihnen eine riesige Auswahl an Symbolen für Tab-Beschriftungen und Inhaltsbereiche. Ob Sie generische Icons für Startseite, Einstellungen, Nachrichten und Dateien oder spezialisierte Glyphen benötigen – Font Awesome hilft Ihnen, Ihre Botschaft klar zu vermitteln, ohne dass Sie jedes Mal eigene Bilder erstellen müssen.
Durch die Kombination der strukturellen Komponenten von Bootstrap, Bootbox.js-Modalen und Font Awesome-IconsSie können ansprechende, tabbasierte Benutzeroberflächen erstellen, die sich elegant und stimmig anfühlen. Tabs, Benachrichtigungen und Symbole folgen derselben Designsprache, wodurch die Benutzererfahrung durchdacht und nicht wie aus unpassenden Elementen zusammengesetzt wirkt.
Auf Android-Geräten, im Web, bei PWAs und PHP-basierten Websites sind Registerkarten nach wie vor eine zuverlässige Methode, um mehrere Ansichten oder Dokumente in einem einzigen Frame zu organisieren.Ob Sie sich für das TabLayout von Material Design mit einem ViewPager, verschachtelte Tabs in Elementor, den Tab-Anwendungsmodus von ChromeOS für PWAs oder individuelle Lösungen mit Xajax und Bootstrap entscheiden – das Kernziel bleibt dasselbe: die Navigation einfach, die Inhalte auffindbar und Kontextänderungen glasklar zu gestalten.
