Tokyo - Components | Row

Last modified:


"Row" is one of the most adaptable and interesting components offered by the Tokyo template. This component allows inserting "Columns" to order the rest of components. So, we can decide to display the information divided into columns. We would find a similar layout in newspapers, for instance.

Image 5958

Rows can be divided into 12 columns. We can add "Columns" to occupy 1-12 out of all the spaces available. For instance, we can add two symmetrical columns (6 spaces each), three symmetrical columns (4 spaces each), etc. We can also create asymmetrical layouts consisting of columns with different layouts.

Image 5959

Rows are added within the screens by default (See here), but they can also be added inside other components (for example, a Pop-up, an Accordion, a Row, etc.).
You will find this component in the group of "Cataloguer" components.

Image 5960

When we add a row, we can choose different preset structures that will help us when editing contents.

Image 5961

Setup process

1. Check the selected row (you can check this quickly from the breadcrumb trail), access the "Add" tab and, if needed, include new "Columns".

2. Access the "Properties" tab in the row and configure its properties (see the list of properties at the bottom of this page). Properties used to choose a background image or colour for the row are interesting. It is also possible to let the row width exceedthe central area of the screen.

Image 5962

3. Columns we created include a text by default, but there are also other components we can insert in the column. We select the column (the easiest way to do this is through the breadcrumb trail), access the "Add" tab and choose one of the components to "Insert inside" the column. Remember you can go to "Insert after" and add another column after this column.

4. Finally, access the "Properties" tab in the column. For example, this tab allows you to assign a width to each column included inside the row (1 to 12 spaces).

Image 5963

Row properties

PROPERTY

DESCRIPTION

Width

The row occupies 100% of the available space by default, but size can be changed to "Full", that is, size can be adjusted to fit the central column width.

Right margin

This property allows defining where the right margin should finish.

  • None: Default option.
  • level 1: The margin is aligned to one side of the central column.
  • level 2: The margin exceeds 50px the side of the central column.
  • level 3: The margin exceeds 100px the side of the central column.
    Image 5964
    If we combine the "Right margin" with the "Left margin" property, we can configure the same margin for both sides of a row. Image 5965

Left margin

This property allows defining where the left margin should start.

  • None: Default option.
  • level 1: The margin is aligned to one side of the central column.
  • level 2: The margin exceeds 50px the side of the central column.
  • level 3: The margin exceeds 100px the side of the central column.

    Image 5966If we combine the "Left margin" with the "Right margin" property, we can configure the same margin for both sides of a row. Image 5967

Background image

This property allows adding a background image for the row. We will click on "Examine" to access the unit Resources folder (check here ), and select the image we want to show. Supported image formats: jpeg, png, and gif.

Background colour

This property allows adding a background colour for the row. If we add a "Background image", this will prevail over the background colour.

Column properties

Lets decide how the column will be resolved in the printable version in pdf:
- Yes: the content of the column was defined with the "Size" defined. Thus, if there are contents in 3 columns, they will be seen in the same way in the printable version.
- No: will make the content of the column see a full size in the PDF (12 spaces). This will be positive if we want the columns to be displayed on top of each other in the PDF version for easy reading. We will be useful if we have content

For example, if we create 3 columns with flipping images, we can decide if the 3 are shown online in the pdf with the option "Yes":

PROPERTY

DESCRIPTION

Size

This is the size occupied by a column inside a row. Columns can occupy 1-12 spaces.

Animation

This property allows adding an animation effect when a column appears:

  • None: No effect.
  • Fade: Appearance effect.
  • Fade up: Appearance from the bottom of the screen.

Offset

This option allows creating a breaking space on the left of the column, which can be visually noticed. Offset can have 1-12 spaces.

Image 5969

It's the last column

This property allows marking a column as the last one within a row. This means that the second column will be placed below the first column, so that the third column appears as the last one within the row. This example shows that more options could have included in the first row, but we decided to insert them in the next row.

Image 5970

Keep size in PDF versionLets decide how the column will be resolved in the printable version in pdf:
- Yes:
the content of the column was defined with the "Size" defined. Thus, if there are contents in 3 columns, they will be seen in the same way in the printable version.
- No:
will make the content of the column see a full size in the PDF (12 spaces). This will be positive if we want the columns to be displayed on top of each other in the PDF version for easy reading. We will be useful if we have content

For example, if we create 3 columns with flipping images, we can decide if the 3 are shown online in the pdf with the option "Yes":

Image 19440

Or if they are displayed in full size for easy reading with the option "No":

Image 19441


Is this article helpful for you?
© 2023 Netex Knowledge Factory. All Rights Reserved. Disclaimer | Privacy policy | Cookie Policy.
-