The segment layout has 12 columns. If a row doesn't use all columns, the position of the content can be
influenced with a
margin.
If a margin is set in a segment, it try to use all remaining space.
- Margin on the left pushes the segment to the right.
- Margin on the right pushes the segment to the left.
- Margin on both sides center the segment.
The margin is set for different screen sizes with the following attributes:
marginExtraSmall,
marginSmall,
marginMedium,
marginLarge,
marginExtraLarge and
marginExtra2Large.
Possible values are
none,
left,
right and
both.
In the example, each row has two segments that use 5 columns and 4 columns, leaving 3 columns unused.
In the first row, no margin is set. Both segments are on the most left side. The remaining space is on the right.
In the second row, the first segment has a margin on the left, pushing the segment to the right.
In the third row, the first segment has margin on both sides. The margin use all available space, centering the
first segment. The second segment is pushed on the most right side.
In the fourth row, the first segment has a margin on the right, unsing the remaining 3 columns, so the second
segment is on the most right position.
<tc:segmentLayout extraSmall="5seg 4seg"
marginExtraSmall="none none left none both none right none">
...