El widget de pestañas usa el elemento personalizado <devsite-selector> para organizar datos que tienen múltiples representaciones, como ejemplos de código en diferentes lenguajes de programación o estructuras de datos representadas por diferentes formatos (como JSON, YAML o XML).
Uso general
El siguiente ejemplo usa el elemento personalizado <devsite-selector> para representar tres secciones de pestañas usando HTML.
Título de la pestaña 1
Pestaña 1 Contenido
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Título de la pestaña 2
Pestaña 2 Contenido
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Título de la pestaña 3
Pestaña 3 Contenido
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
El siguiente ejemplo usa la sintaxis de Markdown para representar las mismas tres pestañas.
Título de la pestaña 1
Pestaña 1 Contenido
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Título de la pestaña 2
Pestaña 2 Contenido
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Título de la pestaña 3
Pestaña 3 Contenido
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Widget de pestañas con un menú de desbordamiento
El siguiente ejemplo usa el elemento personalizado <devsite-selector> pero tiene demasiadas pestañas para caber en la pantalla y se desborda automáticamente en el menú desplegable Más .
manzanas
Contenido sobre manzanas
albaricoques
Contenido sobre albaricoques
Aguacates
Contenido sobre aguacates
higos
Contenido sobre higos
Uvas
Contenido sobre uvas
kiwi
Contenido sobre el kiwi
limones
Contenido sobre limones
Limas
Contenido sobre limas
Mangos
Contenido sobre mangos
duraznos
Contenido sobre duraznos
El siguiente ejemplo usa la sintaxis de Markdown para representar el mismo menú de desbordamiento.
manzanas
Contenido sobre manzanas
albaricoques
Contenido sobre albaricoques
Aguacates
Contenido sobre aguacates
higos
Contenido sobre higos
Uvas
Contenido sobre uvas
kiwi
Contenido sobre el kiwi
limones
Contenido sobre limones
Limas
Contenido sobre limas
Mangos
Contenido sobre mangos
duraznos
Contenido sobre duraznos
Nombres de pestañas duplicados en widgets de pestañas múltiples
Hacer clic en una pestaña afecta a todas las demás pestañas de la página con el mismo texto en la misma sintaxis. Por ejemplo, hacer clic en Manzanas o Albaricoques en el widget a continuación también afecta el segundo widget en la sección anterior porque ambos están creados con Markdown.
manzanas
¡Más contenido sobre manzanas!
albaricoques
¡También más contenido sobre albaricoques!
Personalización de widgets de pestañas
Si bien puede crear el widget de pestañas con Markdown, debe usar la sintaxis HTML para asignar atributos personalizados.
Envolver texto dentro de una pestaña
El texto que excede el ancho máximo para una pestaña establecida por DevSite se recorta y se agrega con puntos suspensivos. El siguiente ejemplo utiliza la clase two-line-tab dentro del elemento personalizado <devsite-selector> para ajustar el texto dentro de la segunda pestaña.
Esta es una etiqueta larga que no envuelve
Esta etiqueta no se ajusta a otra línea.
Esta etiqueta se ajusta a una segunda línea
La etiqueta de esta pestaña se ajusta a una segunda línea.
Envolver texto dentro de una pestaña con una etiqueta más pequeña
En el siguiente ejemplo, se establece two-line-tab en la primera línea y tab-label en la segunda línea dentro del elemento personalizado <devsite-selector> para mostrar una etiqueta más pequeña en la segunda línea de una pestaña de dos líneas.
Rápido
Esta pestaña tiene una etiqueta Swift .
Java
Esta pestaña de dos líneas tiene una etiqueta de Android más pequeña debajo de la etiqueta de Java .
kotlin
Esta pestaña de dos líneas tiene una etiqueta de Android más pequeña debajo de la etiqueta de Kotlin .
Java
Esta pestaña tiene una etiqueta Java .
Enlace directo a una pestaña específica
El siguiente ejemplo vincula directamente y abre una pestaña específica especificando la id dentro del elemento personalizado <devsite-selector> .
Cobol
Esta pestaña es la predeterminada, pero podría usar el ancla #cobol .
Fortran
Vincularía directamente a esta pestaña agregando el ancla #fortran a su enlace.
Haskell
Esta pestaña usaría el ancla #haskell en su enlace.
Crear un enlace con todos los widgets abiertos en la misma pestaña
El siguiente enlace agrega el parámetro de consulta ?tab=Apricots a la URL de esta página y carga la página con la pestaña Albaricoques abierta en todos los selectores:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Albaricoques