Warning!
Preliminary implementation, work in progress!
The SplitLayout implements a two component layout with a divider between
the components to adjust the space between the components.
Drag the divder between the boxes to see the effect
<tc:splitLayout columns="2fr 1fr 1fr">
<tc:panel>
<tc:style minWidth="150px"/>
<p>...</p>
</tc:panel>
<tc:textarea value="Text 1" labelLayout="none">
<tc:style minWidth="150px"/>
</tc:textarea>
<tc:textarea value="Text 2" labelLayout="none">
<tc:style minWidth="150px"/>
</tc:textarea>
</tc:splitLayout>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
<tc:splitLayout columns="1fr 4fr 1fr">
<tc:button label="A"/>
<tc:button label="B"/>
</tc:splitLayout>
<tc:splitLayout columns="#{splitLayoutController.verticalLayout}">
<tc:splitLayout rows="#{splitLayoutController.horizontalLayout}">
<tc:box label="Top left box">
<tc:style minWidth="150px"/>
<tc:out
value="Current vertical layout first value: #{splitLayoutController.verticalLayoutFirstToken}"/>
<tc:out
value="Current horizontal layout first value: #{splitLayoutController.horizontalLayoutFirstToken}"/>
</tc:box>
<tc:box label="Top right box">
<tc:style minWidth="150px"/>
<tc:out
value="Current vertical layout first value: #{splitLayoutController.verticalLayoutFirstToken}"/>
<tc:out
value="Current horizontal layout second value: #{splitLayoutController.horizontalLayoutSecondToken}"/>
</tc:box>
</tc:splitLayout>
<tc:box label="Bottom box">
<tc:style minWidth="150px"/>
<tc:out
value="Current vertical layout second value: #{splitLayoutController.verticalLayoutSecondToken}"/>
</tc:box>
</tc:splitLayout>
Current vertical layout first value: 1fr
Current horizontal layout first value: 1fr
Current vertical layout first value: 1fr
Current horizontal layout second value: 1fr
Current vertical layout second value: 1fr