The segment layout is basicly a grid with 12 columns.
The number and the proportion of the columns can be set with
large
, medium
, small
or extraSmall
.
Every attribute has a different css class, but the usage is the same.
The value is a semicolon separated list of integers, which sum has to be '12'.
A value of n will use n columns from the grid.
This example show a segment layout with four columns and a segment layout with three columns.
The numbers are displayed via the <tc:label/>
tag.
The space is set via the <tc:hidden/>
tag.
<tc:segmentLayout medium="1;6;2;3">
<tc:segmentLayout medium="2;4;6">
For the different kinds of screen sizes, the segment layout has four attributes:
large
, medium
, small
and extraSmall
.
The first two ones should be used for desktops. The last two should be used for tablets and phones.
Notice, that only the screen size matters. So a small browser window on a big screen also reacts with
small
and extraSmall
.
In the following example, all attributes are used. If you are on a desktop you can see the different behavior by changing the size of the browser window.
<tc:segmentLayout large="2;2;2;2;2;2"
medium="3;3;3;3" small="4;4;4" extraSmall="6;6">
...