Segment Layout

The following examples show a segment layout with four and three columns and a segment layout with 'auto' and '1fr'.

4 Columns

The sum of the values is 12.

<tc:segmentLayout extraSmall="2seg 3seg 4seg 3seg">

3 Columns

The sum of the values is 8. After the third element, the sequence starts from the beginning. So the fourth element got a value of 2.

<tc:segmentLayout extraSmall="2seg 2seg 4seg">

'auto' and '1fr'

<tc:segmentLayout extraSmall="1fr auto 1fr">

the remaining space

width of the content

the remaining space

For the different kinds of screen sizes, the segment layout has the attributes: extraSmall, small, medium, large, extraLarge and extra2Large.

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 extra2Large="1seg" extraLarge="2seg" large="3seg" medium="4seg" small="5seg" extraSmall="6seg"> ...

A margin can be set for the different proportions with the attributes marginExtraSmall, marginSmall, marginMedium, marginLarge, marginExtraLarge and marginExtra2Large.

Possible values are none, left, right and both.

<tc:segmentLayout extraSmall="5seg 3seg" marginExtraSmall="none both left both"> ...

An offset can be set for the different proportions with the <tc:segmentLayoutConstraint/> tag which can have the attributes offsetExtraSmall, offsetSmall, offsetMedium, offsetLarge, offsetExtraLarge and offsetExtra2Large.

Possible values are from 1 to 11 for offsetExtraSmall.
For the other attributes possible values are from 0 to 11.
A offsetMedium="0" overwrite the offset from smaller proportions.

<tc:segmentLayout extraSmall="2seg 2seg 2seg 2seg 2seg 2seg"> <tc:in value="1"/> <tc:in value="2"> <tc:segmentLayoutConstraint offsetExtraSmall="1" offsetSmall="2" offsetMedium="3" offsetLarge="4" offsetExtraLarge="5"/> </tc:in> ... </tc:segmentLayout>

The default layout and margins can be overwritten by the <tc:segmentLayoutConstraint/> tag. Possible attributes are extraSmall, small, medium, large, extraLarge and extra2Large for the layout.
And: marginExtraSmall, marginSmall, marginMedium, marginLarge, marginExtraLarge and marginExtra2Large for the margins.

<tc:segmentLayout extraSmall="4seg 8seg"> <tc:in value="4"/> <tc:in value="8"/> <tc:in value="3 - both"> <tc:segmentLayoutConstraint extraSmall="3seg" marginExtraSmall="both"/> </tc:in> <tc:in value="8"/> </tc:segmentLayout>

The horizontal alignment can be set with justify. Possible attributes are none, start, center, end, around and between. The default value is none.

<tc:segmentLayout extraSmall="4seg 4seg" justify="none"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="start"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="center"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="end"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="around"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout> <tc:segmentLayout extraSmall="4seg 4seg" justify="between"> <tc:in value="A"/> <tc:in value="B"/> </tc:segmentLayout>