Style

This section of style lessons, its attributes and characteristics

What is it?

It is a class that defines the styling and positioning parameters of Beagle components.

AttributesTypeRequiredDefinition
backgroundColorBind<String>Using a String parameter it sets the background color on this visual component. It must be listed as an Hexadecimal color format. For example, type in “#FFFFFF” for a WHITE background.
cornerRadiusCornerRadiusUsing Double parameters it sets the corner of your view to make it round. You could set a radius parameter that is applyed to all corners or you could a value to each of the corners, like topLeft, bottomLeft, topRight and bottomRight
borderColorBind<String>Sets the color of your view border. Supported formats:#RRGGBBAA and #RGBA.
borderWidthBind<Double>Sets the width of your view border.
sizeSizeadds a size number to a view. Click on the size parameter link to check it’s details.
marginEdgeValueAdds spacing around the outside of a view. A view with margin will offset itself from the bounds of its parent but also offset the location of any siblings. The margin of a view contributes to the total size of its parent if the parent is auto sized. Click on the margin parameter link to check it’s details.
paddingEdgeValueAdds to the view size it is applied to. Padding in Yoga acts as if box-sizing: border-box; was set. Padding will not add to the total size of an element if it has an explicit size set. For auto sized views, padding will increase the view size as well as offset the location of any children. Click on the padding parameter link to check it’s details.
positionEdgeValueAdds padding to a view position. Click on the position parameter link to check it’s details.
flexFlexDefines a view flex property. Click on the flex parameter link to check it’s details.
positionTypePositionTypeSets the position type of an element to define how it is positioned within its parent. It could be set to either relative or absolute. Click on the positionType parameter link to check it’s details.
displayBind<Display>Enables a view flex property for all its direct children. Click on the display parameter link to check it’s details.

How to use it?

The example below is a Button that has some styles parameters defined. Parameters listed above and not implemented below are listed on the Component positioning section.

Container(
            children = listOf(
                Button(
                    text = "Click",
                    onPress = listOf(
                        Alert(
                            title = "Styled Button",
                            message = "This button has got the Style!"
                        )
                    )
                ).setStyle {
                    backgroundColor = "#3C7503"
                    borderColor = "#ff6681"
                    borderWidth = 5.0
                    cornerRadius = CornerRadius(
                        radius = 20.0,
                        topLeft = 0.0,
                        bottomRight = 0.0
                    )
                }
            )
)


Last modified March 4, 2022: Fix/updates misc docs 2.0 (#852) (58275b51)