It is a class that defines the styling and positioning parameters of Beagle components.
Attributes | Type | Required | Definition |
---|---|---|---|
backgroundColor | Bind<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. | |
cornerRadius | CornerRadius | Using 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 | |
borderColor | Bind<String> | Sets the color of your view border. Supported formats:#RRGGBBAA and #RGBA. | |
borderWidth | Bind<Double> | Sets the width of your view border. | |
size | Size | adds a size number to a view. Click on the size parameter link to check it’s details. | |
margin | EdgeValue | Adds 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. | |
padding | EdgeValue | Adds 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. | |
position | EdgeValue | Adds padding to a view position. Click on the position parameter link to check it’s details. | |
flex | Flex | Defines a view flex property. Click on the flex parameter link to check it’s details. | |
positionType | PositionType | Sets 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. | |
display | Bind<Display> | Enables a view flex property for all its direct children. Click on the display parameter link to check it’s details. |
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
)
}
)
)
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.