LudoJS

ludo.layout.Relative

ludo.layout.

Usage: layout: {type: "relative" }

Relative Layout. This layout will render children relative to each other based on the rules defined below.
For a demo, see Relative layout demo.

Parameters:
Name Type Description
config object
Properties
Name Type Description
width number | string

Width in Pixels or "matchParent".
height number | string

Height in pixels or "matchParent"
alignParentTop Boolean

Align at top edge of parent view
alignParentBottom Boolean

Align bottom of this view with the bottom of parent view
alignParentLeft Boolean

Align left in parent
alignParentRight Boolean

Right align inside parent
leftOf String

Align left of sibling with this id
rightOf String

Align right of sibling with this id
below String

Align below sibling with this id
above String

Align above sibling with this id
alignLeft String

Same left position as sibling with this id.
alignRight String

Same right position as sibling with this id
alignTop String

Same top position as sibling with this id
alignBottom String

Same bottom edge as sibling with this id
sameWidthAs String

Same width as sibling with this id
sameHeightAs String

Same height as sibling with this id
centerInParent Boolean

True to Center view inside parent
centerHorizontal Boolean

True to Center view horizontally inside parent
centerVertical Boolean

True to Center View vertically inside parent
fillLeft Boolean

True to use all remaining space left of view. (left pos will be 0)
fillRight Boolean

True to use all remaining space right of view.
fillUp Boolean

True to use all remaining space above view. (top pos will be 0)
absLeft Number

Absolute pixel value for left position
absRight Number

Absolute pixel value for right position
absTop Number

Absolute pixel value for top position
absBottom Number

Absolute pixel value for bottom position
offsetX Number

After positioning the view, offset left position with these number of pixels.
offsetY Number

After positioning the view, offset top position with these number of pixels.
resize Array

Make the view resizable in these directions(left|right|above|below).
Source:
Example
var view = new ludo.View({
 	layout:{
 		width:'matchParent',height:'matchParent',
 		type:'relative' // Render children in relative layout
 	},
 	children:[ // array of relative positioned children
 	{
 		// Center this view inside parent
		{ id:'child1', html: 'First View', layout:{ centerInParent:true,width:200,height:200}},
		// Render below "child1" and align it with "child1"
		{ id:'child2', html: 'Second View', layout:{ below:'child1', alignLeft:'child1', width:300,height:50 }
 	}]
 });