In this section, you will find more about widget’s components and its attributes details.

What is it?

A Widget is an abstract class that allows a visual component to be referenced on Beagle. When a visual component extends from a widget, it gets 3 attributes that enables some them, with its functions in the viewed elements.

abstract class Widget : StyleComponent, AccessibilityComponent, IdentifierComponent {

    override var id: String? = null
    override var style: Style? = null
    override var accessibility: Accessibility? = null

We list below all the attributes a widget can receive. But, if you want an use example and how to create a widget, see our section creating a component.

Which are the attributes?

Widget’s attributes

The main attributes of this class are:

idstring parameter that identifies the visual component listed by a widget.
styleThis attribute is defined by a Style class that is configured to define a series of visual properties.
data class Style (
    val backgroundColor: String? = null,
    val cornerRadius: CornerRadius? = null,
    val size: Size? = null,
    val margin: EdgeValue? = null,
    val padding: EdgeValue? = null,
    val position: EdgeValue? = null,
    val flex: Flex? = null,
    val positionType: PositionType? = null,
    val display: Display? = null)

Style attributes

The main attributes are:

backgroundColorIt defines with a string parameter the background color of a visual component. It is important that the color is listed with hexadecimal format, starting with #. For example: white color in a background "FFFFFF".
cornerRadiusDefines with a double value the rouding edge of this component.
sizeDefines a size of a component with a whole value. This value must be followed by a .unitPercent() notation to define a percentage size related to the application's screen, or using the .unitReal() notation to define a size in pixels. A 80.unitPercent() value defines that a component will have a relative size of 80% of a screen. And 80.unitReal() defines a 80 pixels size.
marginIt determines the margin that will affect the spacing around the element, it will help them move according the internal limits of its father and brothers elements. The margin element contributes to the total size of its father, for example, if the father element is automatically sized.
paddingDefines internal spaces of the component, it behaves like 'internal margin' of the element. For example, a container has two visuals elements that defines a padding value, so that internal elements aren't glued to the internal margins.
positionAttribute that adds a padding to a position. For more details about how it works, check our documentation about position attributes in component's layout.
flexFlex attribute positions the elements on a screen. For more details about it, check our documentation about Flex.
positionTypePosition Type attribute establishes a relation with the element's positioning and its brothers.
displayAttribute that defines if the element linked to this widget will be positioned by Flex.

Accessibility attributes

The main attributes are:

accessibleEnable a boolean value with accessibility information.
accessibilityLabelDefines with a string message for accessibility.

How to use it?

On the example below, we used a Container to show the widgets attributes. The class defines a visual component that must extend the widget class.

        Text("I'm a Server-Driven text "),
        Text(" I'm another Server-Driven text")

).setStyle {
            backgroundColor = "#ff8100"
            cornerRadius = CornerRadius(25.0)
            size = Size.box(width = 70, height = 80)
            margin = EdgeValue.all(20)
            padding = EdgeValue.all(15)
            position = EdgeValue.only(0)
            flex = Flex(FlexDirection.ROW)
            positionType = PositionType.RELATIVE
            display = Bind.value(Display.FLEX)
        }.setAccessibility {
            accessible = true
            accessibilityLabel = "I have acessibility"