ui/ Layout
Exports the ui/Layout.Layout, ui/Layout.LayoutBase, and ui/Layout.Cell
components. The default export is ui/Layout.Layout. Layout also has two shorthand
components exported: Row
and Column
. These two assign preset orientation
properties to
simplify usage and readability. They are identical to <Layout orientation="horizontal">
and
<Layout orientation="vertical">
respectively.
<Layout> <Cell shrink> <Button small>First</Button> </Cell> <Cell> <Item>An Item with some long text in it</Item> </Cell> <Cell shrink> <Button small>Last</Button> </Cell> </Layout>
import Layout from '@enact/ui/Layout';
Members
LayoutClass
A stateless component that acts as a containing area for Cells to be positioned in a row or a column (horizontally or vertically, respectively. It supports an orientation property for laying-out its contents (Cells) in an organized, readable way.
Additional Example:
import Input from '@enact/moonstone/Input';
import css from './LayoutExample.less';
...
<fieldset>
<Layout align="center">
<Cell component="label" size="40%" className={css.label} shrink>First Name</Cell>
<Cell component={Input} placeholder="First" className={css.input} />
</Layout>
<Layout align="center">
<Cell component="label" size="40%" className={css.label} shrink>Last Name</Cell>
<Cell component={Input} placeholder="Last" className={css.input} />
</Layout>
</fieldset>
import Layout from '@enact/ui/Layout';
Properties
- align
Aligns the children Cells vertically in the case of a horizontal layout or horizontally in the case of a vertical layout.
"start"
,"center"
and"end"
are the most commonly used, although all values ofalign-items
are supported."start"
refers to the top in a horizontal layout, and left in a vertical LTR layout"end"
refers to the bottom in a horizontal layout, and right in a vertical LTR layout"start"
and"end"
reverse places when in a vertical layout in a RTL locale.- children
Only Cell components are supported as children.
- component
The type of component to use to render as the Layout. May be a DOM node name (e.g 'div', 'span', etc.) or a custom component.
Default: 'div'- inline
Allows this Layout to have following siblings drawn on the same line as itself, instead of carving out the entire horizontal space for itself.
Default: false- orientation
The orientation of the Layout, i.e. how the children Cells are positioned on the screen. Must be either
'horizontal'
or'vertical'
.Default: 'horizontal'- wrap
Determine how a Layout handles its cells if there are more than fit in the available space. This works like a normal Boolean prop, but also accepts strings for customization beyond the basic on/off support. In addition to
true
andfalse
, the following strings are supported: 'wrap', 'nowrap', 'reverse'. 'reverse' preforms standard line wrapping but additional lines are placed above/before the preceding line instead of below/after.
CellClass
A stateless component that provides a space for your content in a Layout.
import {Cell} from '@enact/ui/Layout';
Properties
- align
Aligns this
Cell
vertically in the case of a horizontal layout or horizontally in the case of a vertical layout."start"
,"center"
and"end"
are the most commonly used, although all values ofalign-self
are supported."start"
refers to the top in a horizontal layout, and left in a vertical LTR layout"end"
refers to the bottom in a horizontal layout, and right in a vertical LTR layout"start"
and"end"
reverse places when in a vertical layout in a RTL locale.- children
Any valid Node that should be positioned in this Cell.
- component
The type of component to use to render as the Cell. May be a DOM node name (e.g 'div', 'span', etc.) or a custom component.
Default: 'div'- shrink
A
shrink
able cell will contract to its minimum size, according to the dimensions of its contents. This is used when you want the size of this Cell's content to influence the dimensions of this cell.shrink
will not allow the contents of the Layout to be pushed beyond its boundaries (overflowing). See the size property for more details.Default: false- size
Sets the requested size, possibly overflowing if the contents are too large for the space. When used in conjunction with shrink, the size will be set as close to the requested size as is possible, given the dimensions of the contents of this cell. E.g. If your content is
40px
tall and you setsize
to "30px", the Cell will render30px
tall. If shrink was used also, the rendered Cell would be40px
tall. This accepts any valid CSS measurement and overrules the shrink property.
ColumnClass
A ui/Layout.Layout that positions its Cells vertically.
import {Column} from '@enact/ui/Layout';
RowClass
A ui/Layout.Layout that positions its Cells horizontally.
import {Row} from '@enact/ui/Layout';