⚠️ You are viewing documentation for version: v1.6
Beagle v1.6 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
Positiontype
PositionType
This property defines the position of an element within the parent and whether it should be used as Relative or Absolute
Relative (default)
This property positions the element in relation to the other elements in the same flow, causing them to move respecting the limits on their sibling elements.
This is how it displays
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(size = Size(width = 130.unitReal(),height = 130.unitReal()))
),
createText(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(size = Size(width = 100.unitReal(),height = 100.unitReal()))
),
createText(backgroundColor = "#649d66", text = "3").applyFlex(
Flex(size = Size(width = 70.unitReal(),height = 70.unitReal()))
)
)
).applyFlex(
Flex(flexDirection = FlexDirection.ROW)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().height(130).width(130))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().height(100).width(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().height(70).width(70))),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
)
)
)
}
Absolute
This element is used when you wish an element to “escape” the normal flow on the layout. It will be displayed regardless of its siblings.
Check it out how it works:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(size = Size(width = 130.unitReal(),height = 130.unitReal()))
),
createText(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(size = Size(width = 100.unitReal(),height = 100.unitReal()))
),
createText(backgroundColor = "#649d66", text = "3").applyFlex(
Flex(size = Size(width = 70.unitReal(),height = 70.unitReal()),
positionType = FlexPositionType.ABSOLUTE)
)
)
).applyFlex(
Flex(flexDirection = FlexDirection.ROW)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().height(130).width(130))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().height(100).width(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex()
.positionType(.absolute)
.size(Size().height(70).width(70))),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
)
)
)
}
For more information about PositionType, check out the Yoga Layout documentation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.