Il widget delle schede utilizza l'elemento personalizzato <devsite-selector> per organizzare i dati in base a più rappresentazioni, ad esempio codici di esempio in diversi linguaggi di programmazione o strutture di dati rappresentate da formati diversi (ad esempio JSON, YAML, o XML).
Uso generico
L'esempio riportato di seguito utilizza l'elemento personalizzato <devsite-selector> per visualizzare tre sezioni di schede tramite HTML.
Titolo scheda 1
Scheda 1 Contenuti
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
semper tortor nec dictum sagittis. Nunc massaggi ipsum, mollis non neque sed, vulputate dignissim odio.
Titolo scheda 2
Tab 2 Content
Curabitur semper tortor nec dictum sagittis. Nunc massaggi ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Titolo scheda 3
Tab 3 Content
Nunc massaggi ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis.
L'esempio seguente utilizza la sintassi Markdown per visualizzare le stesse tre schede.
Titolo scheda 1
Scheda 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis. Nunc massaggi ipsum, mollis non neque sed,
vulputate dignissim odio.
Titolo scheda 2
Contenuti della scheda 2
Cabitur semper tortor nec dictum sagittis. Nunc massaggi ipsum, mollis non
neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Titolo scheda 3
Tab 3 Contenuti
Nunc massaggi ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor
nec dictum sagittis.
Widget Schede con un menu extra
L'esempio seguente utilizza l'elemento personalizzato <devsite-selector>, ma ha troppe schede per adattarsi allo schermo e si apre automaticamente nel menu a discesa Altro.
Mele
Contenuti sulle mele
Albicocche
Contenuti sulle albicocche
Avocado
Contenuti sugli avocado
Fichi
Contenuti sulle fichi
Uva
Contenuti sull'uva
Kiwi
Contenuti su kiwi
Limoni
Contenuti relativi a limoni
Lime
Contenuti su lime
Manghi
Contenuti sui mango
Pesche
Contenuti sulle pesche
L'esempio seguente utilizza la sintassi Markdown per visualizzare lo stesso menu extra.
Mele
Contenuti sulle mele
Albicocche
Contenuti sulle albicocche
Avocado
Contenuti sugli avocado
Fichi
Contenuti sulle fichi
Uva
Contenuti sull'uva
Kiwi
Contenuti su kiwi
Limoni
Contenuti relativi a limoni
Lime
Contenuti su lime
Manghi
Contenuti sui mango
Pesche
Contenuti sulle pesche
Nomi di scheda duplicati in widget di più schede
Il clic su una scheda influisce su tutte le altre schede della pagina contenenti lo stesso testo nella stessa sintassi. Ad esempio, se fai clic su Mele o Apricot nel widget riportato di seguito, viene modificato anche il secondo widget nella sezione precedente perché sono entrambi creati con Markdown.
Mele
Più contenuti sulle mele.
Albicocche
Anche altri contenuti sulle albicocche.
Personalizzare i widget delle schede
Puoi creare il widget delle schede con Markdown, ma devi utilizzare la sintassi HTML per assegnare attributi personalizzati.
Aggregare testo all'interno di una scheda
Il testo che supera la larghezza massima per una scheda impostata da DevSite viene ritagliato e aggiunto con dei puntini di sospensione. L'esempio seguente utilizza la classe two-line-tab all'interno dell'elemento
personalizzato <devsite-selector> per aggregare il testo all'interno della seconda scheda.
Questa è un'etichetta lunga che non va a capo
Questa etichetta non va a capo su un'altra riga.
Questa etichetta va a capo in una seconda riga
L'etichetta di questa scheda occupa una seconda riga.
Aggregare testo all'interno di una scheda con un'etichetta più piccola
L'esempio seguente imposta two-line-tab sulla prima riga e tab-label sulla seconda riga all'interno dell'elemento personalizzato <devsite-selector> per visualizzare un'etichetta più piccola sulla seconda riga di una scheda a due righe famiglia.
Swift
Questa scheda ha un'etichetta Swift.
Java
Questa scheda su due righe ha un'etichetta più piccola per Android sotto l'etichetta Java.
Kotlin
Questa scheda su due righe ha un'etichetta più piccola per Android sotto l'etichetta Kotlin.
Java
Questa scheda ha un'etichetta Java.
Collegamento diretto a una scheda specifica
L'esempio seguente collega direttamente e apre una scheda specifica specificando
id all'interno dell'elemento personalizzato <devsite-selector>.
Cobo
Questa scheda è l'impostazione predefinita, ma puoi utilizzare l'anchor
#cobol.
Fortran
Per inserire un link diretto a questa scheda, aggiungi l'anchor #fortran al tuo link.
Haskell
Questa scheda utilizza l'anchor #haskell del link.
Creazione di un link con tutti i widget aperti nella stessa scheda
Il seguente link aggiunge il parametro di ricerca ?tab=Apricots all'URL di questa pagina e carica la pagina con la scheda Albicocche aperta su tutti i selettori:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots