Segment Layout

The segment layout is a grid with 12 columns. The number and the proportion of the columns can be set with the attributes extraSmall, small, medium, large, extraLarge and extra2Large. The value is a space separated list. Allowed are '1seg' to '12seg', 'auto' and '1fr'.

Tag Library Documentation

Basics

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

Screen Size

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

Margin

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

Offset

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>

Overwrite default layout

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>

Justify

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>

Menu