-
Componentes
-
Módulos
-
Tipos de visualización
Componentes básicos
Liferay nos trae una gran colección de componentes básicos, pero los más usados o los que se han utilizado para construir los portales Cervantes son los siguientes:
Imagen
Fragmento > Componentes básicos > Imagen
Podemos seleccionar una imagen de nuestro ordenador o bien de la libreria de imágenes de Liferay "documentos y multimedia". Podremos ajustar su tamaño en las opciones y consultar tamaños a utilizar según el módulo usado en su misma documentación.
- Tamaño de la imagen (El límite del contenedor puede limitar un tamaño mayor)
- Ajustar
- Tamaño original
- Nº de tamaños personalizados
Párrafo
Fragmento > Componentes básicos > Párrafo
Los párrafos de Liferay son un potente fragmento que nos permite múltiples opciones para nuestros textos enriquecidos. Para mostrarlas se deberá seleccionar el texto deseado dentro del fragmento. A continuación mostramos un párrafo donde veremos todas sus posibilidades con ejemplos y explicaciones.
Formatos de texto
Los párrafos nos permiten, aparte de tener un bloque de texto, que este tenga formato, como son la negrita, subrayado y cursiva.
Paleta de colores
Da a tus textos alguno de los colores disponibles: principal, operación correcta, peligro, advertencia, información, oscuro, gris oscuro, secundario, claro, más claro, blanco.
Enlaces
Puedes enlazar el texto deseado a una página interna, externa o algún archivo de documentos y multimedia de Liferay.
Saltos de línea
Los saltos de línea por defecto dejan un espaciado vertical. Veamos un ejemplo:
Este es un salto de línea por defecto. Como se puede apreciar, deja un buen espaciado vertical para hacer conjuntos de textos vistosos, pero si no deseamos tener unos espaciados tan grandes también existen soluciones. A continuación haremos un salto de línea sin separación.
Como se puede comprobar, este salto de línea no tiene tanto espacio vertical. Esto se debe a que se ha pulsado la tecla shift + enter.
Tamaño de Saltos de línea
Otra solución es ajustar el tamaño de los saltos de línea, que van del 1.0x al 5.0x:
Salto de línea 1.0x Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lorem nec arcu varius posuere. Sed non metus efficitur, ultrices sem ac, vestibulum lacus. Pellentesque tortor eros, semper auctor molestie id, ultrices eu lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla et sollicitudin odio, quis gravida mi. Mauris lacus tortor, vestibulum ac ex ut, tempus blandit sapien. Donec et massa porttitor, elementum mauris ac, efficitur massa. Nullam risus lectus, pharetra quis ultricies eget, imperdiet in libero. Maecenas rutrum orci quis ligula convallis accumsan. In vitae viverra velit, at pretium lacus.
Salto de línea 2.0x Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lorem nec arcu varius posuere. Sed non metus efficitur, ultrices sem ac, vestibulum lacus. Pellentesque tortor eros, semper auctor molestie id, ultrices eu lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla et sollicitudin odio, quis gravida mi. Mauris lacus tortor, vestibulum ac ex ut, tempus blandit sapien. Donec et massa porttitor, elementum mauris ac, efficitur massa. Nullam risus lectus, pharetra quis ultricies eget, imperdiet in libero. Maecenas rutrum orci quis ligula convallis accumsan. In vitae viverra velit, at pretium lacus.
Salto de línea 5.0x Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lorem nec arcu varius posuere. Sed non metus efficitur, ultrices sem ac, vestibulum lacus. Pellentesque tortor eros, semper auctor molestie id, ultrices eu lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla et sollicitudin odio, quis gravida mi. Mauris lacus tortor, vestibulum ac ex ut, tempus blandit sapien. Donec et massa porttitor, elementum mauris ac, efficitur massa. Nullam risus lectus, pharetra quis ultricies eget, imperdiet in libero. Maecenas rutrum orci quis ligula convallis accumsan. In vitae viverra velit, at pretium lacus.
Alineaciones de texto
Texto alineado a la izquierda por defecto
Texto alineado al centro
Texto alineado a la derecha
Texto justificado: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lorem nec arcu varius posuere. Sed non metus efficitur, ultrices sem ac, vestibulum lacus. Pellentesque tortor eros, semper auctor molestie id, ultrices eu lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla et sollicitudin odio, quis gravida mi. Mauris lacus tortor, vestibulum ac ex ut, tempus blandit sapien. Donec et massa porttitor, elementum mauris ac, efficitur massa. Nullam risus lectus, pharetra quis ultricies eget, imperdiet in libero. Maecenas rutrum orci quis ligula convallis accumsan. In vitae viverra velit, at pretium lacus.
Opciones de tipos de textos:
Título h1
Título h2
Título h3
Título h4
Pequeño
Normal
Destacado
Podemos hacer listas numeradas como esta:
- Item de lista numerada
- Item de lista numerada
- Item de lista numerada
Podemos hacer listas sin enumerar e incluso tabular para listas internas:
- Item de lista sin numerar
- Item de lista sin numerar
- Item de lista interna sin numerar
- Item de lista interna sin numerar
- Item de lista sin numerar
Posibilidad de insertar tablas indicando número de columnas y de filas. Una vez creada, si pinchamos en ella nos aparecerán más opciones, como hacer encabezados en la primera fila, primera columna o ambas. En la celda pinchada podremos dividirla o combinarla con otras.
| Título columna | Título columna | Título columna |
|---|---|---|
| Título fila | Valor | Valor |
| Título fila | Valor | Valor |
- Nombre de Configuracion 1: Información de la configuración 1
- Nombre de Configuracion 2: Información de la configuración 2
Título
Fragmento > Componentes básicos > Título
Para los portales del Instituto Cervantes se ha utilizado mucho este fragmento nativo. Sus opciones generales nos permite cambiar su nivel semántico.
Normalmente para darle un estilo de título diferente usaremos las clases auxiliares tipográficas. Una vez aplicada una de ellas, su tamaño de fuente no cambiará dependiendo del nivel semántico. Esto es debido a que muchas veces necesitamos una apariencia concreta y no podemos estar condicionados a su tipo de encabezado.
- Nivel de título (Nivel semántico del título)
- h1
- h2
- h3
- h4
- h5
- h6