Web part de Pestañas para SharePoint

Presenta información en pestañas con iconos opcionales, texto enriquecido e imagen por pestaña. Personaliza los colores, gestiona el orden de las pestañas y aprovecha un comportamiento responsive con desplazamiento horizontal y chevrones cuando hay muchas.

Vista de Pestañas

Tabs en SharePoint mostrando varias pestañas con icono, título y contenido con imagen a la derecha.
Pestañas con iconos Fluent opcionales, subrayado activo, contenido con texto enriquecido e imagen. Chevrons automáticos cuando hay más pestañas de las que caben.

Qué incluye

Iconos opcionales

Soporta iconos Fluent UI por pestaña (o solo texto). El icono adopta el color de la pestaña activa.

Contenido enriquecido

Cada pestaña admite texto enriquecido (negrita, listas, alineación, enlaces) y una imagen con ajuste automático.

Colores

Define el color del encabezado y un color por elemento (números decorativos en listas). Opción de sombra para el contenedor.

File Picker

Subida de imágenes con vista previa desde el PC, OneDrive o bibliotecas del sitio.

Reordenación

Cambia el orden de las pestañas de forma rápida con flechas de mover arriba/abajo y elimina o duplica entradas fácilmente.

Responsive y chevrones

Cuando hay muchas pestañas, aparece un scroll horizontal con chevrones para navegar. En maquetaciones estrechas el contenido se apila (texto encima, imagen debajo) y el área mantiene una altura estable.

Vistas del web part

Ejemplo de configuración de Pestaña sin iconos.
Ejemplo de configuración de Pestaña sin iconos.
Panel de configuración para administrar pestañas: título, icono Fluent, color de elemento, texto enriquecido e imagen con vista previa.
Panel de administración: título, icono Fluent opcional, color por elemento, editor de texto enriquecido y carga de imagen por pestaña.

Beneficios para tu intranet

  • Claridad: organiza contenido relacionado en pestañas fáciles de explorar.
  • Consistencia: respeta la identidad visual (colores, tipografías y sombras suaves).
  • Edición rápida: añade, reordena y personaliza pestañas desde un único panel.
  • Accesibilidad: foco visible, navegación por teclado y contraste configurables.
  • Rendimiento: sin librerías pesadas ni dependencias externas innecesarias.

Cómo funciona

  1. Agrega el web part “Pestañas/Tabs” a tu página de SharePoint.
  2. Administra las pestañas: título, icono Fluent (opcional), color del elemento, texto enriquecido e imagen con vista previa.
  3. Personaliza el color del encabezado, la sombra del contenedor y si se muestran iconos en el encabezado.
  4. Reordena pestañas con flechas y elimina o duplica entradas según necesites.
  5. Publica tu página: el componente es responsive y añade chevrones al desbordar.

Configuración del web part

Demostración: añadir y reordenar pestañas, elegir iconos Fluent, fijar colores, editar el texto enriquecido y cargar imagen con vista previa.

Preguntas frecuentes

¿Dónde puedo usar Tabs?

En páginas modernas de SharePoint (Communication o Team). Funciona en secciones de cualquier ancho y se adapta a móvil.

¿Puedo ocultar los iconos del encabezado?

Sí, el encabezado puede mostrar solo texto o icono + texto por pestaña.

¿Cómo se suben las imágenes?

A través del File Picker: desde tu equipo, OneDrive o bibliotecas del sitio. La imagen se previsualiza y se ajusta sin deformarse.

¿Qué ocurre si tengo muchas pestañas?

El encabezado se vuelve desplazable y aparecen chevrones izquierda/derecha para navegar por las pestañas que no caben en el ancho disponible.

¿Puedo establecer colores corporativos?

Sí. Puedes fijar el color del encabezado del componente y un color por pestaña para acentos en el contenido.

¿Quieres una demo del web part?

Te mostramos cómo estructurar información en pestañas claras y visuales en minutos.

Contactar