Padding

This section lists information about the Padding property.

Padding

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

Atributes

All

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)
                        )
                    )
                )
        )
    }

Bottom

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)
                        )
                    )
                )
        )
    }

Left

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)
                        )
                    )
                )
        )
    }

Top

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)
                        )
                    )
                )
        )
    }

Horizontal

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)
                        )
                    )
                )
        )
    }

Vertical

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.


Last modified February 11, 2021: create content (#298) (43225e15)