Layout and Positioning Elements
All elements require the following properties in order for the renderer to show them on the screen:
x
- the x position of the Element in pixels, relative to it's parent - allows negative valuesy
- the y position of the Element in pixels, relative to it's parent - allows negative valueswidth
- the width of the element in pixelsheight
- the height of the element in pixels
Components without a width and height value will inherit their parents width and height minus their x and y values. X and y will default to 0, 0 if not specified. The <Text>
component does not require any properties (it will use the default text properties).
Flex
A fundamental tool for layout is Flex container. At the moment there is a very barebone flex implementation (display: flex
). It supports flexDirection
, justifyContent
, alignItems
and gap
and is very useful for laying out elements in rows and columns.
import { View, Text } from '@lightningjs/solid';
const RowStyles = {
display: 'flex',
justifyContent: 'flexStart',
width: 1760,
height: 300,
gap: 26,
y: 400,
};
<View gap={12} style={RowStyles}>
<Text>TV Shows</Text>
<Text>Movies</Text>
<Text>Sports</Text>
<Text>News</Text>
</View>;
import { View, Text } from '@lightningjs/solid';
const RowStyles = {
display: 'flex',
justifyContent: 'flexStart',
width: 1760,
height: 300,
gap: 26,
y: 400,
};
<View gap={12} style={RowStyles}>
<Text>TV Shows</Text>
<Text>Movies</Text>
<Text>Sports</Text>
<Text>News</Text>
</View>;
Additionally, flex will automatically layout Text nodes. Anytime a View with display: flex has children which are text nodes it adds a listener for the text to load to set the width and height of the text elements and then calls updateLayout
on the container to recalculate the flex layout.
Flex Properties
alignItems
: 'flexStart' | 'flexEnd' | 'center'display
: 'flex'flexDirection
: 'row' | 'column'gap
: numberjustifyContent
: 'flexStart' | 'flexEnd' | 'center' | 'spaceBetween' | 'spaceEvenly'
You can put the following properties on the items to control the layout further.
marginBottom
: numbermarginLeft
: numbermarginRight
: numbermarginTop
: number
alignItems
supports flexStart
, flexEnd
, and center
but requires it's container to have a height / width set.
Layout Callbacks
When layout occurs on a container with display: flex
during initial rendering, updateLayout
is called calculating flex layout. If you want to tie into the layout system you can use onBeforeLayout
and onLayout
hooks to update the element with the following signature (node, { width, height})
. You can use this callback to resize the parent node before flex is calculated using onBeforeLayout
and after flex with onLayout
. If you do, call parent.updateLayout
for it to also resize.
Additionally, if you ever reason a child element, call updateLayout
on the parent to perform layout.