-
Componentes
-
Módulos
-
Tipos de visualización
- Clases auxiliares
-
Componentes
- Nativos de Liferay
- Interacciones
- Campos de formulario
- Botones
- Interruptores
- Filtros
- Desplegables
- Filtro aplicado
- Pestañas
- Filtro pestaña
- Vista cuadrícula o listado
- Línea divisoria
- Navegación
- Contenido
- Composiciones de texto
- Encabezado
- Elementos tarjetas
- Tablas
- Etiqueta
- Etiqueta
- Cifras
- Ficha Bloque Descriptivo
- Indicador de nivel
- Bloque persona
- Enlaces
- Descarga de ficheros
- Indicador fecha
- Logotipos
- Bloque ficha técnica
- Tarjetas
- Basica
- Pictograma
- Apertura - Tarjetas Flexibles
- Recurso Gráfico Compacta
- Básica Mosaico
- Calendarizada
- Datos de contacto
- Logotipo o pictograma
- Compra
- Accesos
- Contenedor Tarjetas
- Datos publicación
- Alertas
- Fondo imagen
- Multimedia
- Agenda
- Mover elemento responsivo
-
Módulos
- Funcionales
- Tarjetas
- Actualidad
- Contenido relacionado
- Apertura - Tres Destacados
- Carrusel
- Mosaico
- Mapa
- Filtrado
- Localizaciones
- Entradas destacadas
- Distributiva old
- Calendarizada
- Distributiva
- Publicación
- Accion
- Banner - Accesos directos
- Suscripcion
- Banner AccesoDirecto Ilustración
- Banner acceso directo textura
- Banner-Encuesta
- Banner - Etiquetas
- Acción-Compra
- Contenido
- Contenido + imagen
- Ficha-ilustracion
- Ficha-desplegables
- Tablas
- Contacto
- Descargas
- Ficha pestañas
- Citas destacadas
- Tarjetas
- Tarjetas-Pictograma
- Contenido Cifras+Imagen
- Listado
- Contenido-Entidades
- Cifras
- Selector alfabético
- Apertura
- Tipos de visualización
Interacción
Botones
Fragmento > Componentes - Interacciones > FRG_Boton
- Estilo (Aplica clases CSS)
- Primario
- .btn-primary
- Secondario
- .btn-secondary
- Terciario
- .btn-terciary
- Elevado
- .btn-elevated
- Primario
- Icon display (Mostrar icono)
- Icon id (Identificador del icono, consultar nombres en iconografia)
- Javascript Code (Ejecutará el código al pulsar el botón)
Modo de uso
Tipo acción con iconos
Tipo enlace con iconos
Tipo acción de Liferay
Tipo enlace de Liferay
Modo de uso
Tipo acción con iconos
Tipo enlace con iconos
Tipo acción de Liferay
Tipo enlace de Liferay
Botones de acceso
Fragmento > Componentes - Interacciones > FRG_BotonAcceso
Los accesos actúan como puntos de entrada a distintas secciones y pueden agruparse cuando comparten contenido relacionado o tienen una funcionalidad similar. Pueden redirigir a una página distinta, o cargar contenido en la misma página.
Los botones de acceso existen en dos tamaños, Grande y Mediano, de esta forma pueden jerarquizar mejor la relevancia de los contenidos.
Tambien existe otra variante donde tiene aspecto mas agrandado, usado para el módulo Banner - Acceso directos, para dárselo el contenedor debe llevar la clase banner-quick-links
Enlaces
Podemos usar cualquier tipo de texto y convertirlo en un enlace
Ejemplo de uso
Podemos añadir enlaces en este mismo fragmento de párrafo: Ir a Google.
Ejemplo de uso
Podemos añadir enlaces en este mismo fragmento de parrafo Ir a google.
Camino de migas
Widget > Ruta de navegación / breadcrumb > Horizontal
Este widget es nativo de Liferay y usa la plantilla de aplicación que nos propone la propia herramienta "Horizontal".
Ejemplo de uso
Ejemplo de uso
Botones icono
Al ser botones sin texto, por temas de accesibilidad hay que proporcionar información extra mediante el texto alternativo disponible en las configuraciones avanzadas del fragmento. De esta forma, los usuarios de lectores de pantallas pueden acceder también a la información que traslada el icono.
Botón guardar
Fragmento > Componentes - Interacciones > FRG_BotonIconoGuardar
Permite guardar un elemento específico, como un artículo, página o recurso, para acceder a él fácilmente en el futuro. Tiene una función similar a la de marcar como favorito.
Botón compartir en redes sociales
Fragmento > Componentes - Interacciones > FRG_BotonIconoCompartir
Permite compartir contenido en las plataformas de redes sociales. Al hacer clic en este botón, se despliega una lista con los iconos de las redes sociales más destacadas (como Facebook, X, Instagram y LinkedIn), ofreciendo acceso directo para compartir el contenido en la red elegida de forma rápida y sencilla.
Botón red social
Fragmento > Componentes - Interacciones > FRG_BotonRedSocial
Permitste fragmento ofrece un acceso directo a los perfiles de redes sociales más destacadas de la organización, mediante botones visuales con sus respectivos iconos. Cada botón redirige a la red correspondiente (como Facebook, X, Instagram, YouTube o LinkedIn), adaptándose visualmente tanto al modo claro como al modo oscuro. Se trata de un elemento útil para reforzar la presencia digital y facilitar la conexión con la audiencia en plataformas externas.
Controladores de aumento/disminución
Fragmento > Colección > FRG_BotonIconoControladoresZoom
Información adiccional del fragmento
Botón ubicación objetivo
Fragmento > Colección > FRG_BotonIconoUbicacionObjetivo
Información adiccional del fragmento
Botón flecha
Fragmento > Colección > FRG_BotonIconoFlecha
Información adiccional del fragmento
FRG_BotonLeerMas
Fragmento > Componentes - Interacciones > FRG_BotonLeerMas
Este fragmento añade un botón «Leer más» que permite truncar automáticamente el texto de un contenedor (.texto-expandible-contenedor) si supera un número de caracteres configurable. Al hacer clic, se muestra el texto completo y el botón cambia a «Ver menos».