Tokyo - Componentes | Fila

Última modificación:


El componente "Fila" es uno de los más versátiles e interesantes de la plantilla. Este componente nos permite introducir en su interior"Columnas" en las que organizar el resto de componentes. Así, podemos maquetar la información en columnas, de forma similar a como haríamos en un periódico.

Image 5942

Las filas están divididas en 12 posibles columnas. Así, podemos añadir "Columnas" que ocupen desde 1 a los 12 espacios. Si, por ejemplo, queremos dos columnas simétricas, cada una ocuparía 6 espacios; para 3 columnas simétricas, cada columna ocuparía 4 espacios... y también podemos realizar montajes asimétricos, con columnas de tamaños diferentes.

Image 5943

Por defecto, se añade dentro de las pantallas (Ver aquí) aunque también se podrá añadir en el interior de otros componentes (por ejemplo, dentro de un pop-up, un acordeón, un destacado, etc.).

Encontraremos este componente en el grupo de componentes "Organizador".

Image 5944

Cuando se añade una fila, se puede elegir entre varias preestructuras que van a facilitarte la edición:

Image 5945

Proceso de configuración

1. Comprueba que tienes la Fila seleccionada (puedes hacerlo fácilmente desde el camino de migas), accede a la pestaña"Añadir" y, si lo necesitas, incluye nuevas "Columnas".

2. Accede a la pestaña "Propiedades" de la fila y configura sus propiedades (ver más abajo la lista completa). Resultan especialmente interesantes las propiedades para poner un color o imagen de fondo para la fila, y la posibilidad de hacer que la fila exceda el ancho de la zona central de pantalla.

Image 5946

3. Por defecto, las columnas se crean con un texto, pero podemos elegir otros componentes para colocar su interior. Para ello, selecciona la columna (el modo más rápido de hacerlo es desde el camino de migas), accede a la pestaña "Añadir" y elige uno de los componentes disponibles en "Insertar dentro". Recuerda que, más abajo en la lista, podrás "Insertar después" de esta columna, otra nueva.

4. Por último, accede a la pestaña "Propiedades" de la columna. Aquí, podrás configurar, entre otras cosas, el ancho que ocupará cada columna dentro de la fila (de 1 a 12 espacios).

Image 5947

Propiedades de la fila

PROPIEDADDESCRIPCIÓN
Ancho

Por defecto, la fila ocupa el 100% del espacio disponible, pero se puede disponer a "Full", es decir, que se ajuste al ancho de la columna central.

Margen derecho

Permite configurar dónde finaliza el margen derecho de la Fila:

  • Sin: opción por defecto.
  • level 1: el margen se alinea con el lateral de la columna central.
  • level 2: el margen excede 50 px el lateral de la columna central.
  • level 3: el margen excede 100px el lateral de la columna central.

Image 5948

Si se combina con la propiedad "Margen izquierdo", podemos hacer que la fila tenga un se comporte igual en el otro margen.

Image 5949

Margen izquierdo

Permite configurar dónde comienza el margen izquierdo de la Fila:

  • Sin: opción por defecto.
  • level 1: el margen se alinea con el lateral de la columna central.
  • level 2: el margen excede 50 px el lateral de la columna central.
  • level 3: el margen excede 100px el lateral de la columna central.

Image 5951

Si se combina con la propiedad "Margen derecho", podemos hacer que la fila tenga un se comporte igual en el otro margen.

Image 5952

Imagen de fondo

Permite poner una imagen de fondo en la fila. Pulsaremos "Examinar" para acceder a la carpeta de Recursos de la unidad (ver aquí ) y seleccionar en ella la imagen deseada. Se admiten imágenes con formato jpeg, png y gif.

Color de fondoPermite definir un color de fondo para la fila. Si se ha añadido una "Imagen de fondo" ésta prevalecerá sobre el color.

Propiedades de la columna

PROPIEDADDESCRIPCIÓN
TamañoTamaño que ocupará la columna dentro de la fila. Puede ser de 1 a 12 espacios.
Animación

Permite añadir un efecto de animación a la aparición de la columna:

  • Ninguna: sin efecto.
  • Fade: efecto de aparición.
  • Fade up: efecto de aparición desde abajo.
Compensación

Esta opción permite crear un espacio de separación a la izquierda de la columna, generando una separación visual de la columna anterior. Esta compensación puede ser de 1 a 12 espacios.

Image 5956

Es última columna

Permite indicar que esta columna será la última de la fila. Así, aunque otra opción posterior cupiese en el espacio disponible, se le obligará a colocarse debajo. En este ejemplo, en la fila superior habrían cabido dos más opciones, pero hemos obligado que bajen a la siguiente fila.

Image 5957

Mantener tamaño en versión PDFPermite decidir  cómo se mostrará la columna en la versión imprimible en pdf:
- Sí:
el contenido de la columna se mostrará con el "Tamaño" definido. Así, si hay contenidos en 3 columnas, se verán de igual modo en la versión imprimible.
- No:
hará que el contenido de la columna se vea a tamaño completo en el PDF (a 12 espacios). Esto será positivo si queremos que las columnas se muestren unas encima de otras en la versión PDF para facilitar la lectura. Resultará útil si tenemos contenidos 

Por ejemplo, si creamos 3 columnas con imágenes volteables, podemos decidir si se mostrarán las 3 en línea en el pdf con la opción "Sí":

Image 19440

O si se muestran a tamaño completo para facilitar la lectura con la opción "No":

Image 19441


¿Le resulta útil este artículo?
© 2023 Netex Knowledge Factory. Todos los derechos reservados. Aviso Legal | Política de Privacidad | Política de Cookies.
-