ui/Layout

Provides ui layout support using Cell, Row, and Column that uses flexbox to lay out elements.

import Layout from '@enact/ui/Layout';

Members

LayoutClass

A container for Cells.

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.

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
String

The alignment of children.

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 of align-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. This includes support for align-parts which is shorthand for combining align-items and justify-content into a single property, separated by a space, in that order. This allows you to specify both the horizontal and vertical alignment in one property, separated by a space.

children
Any

Only Cell components are supported as children.

component
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
Boolean

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
String

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
BooleanString

Sets the Layout's flex-wrap values.

Determines 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 and false, the following strings are supported: 'wrap', 'nowrap', 'reverse'. 'reverse' performs 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
String

The alignment of Cell.

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 of align-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

Any valid Node that should be positioned in this Cell.

component
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
Boolean

Sizes Cell to its contents.

A shrinkable 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
StringNumber

Sets the desired size of the Cell using any valid CSS measurement value.

When used in conjunction with shrink, the size will be the maximum size, shrinking as necessary, to fit the content.

E.g.

  • size="400px" -> cell will be 400px, regardless of the dimensions of your content

  • size="400px" shrink -> cell will be 400px if your content is greater than 400px, and will match your contents size if it's smaller

This accepts any valid CSS measurement value string. If a numeric value is used, it will be treated as a pixel value and converted to a relative unit based on the rules of resolution independence.

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';
ArrayBooleanFunctionModuleNumberObjectString