widget

Widget description and attributes

What is it?

Widget is an abstract class that allows a visual component to be referenced in Beagle. When a visual component extends from the widget class, it inherits 3 properties that enable some attributes and functionality in the instantiated elements.

abstract class Widget : StyleComponent, AccessibilityComponent, IdentifierComponent {

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

Below we list all the attributes that a widget can receive.

What are its attributes?

Widget Attributes

The main attributes of this class are:

AttributeTypeRequiredDefinition
idStringidentifies the Beagle components that the widget references
styleStyledefines some visual properties.
accessibilityAccessibilitydefines a message for the screen reader.

How to use?

In the example below, we use a Container (a default Beagle component) to demonstrate the attributes exposed by the widget.

Container(
    listOf(
        Text("I am a Server-Driven text"),
        Text("I am another Server-Driven text")
    )

).setStyle {
            backgroundColor = "#ff8100"
            cornerRadius = CornerRadius(constant(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"
        }.setId("WidgetID")

Last modified March 7, 2022: fix: Update docs 2.0 (#858) (4368557d)