Widget karty používa vlastný prvok <devsite-selector> na organizáciu údajov, ktoré majú viacero reprezentácií, ako sú príklady kódu v rôznych programovacích jazykoch alebo údajové štruktúry reprezentované rôznymi formátmi (napríklad JSON, YAML alebo XML).
Všeobecné použitie
Nasledujúci príklad používa vlastný prvok <devsite-selector> na vykreslenie troch sekcií kariet pomocou HTML.
Názov karty 1
Karta 1 Obsah
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Názov karty 2
Karta 2 Obsah
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Názov karty 3
Karta 3 Obsah
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Nasledujúci príklad používa syntax Markdown na vykreslenie rovnakých troch kariet.
Názov karty 1
Karta 1 Obsah
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Názov karty 2
Karta 2 Obsah
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Názov karty 3
Karta 3 Obsah
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Miniaplikácia Tabs s rozbaľovacím menu
V nasledujúcom príklade sa používa vlastný prvok <devsite-selector> , ale má príliš veľa kariet na to, aby sa zmestili na obrazovku a automaticky preteká do rozbaľovacej ponuky Viac .
jablká
Obsah o jablkách
Marhule
Obsah o marhuliach
Avokádo
Obsah o avokáde
Obr
Obsah o figách
Hrozno
Obsah o hrozne
Kiwi
Obsah o kivi
Citróny
Obsah o citrónoch
Limetky
Obsah o limetkách
Mango
Obsah o mangu
Broskyne
Obsah o broskyniach
V nasledujúcom príklade sa používa syntax Markdown na vykreslenie rovnakej rozširujúcej ponuky.
jablká
Obsah o jablkách
Marhule
Obsah o marhuliach
Avokádo
Obsah o avokáde
Obr
Obsah o figách
Hrozno
Obsah o hrozne
Kiwi
Obsah o kivi
Citróny
Obsah o citrónoch
Limetky
Obsah o limetkách
Mango
Obsah o mangu
Broskyne
Obsah o broskyniach
Duplicitné názvy kariet vo viacerých miniaplikáciách kariet
Kliknutie na kartu ovplyvní všetky ostatné karty na stránke s rovnakým textom v rovnakej syntaxi. Napríklad kliknutie na jablká alebo marhule v miniaplikácii nižšie ovplyvní aj druhú miniaplikáciu v predchádzajúcej časti, pretože obe sú vytvorené pomocou Markdown.
jablká
Viac obsahu o jablkách!
Marhule
Viac obsahu o marhuliach!
Prispôsobenie miniaplikácií kariet
Aj keď môžete vytvoriť widget kariet pomocou Markdown, na priradenie vlastných atribútov musíte použiť syntax HTML.
Zalamovanie textu v rámci karty
Text, ktorý presahuje maximálnu šírku pre kartu nastavenú službou DevSite, je orezaný a pripojený elipsami. Nasledujúci príklad používa triedu two-line-tab v rámci vlastného prvku <devsite-selector> na zalomenie textu na druhej karte.
Ide o dlhý štítok, ktorý sa nezabalí
Tento štítok sa nezalomí do iného riadku.
Tento štítok sa zalomí do druhého riadku
Štítok pre túto kartu sa zalomí do druhého riadku.
Obtekanie textu na karte s menším štítkom
Nasledujúci príklad nastaví two-line-tab na prvý riadok a tab-label na druhý riadok v rámci vlastného prvku <devsite-selector> , aby sa v druhom riadku dvojriadkovej karty zobrazilo menšie označenie.
Swift
Táto karta má označenie Swift .
Java
Táto dvojriadková karta má pod označením Java menší štítok Android .
Kotlin
Táto dvojriadková karta má pod štítkom Kotlin menší štítok Android .
Java
Táto karta má označenie Java .
Priame prepojenie na konkrétnu kartu
Nasledujúci príklad priamo odkazuje na konkrétnu kartu a otvára ju zadaním id v rámci vlastného prvku <devsite-selector> .
Cobol
Táto karta je predvolená, ale môžete použiť kotvu #cobol .
Fortran
Pripojením kotvy #fortran k svojmu odkazu by ste priamo odkazovali na túto kartu.
Haskell
Táto karta by vo vašom odkaze používala kotvu #haskell .
Vytvorenie odkazu so všetkými miniaplikáciami otvorenými na rovnakú kartu
Nasledujúci odkaz pripojí parameter dopytu ?tab=Apricots k adrese URL tejto stránky a načíta stránku s otvorenou kartou Marhule na všetkých selektoroch:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots