Widżet kart używa elementu niestandardowego <devsite-selector> do porządkowania danych o wielu obrazach, np. przykładów kodu w różnych językach programowania czy strukturach reprezentowanych przez różne formaty (np. JSON, YAML). lub XML).
Ogólne wykorzystanie
W przykładzie poniżej użyto elementu niestandardowego <devsite-selector> do wyrenderowania 3 sekcji kart za pomocą HTML.
Karta 1 – tytuł
Karta 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper torc nec dictum sagittis. Nunca Masa ipsum, mollis non neque sed, vulputate dignissim odio.
Karta 2 – tytuł
Karta 2
Curabitur semper torc nec dictum sagittis. Nunca Masa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Karta 3 – tytuł
Treść na karcie 3
Nunc Masa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis.
W poniższym przykładzie użyto składni języka Markdown do wyrenderowania tych samych 3 kart.
Karta 1 – tytuł
Karta 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis. Nunca Masa ipsum, mollis non neque sed, wulgarny dignissim odio.
Karta 2 – tytuł
Treść na karcie 2
Curabitur semper torc nec dictum sagittis. Nunca Masa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Karta 3 – tytuł
Treść na karcie 3
Nunc Masa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor
nec dictum sagittis.
Widżet kart z rozszerzonym menu
W poniższym przykładzie użyto elementu niestandardowego <devsite-selector>, ale zawiera on zbyt wiele kart, aby zmieścić się na ekranie, i automatycznie wyświetli się w menu Więcej.
Jabłka
Treści o jabłkach
Morele
Treści o Morele
Awokado
Treści o awokado
Figi
Treści na temat fig
Winogrona
Treści na temat winogron
Kiwifruit
Treści o kiwi
Cytryny
Treści o cytrynie
Limonki
Treści o limonkach
Mango
Treści o mango
Brzoskwinie
Treści o brzoskwiniach
W poniższym przykładzie użyto składni języka Markdown do wyrenderowania tego samego rozszerzonego menu.
Jabłka
Treści o jabłkach
Morele
Treści o Morele
Awokado
Treści o awokado
Figi
Treści na temat fig
Winogrona
Treści na temat winogron
Kiwifruit
Treści o kiwi
Cytryny
Treści o cytrynie
Limonki
Treści o limonkach
Mango
Treści o mango
Brzoskwinie
Treści o brzoskwiniach
Zduplikowane nazwy kart w widżecie wielu kart
Kliknięcie karty wpływa na wszystkie pozostałe karty na stronie, które mają ten sam tekst w tej samej składni. Na przykład kliknięcie Apple lub Acocots w widżecie poniżej ma również wpływ na drugi widżet w poprzedniej sekcji, ponieważ oba są tworzone za pomocą Markdown.
Jabłka
Więcej informacji o jabłkach!
Morele
Więcej informacji o priorytecie!
Dostosowywanie widżetów kart
Widżet kart możesz utworzyć za pomocą Markdowna, ale do przypisywania atrybutów niestandardowych musisz używać składni HTML.
Zawijanie tekstu na karcie
Tekst, który przekracza maksymalną długość karty ustawionej w DevSite, zostanie przycięty i dodany do wielokropka. W przykładzie poniżej klasa two-line-tab w elemencie niestandardowym <devsite-selector> zawija tekst na drugiej karcie.
To długa etykieta, która się nie zawija
Ta etykieta nie przechodzi do innego wiersza.
Ta etykieta przechodzi do drugiego wiersza
Etykieta tej karty zostanie ukończona w drugim wierszu.
Zawijanie tekstu na karcie z mniejszą etykietą
W przykładzie poniżej ustawiono two-line-tab w pierwszym wierszu, a tab-label w drugim w elemencie niestandardowym <devsite-selector>, aby wyświetlić mniejszą etykietę w drugim wierszu karty dwuwierszowej ,
Swift
Ta karta ma etykietę Swift.
Java
Ta dwuwierszowa karta ma mniejszą etykietę Androida pod etykietą Java.
Kotlin
Ta dwuwierszowa karta ma mniejszą etykietę Android poniżej etykiety Kotlin.
Java
Ta karta ma etykietę Java.
Bezpośrednie linki do konkretnej karty
Ten przykład zawiera bezpośredni link do konkretnej karty i otwiera ją, określając id w elemencie niestandardowym <devsite-selector>.
koder
Jest to karta domyślna, ale możesz użyć kotwicy #cobol.
Fortran
Aby utworzyć bezpośredni link do tej karty, dołącz do linku kotwicę #fortran.
Haskell
Będzie ona zawierać kotwicę #haskell w Twoim linku.
Tworzenie linku ze wszystkimi widżetami otwartymi na tę samą kartę
Ten link dołącza parametr zapytania ?tab=Apricots do adresu URL tej strony i ładuje stronę z otwartą kartą Apricots we wszystkich selektorach:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots