O widget de guias usa o elemento personalizado <devsite-selector> para organizar dados que têm várias representações, como exemplos de código em diferentes linguagens de programação ou estruturas de dados representadas por diferentes formatos (como JSON, YAML ou XML).
Uso geral
O exemplo a seguir usa o elemento personalizado <devsite-selector> para renderizar três seções de guia usando HTML.
Título da guia 1
Conteúdo da guia 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Título da guia 2
Conteúdo da guia 2
Curabitur sempre tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Título da guia 3
Conteúdo da guia 3
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre tortor nec dictum sagittis.
O exemplo a seguir usa a sintaxe Markdown para renderizar as mesmas três guias.
Título da guia 1
Conteúdo da guia 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Título da guia 2
Conteúdo da guia 2
Curabitur sempre tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Título da guia 3
Conteúdo da guia 3
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre tortor nec dictum sagittis.
Widget de guias com um menu flutuante
O exemplo a seguir usa o elemento personalizado <devsite-selector> , mas tem muitas guias para caber na tela e transborda automaticamente para o menu suspenso Mais .
Maçãs
Conteúdo sobre maçãs
Damascos
Conteúdo sobre damascos
Abacates
Conteúdo sobre abacate
Figos
Conteúdo sobre figos
Uvas
Conteúdo sobre uvas
Kiwi
Conteúdo sobre kiwis
Limões
Conteúdo sobre limões
Limas
Conteúdo sobre limas
Mangas
Conteúdo sobre manga
Pêssegos
Conteúdo sobre pêssegos
O exemplo a seguir usa a sintaxe Markdown para renderizar o mesmo menu flutuante.
Maçãs
Conteúdo sobre maçãs
Damascos
Conteúdo sobre damascos
Abacates
Conteúdo sobre abacate
Figos
Conteúdo sobre figos
Uvas
Conteúdo sobre uvas
Kiwi
Conteúdo sobre kiwis
Limões
Conteúdo sobre limões
Limas
Conteúdo sobre limas
Mangas
Conteúdo sobre manga
Pêssegos
Conteúdo sobre pêssegos
Nomes de guias duplicados em widgets de várias guias
Clicar em uma guia afeta todas as outras guias da página com o mesmo texto na mesma sintaxe. Por exemplo, clicar em Maçãs ou Damascos no widget abaixo também afeta o segundo widget na seção anterior porque ambos são criados com Markdown.
Maçãs
Mais conteúdo sobre maçãs!
Damascos
Mais conteúdo sobre damascos também!
Personalizando widgets de guias
Embora você possa criar o widget de guias com Markdown, você precisa usar a sintaxe HTML para atribuir atributos personalizados.
Quebra de texto em uma guia
O texto que excede a largura máxima de uma guia definida pelo DevSite é recortado e anexado com reticências. O exemplo a seguir usa a classe two-line-tab no elemento personalizado <devsite-selector> para quebrar o texto na segunda guia.
Esta é uma etiqueta longa que não envolve
Este rótulo não quebra para outra linha.
Este rótulo envolve uma segunda linha
O rótulo para esta guia quebra para uma segunda linha.
Quebra de texto em uma guia com um rótulo menor
O exemplo a seguir define two-line-tab para a primeira linha e tab-label para a segunda linha dentro do elemento personalizado <devsite-selector> para exibir um rótulo menor na segunda linha de uma guia de duas linhas.
Rápido
Esta guia tem um rótulo Swift .
Java
Essa guia de duas linhas tem um rótulo Android menor abaixo do rótulo Java .
Kotlin
Essa guia de duas linhas tem um rótulo Android menor abaixo do rótulo Kotlin .
Java
Esta guia tem um rótulo Java .
Link direto para uma guia específica
O exemplo a seguir vincula diretamente e abre uma guia específica especificando o id no elemento personalizado <devsite-selector> .
Cobol
Esta guia é o padrão, mas você pode usar a âncora #cobol .
Fortran
Você vincularia diretamente a essa guia anexando a âncora #fortran ao seu link.
Haskell
Essa guia usaria a âncora #haskell em seu link.
Criando um link com todos os widgets abertos na mesma guia
O link a seguir anexa o parâmetro de consulta ?tab=Apricots ao URL desta página e carrega a página com a guia Apricots aberta em todos os seletores:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots