helium/docs/Layout.md
Elmārs Āboliņš f85b19c118 Documentation
2021-06-22 14:12:19 +03:00

1.5 KiB

Layout

Layouts are modules to help you laying elements out within a viewport, note they can only be used within elements themselves

Current layout schemes are:

Column

Very basic column layout, it'll place one element after the next in a column

Row

Very basic row layout, it'll place one element after the next in a row

Container

Use this to position a single element within a parent container

Grid

Something akin to CSS grids, can create responsive layouts

Use em inside an element like:

local layoutScheme = require('helium.layout.column')
local someChildElementFactory

function ()
	local someChildElement = someChildElementFactory({}, 20, 20)
	return function()
		local layout = layoutScheme.new()
		someChildElement:draw()
		layout:draw()
	end
end

Each of these layout schemes will return a generic layout object which has a bunch of chainable methods, for setting padding, layout size etc.
Some of the methods follow the size scheme of 0-1 = relative to the container (0-100%) and above = pixels, so that's something to keep in mind
Layouts have some defaults set, like covering the whole width and height of the conteiner by default.

local layoutScheme = require('helium.layout.column')
local someChildElementFactory

function ()
	local someChildElement = someChildElementFactory({}, 20, 20)
	return function()
		local layout = layoutScheme.new():width(300):height(300)
		someChildElement:draw()
		layout:draw()
	end
end