Das Tab-Widget verwendet das benutzerdefinierte <devsite-selector>-Element, um Daten mit mehreren Darstellungen zu organisieren, beispielsweise Codebeispiele in verschiedenen Programmiersprachen oder Datenstrukturen mit verschiedenen Formaten (z. B. JSON, YAML, oder XML).
Allgemeine Verwendung
Im folgenden Beispiel wird das benutzerdefinierte Element <devsite-selector> verwendet, um drei Tabbereiche mit HTML zu rendern.
Tab 1 – Titel
Tab 1 Inhalt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur Semper Torr nec dictum Sagittis. Nunc massa ipsum, mollis non neque
sed, vulputate dignissim odio.
Tab 2
Tab 2 Content
Curabitur semper Torr nec dictum Sagittis. Nunc massa ipsum, mollis
non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Tab 3
Tab 3 Content
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur Semper Torr nec dictum Sagittis.
Im folgenden Beispiel wird die Markdown-Syntax verwendet, um dieselben drei Tabs zu rendern.
Tab 1 – Titel
Tab 1 Inhalt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur Semper
tortor nec dictum Sagittis. Nunc massa ipsum, mollis non neque sed,
vulputate dignissim odio.
Tab 2
Tab 2 Content
Curbitur semper Torr nec dictum Sagittis. Nunc massa ipsum, mollis non need sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, conectetur adipiscing elit.
Tab 3
Tab 3 Content
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur Semper Torrtor
Nec dictum Sagittis.
Tab-Widget mit einem Dreipunkt-Menü
Im folgenden Beispiel wird das benutzerdefinierte Element <devsite-selector> verwendet, aber es gibt zu viele Tabs, die auf den Bildschirm passen, und wird automatisch auf das Drop-down-Menü Mehr übertragen.
Äpfel
Inhalte zu Äpfeln
Aprikosen
Inhalte zu Aprikosen
Avocados
Inhalte zu Avocados
Feigen
Inhalte zu Feigen
Trauben
Traube
Kiwi
Inhalt über Kiwifruit
Zitronen
Inhalte zu Zitronen
Zitronen und Limetten
Inhalt über Limette
Mangos
Inhalte zu Mangos
Pfirsiche
Inhalte zu Pfirsichen
Im folgenden Beispiel wird die Dreipunkt-Menü-Syntax verwendet, um dasselbe Dreipunkt-Menü zu rendern.
Äpfel
Inhalte zu Äpfeln
Aprikosen
Inhalte zu Aprikosen
Avocados
Inhalte zu Avocados
Feigen
Inhalte zu Feigen
Trauben
Traube
Kiwi
Inhalt über Kiwifruit
Zitronen
Inhalte zu Zitronen
Zitronen und Limetten
Inhalt über Limette
Mangos
Inhalte zu Mangos
Pfirsiche
Inhalte zu Pfirsichen
Doppelte Tab-Namen in mehreren Tabs-Widgets
Wenn Sie auf einen Tab klicken, wirkt sich das auf alle anderen Tabs der Seite aus, die denselben Text in derselben Syntax enthalten. Wenn Sie beispielsweise im Widget unten auf Apples oder Apricots klicken, wirkt sich das auch auf das zweite Widget im vorherigen Abschnitt aus, weil beide mit Markdown erstellt wurden.
Äpfel
Mehr Inhalte zu Äpfeln!
Aprikosen
Weitere Inhalte zu Aprikosen!
Tabs-Widgets anpassen
Du kannst das Tab-Widget zwar mit Markdown erstellen, aber du musst die HTML-Syntax verwenden, um benutzerdefinierte Attribute zuzuweisen.
Text umbrechen auf einem Tab
Text, der die maximale Breite für einen von DevSite festgelegten Tab überschreitet, wird abgeschnitten und mit Auslassungspunkten versehen. Im folgenden Beispiel wird die Klasse two-line-tab im benutzerdefinierten Element <devsite-selector> verwendet, um Text auf dem zweiten Tab umzuschließen.
Dieses lange Label wird nicht umgebrochen.
Dieses Label wird nicht in eine andere Zeile umgebrochen.
Dieses Label umschließt eine zweite Zeile
Das Label für diesen Tab wird in einer zweiten Zeile umgebrochen.
Text auf einem Tab mit einem kleineren Label umschließen
Im folgenden Beispiel wird two-line-tab auf die erste Zeile und tab-label auf die zweite Zeile im benutzerdefinierten Element <devsite-selector> festgelegt, um ein kleineres Label in der zweiten Zeile eines zweizeiligen Tabs anzuzeigen. vorliegen.
Swift
Dieser Tab ist mit dem Label Swift gekennzeichnet.
Java
Dieser zweizeilige Tab hat das kleinere Label Android unter dem Label Java.
Kotlin
Dieser zweizeilige Tab hat das kleinere Label Android unter dem Label Kotlin.
Java
Dieser Tab hat das Label Java.
Direkte Verknüpfung mit einem bestimmten Tab
Im folgenden Beispiel wird ein bestimmter Tab direkt verlinkt und geöffnet. Dazu wird id innerhalb des benutzerdefinierten Elements <devsite-selector> angegeben.
Cobolis
Dieser Tab ist die Standardeinstellung, aber du kannst auch den Anker #cobol verwenden.
Fortran
Hätten Sie einen direkten Link zu diesem Tab, indem Sie den Anker #fortran an den Link anhängen.
Haskell
Auf diesem Tab wird der Anker #haskell in deinem Link verwendet.
Link mit allen Widgets wird auf demselben Tab geöffnet
Über den folgenden Link wird der Suchparameter ?tab=Apricots an die URL dieser Seite angehängt. Die Seite wird geöffnet, wobei der Tab Apricots bei allen Selektoren geöffnet ist:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots