La vista en pestañas o TabView es una manera fácil de mostrar varias páginas de contenido en un solo artículo mediante pestañas. Esta puede ser una manera útil y atractiva para ver y organizar el contenido.
Para una extensión similar que no requiere varias páginas, véase Ayuda:Tabber.
El uso de TabView está limitado ya que Fandom tiene la intención de descontinuar la extensión. Se recomienda encarecidamente que su wiki no agregue código TabView adicional, y la función ya no puede ser activada bajo pedido.
Paso a paso[]
- Primero necesitas crear una página de contenido para cada pestaña que quieras mostrar. Estas páginas se pueden crear en cualquier lugar de tu wiki.
En este ejemplo hemos creado tres subpáginas de este artículo, las cuales usaremos en nuestras pestañas de abajo. Sus títulos son:
- Edita la página en la que te gustaría mostrar las pestañas y cambia a modo fuente.
- Inserta el código de las pestañas de la siguiente manera:
<tabview>
NOMBREPÁGINA1|TÍTULO1
NOMBREPÁGINA2|TÍTULO2
NOMBREPÁGINA3|TÍTULO3
</tabview>
Entonces, en nuestro ejemplo, escribiríamos:
<tabview>
Ayuda:Vista en pestañas/Ejemplo_contenido_1|Pestaña 1
Ayuda:Vista en pestañas/Ejemplo_contenido_2|Pestaña 2
Ayuda:Vista en pestañas/Ejemplo_contenido_3|Pestaña 3
</tabview>
Esto nos daría las siguientes pestañas:
Personalización[]
Además del título, hay otras dos variables que puedes personalizar en tus pestañas: Cache y Preset. Están configuradas de esta forma:
<tabview>
NOMBREPÁGINA|TÍTULO|CACHE|PRESET
</tabview>
Desactivar caché de pestaña[]
Si una página muestra información que se actualiza constantemente, quizás quieras forzar a la pestaña a revisar si hay contenido nuevo en cada carga de la página. Esto se puede hacer añadiendo una segunda barra horizontal seguida de la palabra "false". Esto se debería usar con moderación, ya que puede ralentizar el tiempo de lectura. Por defecto, esta opción está activada ("true").
<tabview>
Ayuda:Vista en pestañas/Ejemplo_contenido_1|Pestaña 1|false
Ayuda:Vista en pestañas/Ejemplo_contenido_2|Pestaña 2
Ayuda:Vista en pestañas/Ejemplo_contenido_3|Pestaña 3
</tabview>
Esto te dará:
Predefinir pestaña activa[]
La última variable permite elegir qué pestaña estará a la vista cuando se cargue la página. Por defecto es la primera pestaña, pero puedes elegir otra usando una tercera barra vertical seguida de la palabra "true".
<tabview>
Ayuda:Vista en pestañas/Ejemplo_contenido_1|Pestaña 1
Ayuda:Vista en pestañas/Ejemplo_contenido_2|Pestaña 2||true
Ayuda:Vista en pestañas/Ejemplo_contenido_3|Pestaña 3
</tabview>
Esto te dará:
Parámetros[]
Los únicos parámetros disponibles en la vista en pestañas es "title" e "id". No puedes personalizar cada vista en pestañas usando wikitexto; debes usar el CSS del sitio para editarlas. Los parámetros son:
<tabview title="..." id="...">
Estilos[]
Una vez definido el parámetro "id", puedes modificar cada pestaña. Por ejemplo:
ul.tabs > [data-tab="flytabs_Ejemplo1"] {
/* estilo para data-tab="flytabs_Ejemplo1" (primera pestaña) */
}
ul.tabs > [data-tab="flytabs_Ejemplo2"] {
/* estilo para data-tab="flytabs_Ejemplo2" (segunda pestaña) */
}
ul.tabs > [data-tab="flytabs_Ejemplo3"] {
/* estilo para data-tab="flytabs_Ejemplo3" (tercera pestaña) */
}
Las Vistas en pestañas aparecerán en un <div> con el "id" "flytabs_Ejemplo", y su contenido se colocará en un <div> aparte, con el id "flytabs_Example-content-wrapper".
Problemas[]
Experiencia móvil[]
En los dispositivos móviles las páginas se muestran como una lista de enlaces en vez de como pestañas. Esto es porque es difícil trabajar con pestañas en dispositivos móviles.
Ver/editar el contenido de la pestaña[]
TabView no proporciona una forma sencilla de visualizar/modificar la página original. Esto puede ser problemático para los usuarios sin experiencia que deseen editar el contenido dentro de una pestaña. Dado que la pestaña es en realidad un elemento de enlace, un usuario puede hacer clic derecho y hacer clic en abrir para seguir manualmente el enlace. Sin embargo, hay un script en Fandom Developers Wiki llamado TabViewEditLinks (en inglés) que añade los enlaces de edición.
Pestañas anidadas[]
Tabview no maneja bien las Vistas en pestaña anidadas. En otras palabras, las páginas incluidas en tus pestañas no pueden tener sus propias vistas en pestaña. El visitante empezará a experimentar el problema cuando abra una pestaña que contenga otra sección de vistas en pestañas. Aunque los detalles específicos del error son inconsistentes, el problema general es que el contenido de la primera pestaña se mostrará seguido del contenido de la pestaña elegida. Otro problema es que las pestañas anidadas se muestran como una lista viñeteada en lugar de pestañas.
Una vez esto ocurre, el contenido de la pestaña infractora se mostrará al final de cada una de las otras pestañas. Navegar nuevamente a la pestaña infractora podría añadir otra copia del contenido al final cuando visualices las otras pestañas. Por ejemplo, supongamos que incluimos una cuarta página (como "Pestaña 4") que tiene su propia sección de Vista en pestañas. Cuando el visitante abra la "Pestaña 4", verá el contenido de la "Pestaña 1", seguido por el contenido de la "Pestaña 4". Si navega a la "Pestaña 3", verá ahora el contenido de la "Pestaña 3" seguido por el contenido de la "Tabla 4". Si abre la "Pestaña 4" nuevamente y luego a la "Pestaña 2", verá el contenido de la "Pestaña 2", seguida de dos copias del contenido de la "Pestaña 4".
Si deseas anidar pestañas, necesitarás usar tablas en vez de TabView.
Motores de búsqueda[]
Dado que una página que contiene TabView debe usar JavaScript para obtener el contenido de otras páginas e insertarlo en otro lugar, los resultados pueden ralentizar el rendimiento del rastreo de motores de búsqueda. Además, el mismo contenido de la página se muestra en varias páginas de resultados.
Etiquetas de inclusión[]
TabView no transcluye el contenido de la página. Como tal, se mostrará la página original y elementos como las etiquetas de inclusión de wikitexto (<includeonly>, <noinclude>, y <onlyinclude>) mostrarán el mismo contenido que la página de origen.
Véase también[]
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.