Widget kartica koristi prilagođeni element <devsite-selector> za organiziranje podataka koji imaju višestruke reprezentacije, kao što su primjeri koda u različitim programskim jezicima ili strukture podataka predstavljene različitim formatima (kao što su JSON, YAML ili XML).
Opća upotreba
Sljedeći primjer koristi prilagođeni element <devsite-selector> za renderiranje tri odjeljka kartice pomoću HTML-a.
Naslov kartice 1
Kartica 1 Sadržaj
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Naslov kartice 2
Kartica 2 Sadržaj
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Naslov kartice 3
Kartica 3 Sadržaj
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Sljedeći primjer koristi Markdown sintaksu za renderiranje iste tri kartice.
Naslov kartice 1
Kartica 1 Sadržaj
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Naslov kartice 2
Kartica 2 Sadržaj
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Naslov kartice 3
Kartica 3 Sadržaj
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Tabs widget s preljevnim izbornikom
Sljedeći primjer koristi prilagođeni element <devsite-selector> , ali ima previše kartica da stane na zaslon i automatski se prelijeva u padajući izbornik Više .
Jabuke
Sadržaj o jabukama
marelice
Sadržaj o marelicama
Avokado
Sadržaj o avokadu
Sl
Sadržaj o smokvama
Grožđe
Sadržaj o grožđu
Voće kivi
Sadržaj o kiviju
Limuni
Sadržaj o limunu
Limes
Sadržaj o limetima
Mango
Sadržaj o mangu
Breskve
Sadržaj o breskvama
Sljedeći primjer koristi sintaksu Markdown za generiranje istog preljevnog izbornika.
Jabuke
Sadržaj o jabukama
marelice
Sadržaj o marelicama
Avokado
Sadržaj o avokadu
Sl
Sadržaj o smokvama
Grožđe
Sadržaj o grožđu
Voće kivi
Sadržaj o kiviju
Limuni
Sadržaj o limunu
Limes
Sadržaj o limetima
Mango
Sadržaj o mangu
Breskve
Sadržaj o breskvama
Duplicirani nazivi kartica u widgetima više kartica
Klik na karticu utječe na sve ostale kartice na stranici s istim tekstom u istoj sintaksi. Na primjer, klikom na Jabuke ili Marelice u widgetu u nastavku također utječe na drugi widget u prethodnom odjeljku jer su oba napravljena s Markdownom.
Jabuke
Više sadržaja o jabukama!
marelice
Više sadržaja i o marelicama!
Prilagođavanje widgeta kartica
Iako možete izraditi widget kartica s Markdownom, morate koristiti HTML sintaksu za dodjelu prilagođenih atributa.
Prelamanje teksta unutar kartice
Tekst koji premašuje maksimalnu širinu za karticu koju je postavio DevSite izrezuje se i dodaje elipsama. Sljedeći primjer koristi klasu two-line-tab unutar prilagođenog elementa <devsite-selector> za prelamanje teksta unutar druge kartice.
Ovo je duga naljepnica koja se ne omota
Ova oznaka ne prelazi u drugi redak.
Ova oznaka prelazi u drugi redak
Oznaka za ovu karticu prelazi u drugi redak.
Prelamanje teksta unutar kartice s manjom oznakom
Sljedeći primjer postavlja two-line-tab na prvi redak i tab-label na drugi redak unutar <devsite-selector> prilagođenog elementa kako bi se prikazala manja oznaka u drugom retku kartice s dva retka.
Brz
Ova kartica ima oznaku Swift .
Java
Ova kartica s dva retka ima manju Android oznaku ispod oznake Java .
Kotlin
Ova kartica s dva retka ima manju Android oznaku ispod oznake Kotlin .
Java
Ova kartica ima oznaku Java .
Izravno povezivanje na određenu karticu
Sljedeći primjer izravno povezuje i otvara određenu karticu navođenjem id -a unutar <devsite-selector> prilagođenog elementa.
Cobol
Ova je kartica zadana, ali možete koristiti #cobol sidro.
Fortran
Povezali biste se izravno na ovu karticu dodavanjem #fortran sidra na svoju vezu.
Haskell
Ova kartica koristi #haskell sidro u vašoj vezi.
Izrada veze sa svim widgetima otvorenim na istoj kartici
Sljedeća veza dodaje parametar upita ?tab=Apricots URL-u ove stranice i učitava stranicu s karticom Marelice otvorenom na svim selektorima:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots