Tokyo - Componentes | Fila

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.

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.

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".

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

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.

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).

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.

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

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.

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

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.

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.