Containers
We have two general purpose single child containers Stretch and Content. The ideas of stretch and content are explained in the scale principle.
Here are few reasons why you should use these containers:
- Allow you to work with the stretch / content principle.
- Allow you to control the child alignment.
- They support BaseProps.
These containers behave the same as a Column with default of hAlign='start'.
Simplified:
Stretch=Column $scale='stretch'Content=Column $scale='content'
Stretch
Stretch into the parent container.
In the example below, we have an explicit sized Column (background blue) with an inner Stretch (background orange). The inner Stretch keeps its size to match that of the outer container (observed below as you don't see the background of the parent-blue as it is filled in by the child-orange).
scale?: numberprop allows you to control the stretch ratio (concept covered in scale principle) eg. a 1,2 ratio (Row(Stretch:1,Stretch:2)) is shown below:
Content
Content takes up as much space as needed its child.
In the example below we throw a few Content items in a Column(Content,Content,Content) structure:
BaseProps
Stretch, Content support all BaseProps.
Alignment
Stretch, Content support the same alignment as Column.
Example center,center:
Tip: Single Child
We mentioned that if you have more than one child item, you probably want to use something like a Column or Row.
Consider the case where you want some text in a Content. If this text has formatted items (e.g. <b>Hello</b is it me you are looking for.) things go bad as they go into a vertical layout:
Fix is simple. Ensure a single child e.g. wrap in a span:
Example: Table
It is common to have a table of items with some fixed width, some stretch items.
Below we power the table with a Column containing rows of Row(Content(width=explicit),Stretch(1),Stretch(2)):