Tabber, utilizado para mostrar contenidos en pestañas.
- Esta extensión está activada por defecto en Fandom.
Tabber es una extensión que te permite añadir múltiples pestañas en una sección del contenido, permitiéndote intercambiar de pestaña sin tener que recargar la página. Ten en cuenta que Tabbers no funciona en dispositivos móviles. Consulta la sección Experiencia móvil rota a continuación.
Paso a paso[]
- Abre el menú de edición un artículo y usa el editor de código.
- Copia y pega el siguiente código en el editor:
<tabber>Título de la primera pestaña = Texto de muestra de la primera pestaña. |-| Título de la segunda pestaña = El contenido de la segunda pestaña va aquí. |-| Título de la tercera pestaña = El contenido de la tercera pestaña va aquí. </tabber>
- Haz clic en "Mostrar previsualización" para ver que el código produjo estas pestañas:
Texto de muestra de la primera pestaña.
El contenido de la segunda pestaña va aquí.
El contenido de la tercera pestaña va aquí.
- Luego de ver la previsualización, edita tus pestañas reemplazando el texto de los títulos y el contenido con el contenido de tu comunidad. Por ejemplo, reemplaza "Título de la primera pestaña" por "Personajes" y reemplaza el texto de muestra con descripciones e imágenes de tus personajes favoritos. También puedes cambiar el número de pestañas agregando o quitando código.
Tabbers complejas[]
Es posible crear tabbers con dos o más secciones, usando dos líneas de texto: {{#tag:tabber y {{!}}-{{!}}. {{!}}-{{!}} actúa como un salto para la etiqueta original; creando los tabbers segundo, tercero, etc. La etiqueta en sí es un tabber nuevo, que funciona exactamente como el Tabber que se muestra arriba de esta sección.
Ejemplo[]
Código:
<tabber>
|-|Primera pestaña=
{{#tag:tabber|
1=
Contenido uno
{{!}}-{{!}}
2=
Contenido dos
{{!}}-{{!}}
3=
Contenido tres
}}
|-|Segunda pestaña=
{{#tag:tabber|
4=
Contenido cuatro
{{!}}-{{!}}
5=
Contenido cinco
{{!}}-{{!}}
6=
Contenido seis
}}
</tabber>
Salida:
A diferencia de los tabbers normales, estos deben cerrarse con "}}" al final, por cada pestaña.
Información de uso[]
- Formato: ten en cuenta que el título siempre debe terminar con un signo igual ("
="), y el separador de pestañas ("|-|") siempre debe aparecer entre las pestañas. - Wikitexto: Puedes usar cualquier wikitexto dentro de tus pestañas, incluidas plantillas e imágenes.
Añadir estilos[]
.tabber {
/* estilo del contenedor del tabber */
}
.tabber > .wds-tab__content.wds-is-current {
/* contenido visible del tabber */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab {
/* pestañas del tabber */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label {
/* etiquetados de pestañas del tabber */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab:hover {
/* pestañas del tabber al pasar el ratón */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label:hover {
/* etiquetados de pestañas del tabber al pasar el ratón */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab:active {
/* pestañas del tabber al hacerles clic */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label:active {
/* etiquetados de pestañas del tabber al hacerles clic */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current {
/* pestaña del tabber seleccionada */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current:hover {
/* pestaña del tabber seleccionada al pasar el ratón */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current:active {
/* pestaña del tabber seleccionada al hacerle clic */
}
.tabber > .wds-tabs__wrapper > .wds-tabs__arrow-right,
.tabber > .wds-tabs__wrapper > .wds-tabs__arrow-left {
/* flechas del tabber */
}
Problemas[]
Experiencia móvil rota[]
Gran parte del código CSS y JavaScript que se ejecuta en un ordenador de escritorio o portátil no puede hacerlo en un dispositivo móvil. Para contrarrestar esto, Fandom ha eliminado la mayor parte de ese código del aspecto móvil, incluidas las cosas que hacen posible Tabber. Como resultado, los usuarios de dispositivos móviles no verán ninguna de las señales visuales que separan cada conjunto de información (aparecerá el contenido de las pestañas, pero no separado en pestañas).
Hay problemas con los hacks o trucos de CSS y HTML adicionales que se utilizan como soluciones alternativas, que no se pueden resolver con ningún tipo de codificación de cara al usuario. Por lo tanto, eso es mucho esfuerzo por muy poca ganancia; también podrías utilizar secciones ordinarias en su lugar.
Ver/editar contenido de la pestaña[]
Tabber no proporciona una forma sencilla de ver/editar la página original. Esto puede resultar problemático para los usuarios sin experiencia que desean editar el contenido dentro de una pestaña. Además, las personas que utilizan el editor visual no podrán editarlo sin cambiar al editor de código.
Infoboxes[]
ETabber no siempre se muestra correctamente cuando se coloca dentro de una infobox. Para contrarrestar esto, se puede utilizar una Galería dentro de una infobox para proporcionar el mismo efecto que el Tabber. Al usar infoboxes portátiles estándar de Fandom, una galería se puede pasar directamente a un campo de imagen para crear imágenes con pestañas. Para tabular otro contenido, se pueden usar paneles de cuadro de información.
Véase también[]
- Informe de etiquetas, una lista de páginas que contienen una etiqueta <tabber>;
- Ayuda:Vista en pestañas
- Ayuda:Editar
- Ayuda:Wikitexto
Ayuda y comentarios[]
- Navega y busca otras páginas de ayuda en Ayuda:Contenidos.
- Revisa Comunidad Central de Fandom para más fuentes de ayuda y soporte.
- Revisa Contactar con Fandom para saber cómo reportar algún error o algún paso que no esté claro en este artículo.