Tobago Demo

Menu

Label Layout

For many components, a label attribute is available, which place a label in front of the according component. With the labelLayout you can adjust this label. The following examples use an input field to show, how this works.

Tag Library Documentation: <tc:in/> | <tc:flowLayout/> | <tc:flexLayout/> | <tc:segmentLayout/>

Basics

Default value

If the labelLayout is not set, the value is 'flexLeft' by default.

<tc:in label="Input"/>

No label

The value 'none' has the same effect as just not set the label attribute.

<tc:in label="Input" labelLayout="none"/>

Label on top

The labelLayout is set to 'top'.

<tc:in label="Input" labelLayout="top"/>

Flow Layout

<tc:in label="Input" labelLayout="flowLeft"/> <tc:in label="Input" labelLayout="flowRight"/>

Flex Layout

<tc:in label="Input" labelLayout="flexLeft"/> <tc:in label="Input" labelLayout="flexRight"/>

Segment Layout

The segment layout is divided in two columns. The right one is three times bigger. The 'segmentLeft' and 'segmentRight' put the label in the left or in the right column.

<tc:segmentLayout medium="3seg 9seg"> <tc:in label="Input" labelLayout="segmentLeft"/> <tc:in label="Input" labelLayout="segmentRight"/> </tc:segmentLayout>
© 2005-2023 Apache Software Foundation, Licensed under the Apache License, Version 2.0.