Widget karty používá vlastní prvek <devsite-selector> k uspořádání dat, která mají více reprezentací, jako jsou příklady kódu v různých programovacích jazycích nebo datové struktury reprezentované různými formáty (jako je JSON, YAML nebo XML).
Obecné použití
Následující příklad používá vlastní prvek <devsite-selector> k vykreslení tří sekcí karet pomocí HTML.
Záložka 1 Název
Záložka 1 Obsah
Lorem ipsum dolor sit amet, consectetur adipiscing elita. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Záložka 2 Název
Záložka 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 elita.
Záložka 3 Název
Záložka 3 Obsah
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elita. Curabitur semper tortor nec dictum sagittis.
Následující příklad používá syntaxi Markdown k vykreslení stejných tří karet.
Záložka 1 Název
Záložka 1 Obsah
Lorem ipsum dolor sit amet, consectetur adipiscing elita. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Záložka 2 Název
Záložka 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 elita.
Záložka 3 Název
Záložka 3 Obsah
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elita. Curabitur semper tortor nec dictum sagittis.
Widget Tabs s rozbalovací nabídkou
Následující příklad používá vlastní prvek <devsite-selector> , ale má příliš mnoho karet, které se nevejdou na obrazovku, a automaticky přeteče do rozevírací nabídky Více .
jablka
Obsah o jablkách
Meruňky
Obsah o meruňkách
Avokádo
Obsah o avokádu
Obr
Obsah o fících
Hrozny
Obsah o hroznech
Kiwi
Obsah o kiwi
Citrony
Obsah o citronech
Limetky
Obsah o limetkách
Mango
Obsah o mangu
Broskve
Obsah o broskvích
Následující příklad používá syntaxi Markdown k vykreslení stejné přetékající nabídky.
jablka
Obsah o jablkách
Meruňky
Obsah o meruňkách
Avokádo
Obsah o avokádu
Obr
Obsah o fících
Hrozny
Obsah o hroznech
Kiwi
Obsah o kiwi
Citrony
Obsah o citronech
Limetky
Obsah o limetkách
Mango
Obsah o mangu
Broskve
Obsah o broskvích
Duplicitní názvy karet ve widgetech s více kartami
Klepnutím na kartu ovlivníte všechny ostatní karty na stránce se stejným textem ve stejné syntaxi. Například kliknutí na Jablka nebo Meruňky ve widgetu níže ovlivní také druhý widget v předchozí části, protože oba jsou vytvořeny pomocí Markdown.
jablka
Další obsah o jablkách!
Meruňky
Další obsah o meruňkách!
Přizpůsobení widgetů karet
I když můžete vytvořit widget karet pomocí Markdown, musíte k přiřazení vlastních atributů použít syntaxi HTML.
Obtékání textu na kartě
Text, který překračuje maximální šířku pro kartu nastavenou webem DevSite, je oříznut a doplněn elipsami. Následující příklad používá třídu two-line-tab v rámci vlastního prvku <devsite-selector> k obtékání textu na druhé kartě.
Jedná se o dlouhý štítek, který se neobtéká
Tento štítek se nezalomí do jiného řádku.
Tento štítek se zalomí do druhého řádku
Popisek pro tuto kartu se zalomí do druhého řádku.
Obtékání textu na kartě s menším štítkem
Následující příklad nastaví two-line-tab na první řádek a tab-label na druhý řádek v rámci vlastního prvku <devsite-selector> , aby se na druhém řádku dvouřádkového tabulátoru zobrazil menší štítek.
Rychlý
Tato karta má štítek Swift .
Jáva
Tato dvouřádková karta má menší štítek Android pod štítkem Java .
Kotlin
Tato dvouřádková karta má menší štítek Android pod štítkem Kotlin .
Jáva
Tato karta má štítek Java .
Přímé propojení na konkrétní kartu
Následující příklad přímo odkazuje na konkrétní kartu a otevře ji zadáním id v rámci vlastního prvku <devsite-selector> .
Cobol
Tato karta je výchozí, ale můžete použít kotvu #cobol .
Fortran
Na tuto kartu byste přímo odkazovali připojením kotvy #fortran ke svému odkazu.
Haskell
Tato karta by ve vašem odkazu používala kotvu #haskell .
Vytvoření odkazu se všemi widgety otevřenými na stejnou kartu
Následující odkaz připojí parametr dotazu ?tab=Apricots k adrese URL této stránky a načte stránku s kartou Meruňky otevřenou ve všech selektorech:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots