Widgetul file folosește elementul personalizat <devsite-selector> pentru a organiza datele care au mai multe reprezentări, cum ar fi exemple de cod în diferite limbaje de programare sau structuri de date reprezentate prin diferite formate (cum ar fi JSON, YAML sau XML).
Utilizare generală
Următorul exemplu utilizează elementul personalizat <devsite-selector> pentru a reda trei secțiuni de file folosind HTML.
Fila 1 Titlu
Fila 1 Conținut
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper torttor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Fila 2 Titlu
Fila 2 Conținut
Curabitur semper torttor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fila 3 Titlu
Fila 3 Conținut
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper torttor nec dictum sagittis.
Următorul exemplu folosește sintaxa Markdown pentru a reda aceleași trei file.
Fila 1 Titlu
Fila 1 Conținut
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper torttor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Fila 2 Titlu
Fila 2 Conținut
Curabitur semper torttor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fila 3 Titlu
Fila 3 Conținut
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper torttor nec dictum sagittis.
Widget cu file cu un meniu de supraîncărcare
Următorul exemplu folosește elementul personalizat <devsite-selector> , dar are prea multe file pentru a încăpea pe ecran și se revarsă automat în meniul derulant Mai multe .
Merele
Conținut despre mere
Caise
Conținut despre caise
Avocado
Conținut despre avocado
Figurile
Conținut despre smochine
Strugurii
Conținut despre struguri
Kiwi
Conținut despre kiwi
Lămâi
Conținut despre lămâi
Limes
Conținut despre tei
Mango
Conținut despre mango
Piersici
Conținut despre piersici
Următorul exemplu folosește sintaxa Markdown pentru a reda același meniu de overflow.
Merele
Conținut despre mere
Caise
Conținut despre caise
Avocado
Conținut despre avocado
Figurile
Conținut despre smochine
Strugurii
Conținut despre struguri
Kiwi
Conținut despre kiwi
Lămâi
Conținut despre lămâi
Limes
Conținut despre tei
Mango
Conținut despre mango
Piersici
Conținut despre piersici
Duplicați nume de file în widget-uri cu mai multe file
Făcând clic pe o filă afectează toate celelalte file de pe pagină cu același text în aceeași sintaxă. De exemplu, făcând clic pe Mere sau Caise în widgetul de mai jos afectează și al doilea widget din secțiunea anterioară, deoarece ambele sunt create cu Markdown.
Merele
Mai mult conținut despre mere!
Caise
Mai mult conținut și despre caise!
Personalizarea widget-urilor filelor
Deși puteți crea widgetul de file cu Markdown, trebuie să utilizați sintaxa HTML pentru a atribui atribute personalizate.
Încadrarea textului într-o filă
Textul care depășește lățimea maximă pentru o filă setată de DevSite este tăiat și atașat cu elipse. Următorul exemplu folosește clasa cu two-line-tab cadrul elementului personalizat <devsite-selector> pentru a include textul în a doua filă.
Aceasta este o etichetă lungă care nu se înfășoară
Această etichetă nu se încadrează într-o altă linie.
Această etichetă se înfășoară pe o a doua linie
Eticheta pentru această filă se încadrează într-o a doua linie.
Încadrarea textului într-o filă cu o etichetă mai mică
Următorul exemplu setează two-line-tab pe prima linie și tab-label pe a doua linie din elementul personalizat <devsite-selector> pentru a afișa o etichetă mai mică pe a doua linie a unei file cu două linii.
Rapid
Această filă are o etichetă Swift .
Java
Această filă cu două linii are o etichetă Android mai mică sub eticheta Java .
Kotlin
Această filă cu două linii are o etichetă Android mai mică sub eticheta Kotlin .
Java
Această filă are o etichetă Java .
Legătură directă către o anumită filă
Următorul exemplu trimite direct la o filă specifică și deschide o anumită filă, specificând id -ul din elementul personalizat <devsite-selector> .
Cobol
Această filă este implicită, dar puteți folosi ancora #cobol .
Fortran
Veți face legătura direct la această filă adăugând ancora #fortran la linkul dvs.
Haskell
Această filă ar folosi ancora #haskell din linkul dvs.
Crearea unui link cu toate widget-urile deschise în aceeași filă
Următorul link adaugă parametrul de interogare ?tab=Apricots la adresa URL a acestei pagini și încarcă pagina cu fila Caise deschisă pe toate selectoarele:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots