Migrating Enyo Fittables
Enact does not provide Enyo’s Fittable components. If you are porting an Enyo application that uses
Fittables (FittableColumns, FittableRows, FittableLayout, etc.) to Enact, you can use other methods,
such as the CSS Flexible Box Layout Module (flexbox). Level 1 is currently a W3C Last Call Working Draft and is widely supported by modern browsers.
Using flexbox has some performance implications, so consider that a basic column layout can often be
obtained simply by applying the display: inline-block style to the children of a component. Most Enact
components have display: block style (row layout) by default.
Fittables
For a brief refresher, Fittables allowed you to specify how to fit child components by using either the
FittableRowsLayout or the FittableColumnsLayout as well as letting you specify a single child
component to ‘fit’ the available space after the other child components were rendered (or given a size).
Example
This example demonstrates a simple usage of Fittables. Note that only one child component can have
fit: true. The named fitter component will stretch to fill the space of fittableColumn.
...
components: [
{name: 'fittableColumn', layoutKind: FittableColumnsLayout, components: [
{style: 'width: 5em;'},
{name: 'fitter', fit: true},
{style: 'width: 5em;'}
]}
]
...Flexbox Layout
Using flexbox allows you to take even finer-grained control over how and where child nodes are laid out.
A point to note between Fittables and flexbox is how you consider a row and a column. In the
Fittable example, the FittableColumnsLayout component behaves as a row (the child components are the
‘columns’ for that row) similarly to specifying flex-direction: row style for a flex container.
Example
This is a simple example of creating a FittableColumnsLayout style with Enact and flexbox. This
example uses inline style tags, though using CSS classes would be preferable.
<div style={{display: "flex"}}>
<div style="width: 5em;">A</div>
<div style={{flexGrow: 1}}>B</div>
<div style="width: 5em;">C</div>
</div>Note: To keep other children from shrinking, you can apply flexShrink: 0 style to them.