-
Componentes
-
Módulos
-
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
Este 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 adicional del fragmento
Botón ubicación objetivo
Fragmento > Colección > FRG_BotonIconoUbicacionObjetivo
Información adicional del fragmento
Botón flecha
Fragmento > Colección > FRG_BotonIconoFlecha
Información adicional del fragmento
FRG_BotonLeerMas
Fragmento > Componentes - Interacciones > FRG_BotonLeerMas
Este fragmento es un botón «Leer más» que permite truncar automáticamente el texto que tenga un contenedor.
Siempre se recomienda priorizar el uso de módulos para no tener que hacer este tipo de configuraciones, pero pasamos a explicar su uso en caso de que se quiera utilizar por cuenta propia.
Para ello debe haber un contenedor donde este presente en su interior el párrafo o número párrafos que queramos y el propio fragmento FRG_BotonLeerMas. Este contentedor tendrá que tener la clase CSS "texto-expandible-contenedor" esto se puede añadir si pulsamos en el contenedor y clicamos en la pestaña opciones avanzadas.
Una composición de elementos para utilizarlo podria ser de la siguiente forma:
Siempre todos los textos a tener en cuenta y el propio fragmento tienen que estar dentro del contenedor con la clase especial "texto-expandible-contenedor"
Para aplicar la clase "texto-expandible-contenedor" seleccionamos el contenedor y clicamos en la pestaña de avanzado donde nos aparecera CSS > Clases CSS.
bastará con escribir texto-expandible-contenedor dentro del campo de texto
Al seleccionar FRG_BotonLeerMas tenemos varias opciones de traducción que deberemos de traducir a nuestros idiomas disponibles, tambien la posibilidad de configrurar el número de carácteres visibles cuando el texto este truncado.
