A lapok felületi elem a <devsite-selector> egyéni elemet használja a többszörös ábrázolással rendelkező adatok rendszerezésére, például kódpéldák különböző programozási nyelveken vagy különböző formátumok (például JSON, YAML vagy XML) által képviselt adatstruktúrák.
Általános használat
A következő példa a <devsite-selector> egyéni elemet használja három lapszakasz HTML használatával történő megjelenítéséhez.
1. lap címe
1. lap Tartalom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
2. lap címe
2. lap Tartalom
Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. lap Cím
3. lap Tartalom
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis.
A következő példa a Markdown szintaxist használja ugyanazon három lap megjelenítéséhez.
1. lap címe
1. lap Tartalom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
2. lap címe
2. lap Tartalom
Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. lap Cím
3. lap Tartalom
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis.
Lapok widget túlcsordulási menüvel
A következő példa a <devsite-selector> egyéni elemet használja, de túl sok lap van benne ahhoz, hogy elférjen a képernyőn, és automatikusan túlcsordul a Továbbiak legördülő menübe.
Almák
Tartalom az almáról
Sárgabarack
Tartalom a sárgabarackról
Avokádó
Tartalom az avokádóról
ábra
Tartalom a fügéről
Szőlő
Tartalom a szőlőről
Kivi
Tartalom a kiviről
Citrom
Tartalom a citromról
Limes
Tartalom a limesről
Mangó
Tartalom a mangóról
Őszibarack
Tartalom az őszibarackkal kapcsolatban
A következő példa a Markdown szintaxist használja ugyanazon túlcsordulási menü megjelenítéséhez.
Almák
Tartalom az almáról
Sárgabarack
Tartalom a sárgabarackról
Avokádó
Tartalom az avokádóról
ábra
Tartalom a fügéről
Szőlő
Tartalom a szőlőről
Kivi
Tartalom a kiviről
Citrom
Tartalom a citromról
Limes
Tartalom a limesről
Mangó
Tartalom a mangóról
Őszibarack
Tartalom az őszibarackkal kapcsolatban
Lapnevek duplikálása több lap modulban
Ha egy fülre kattint, az érinti az oldal összes többi lapját, amelyek ugyanazt a szöveget tartalmazzák ugyanabban a szintaxisban. Például, ha az alábbi widgetben az Alma vagy a Sárgabarack elemre kattint, az hatással lesz az előző szakasz második widgetére is, mivel mindkettő Markdown-szal készült.
Almák
További tartalom az almáról!
Sárgabarack
További tartalom a kajszibarackról is!
A lapok widgetek testreszabása
Bár a lapok widgetet a Markdown segítségével készítheti el, HTML szintaxist kell használnia az egyéni attribútumok hozzárendeléséhez.
Szöveg tördelése egy lapon belül
A DevSite által beállított lap maximális szélességét meghaladó szöveget a rendszer levágja, és ellipszisekkel fűzi hozzá. A következő példa a two-line-tab osztályt használja a <devsite-selector> egyéni elemen belül a szöveg második lapon belüli tördeléséhez.
Ez egy hosszú címke, amelyet nem csomagolnak be
Ez a címke nem törődik másik sorba.
Ez a címke egy második sorba tördelődik
Ennek a lapnak a címkéje egy második sorra törekszik.
Szöveg tördelése egy lapon belül egy kisebb címkével
A következő példa a two-line-tab az első sorra, a tab-label et pedig a második sorra állítja be a <devsite-selector> egyéni elemen belül, hogy egy kisebb címke jelenjen meg a kétsoros lap második sorában.
Gyors
Ezen a lapon Swift címke található.
Jáva
Ezen a kétsoros lapon egy kisebb Android címke található a Java címke alatt.
Kotlin
Ezen a kétsoros lapon egy kisebb Android címke található a Kotlin címke alatt.
Jáva
Ez a lap Java címkével rendelkezik.
Közvetlen hivatkozás egy adott lapra
A következő példa közvetlenül hivatkozik egy adott lapra, és egy adott lapot nyit meg az id megadásával a <devsite-selector> egyéni elemben.
Cobol
Ez a lap az alapértelmezett, de használhatja a #cobol horgonyt.
Fortran
Közvetlenül erre a lapra hivatkozhat, ha a linkhez csatolja a #fortran horgonyt.
Haskell
Ez a lap a #haskell horgonyt használja a linkben.
Hivatkozás létrehozása az összes widgettel ugyanazon a lapon
A következő link hozzáfűzi a ?tab=Apricots lekérdezési paramétert az oldal URL-jéhez, és betölti az oldalt, ahol a Sárgabarack fül minden választónál nyitva van:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots