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 .
This property allows you to apply spacing inside a father element. This way, all child element that it is created after this configuration will come with a predefined spacing. Within Padding, you will also find the following atributes:
all, bottom, end, horizontal, left, right, start, top, vertical
It defines some space inside the element in all directions:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1"),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3"),
createText(backgroundColor = "#142850", text = "4"),
createText(backgroundColor = "#dd7631", text = "5"),
createText(backgroundColor = "#649d66", text = "6")
)
).applyStyle(
Style(
backgroundColor = "#0000000",
flex = Flex(flexDirection = FlexDirection.ROW),
padding = EdgeValue(all = 20.unitReal()
)
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
],widgetProperties: WidgetProperties(
style: Style(
backgroundColor: "#000000",
padding: EdgeValue().all(20)
flex: Flex().flexDirection(.row)
)
)
)
)
}
It defines some space at the bottom inside a element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1"),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3"),
createText(backgroundColor = "#142850", text = "4"),
createText(backgroundColor = "#dd7631", text = "5"),
createText(backgroundColor = "#649d66", text = "6")
)
)applyStyle(
Style(
backgroundColor = "#0000000",
flex = Flex(flexDirection = FlexDirection.ROW),
padding = EdgeValue(bottom = 20.unitReal()
)
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
],widgetProperties: WidgetProperties(
style: Style(
backgroundColor: "#000000",
padding: EdgeValue().bottom(20)
flex: Flex().flexDirection(.row)
)
)
)
)
}
It defines some space inside at the left side of the element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1"),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3"),
createText(backgroundColor = "#142850", text = "4"),
createText(backgroundColor = "#dd7631", text = "5"),
createText(backgroundColor = "#649d66", text = "6")
)
).applyStyle(
Style(
backgroundColor = "#0000000",
flex = Flex(flexDirection = FlexDirection.ROW),
padding = EdgeValue(left = 20.unitReal()
)
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
],widgetProperties: WidgetProperties(
style: Style(
backgroundColor: "#000000",
padding: EdgeValue().left(20)
flex: Flex().flexDirection(.row)
)
)
)
)
}
It defines some space inside the element, at the right side:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1"),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3"),
createText(backgroundColor = "#142850", text = "4"),
createText(backgroundColor = "#dd7631", text = "5"),
createText(backgroundColor = "#649d66", text = "6")
)
).applyStyle(
Style(
backgroundColor = "#0000000",
flex = Flex(flexDirection = FlexDirection.ROW),
padding = EdgeValue(right = 20.unitReal()
)
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
],widgetProperties: WidgetProperties(
style: Style(
backgroundColor: "#000000",
padding: EdgeValue().right(20)
flex: Flex().flexDirection(.row)
)
)
)
)
}
It defines some space inside the element, at the top:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1"),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3"),
createText(backgroundColor = "#142850", text = "4"),
createText(backgroundColor = "#dd7631", text = "5"),
createText(backgroundColor = "#649d66", text = "6")
)
).applyStyle(
Style(
backgroundColor = "#0000000",
flex = Flex(flexDirection = FlexDirection.ROW),
padding = EdgeValue(top = 20.unitReal()
)
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
],widgetProperties: WidgetProperties(
style: Style(
backgroundColor: "#000000",
padding: EdgeValue().top(20)
flex: Flex().flexDirection(.row)
)
)
)
)
}
It defines some horizontal space inside the element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1"),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3"),
createText(backgroundColor = "#142850", text = "4"),
createText(backgroundColor = "#dd7631", text = "5"),
createText(backgroundColor = "#649d66", text = "6")
)
).applyStyle(
Style(
backgroundColor = "#0000000",
flex = Flex(flexDirection = FlexDirection.ROW),
padding = EdgeValue(horizontal = 20.unitReal()
)
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
],widgetProperties: WidgetProperties(
style: Style(
backgroundColor: "#000000",
padding: EdgeValue().horizontal(20)
flex: Flex().flexDirection(.row)
)
)
)
)
}
It defines some vertical space inside the element:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1"),
createText(backgroundColor = "#dd7631", text = "2"),
createText(backgroundColor = "#649d66", text = "3"),
createText(backgroundColor = "#142850", text = "4"),
createText(backgroundColor = "#dd7631", text = "5"),
createText(backgroundColor = "#649d66", text = "6")
)
).applyStyle(
Style(
backgroundColor = "#0000000",
flex = Flex(flexDirection = FlexDirection.ROW),
padding = EdgeValue(vertical = 20.unitReal()
)
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
],widgetProperties: WidgetProperties(
style: Style(
backgroundColor: "#000000",
padding: EdgeValue().vertical(20)
flex: Flex().flexDirection(.row)
)
)
)
)
}
For more information about Padding, check out the Yoga Layout documentation.
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.