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.
The main attributes of this class are:
Attribute | Definition |
---|---|
id | string parameter that identifies the visual component listed
by a widget . |
style | This 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)
The main attributes are:
Attribute | Description |
---|---|
backgroundColor | It 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". |
cornerRadius | Defines with a double value the rouding edge of this component. |
size | Defines 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. |
margin | It 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. |
padding | Defines 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. |
position | Attribute that adds a padding to a position. For more details about how it works, check our documentation about position attributes in component's layout. |
flex | Flex attribute positions the elements on a screen. For more details about it, check our documentation about Flex. |
positionType | Position Type attribute establishes a relation with the element's positioning and its brothers. |
display | Attribute that defines if the element linked to this widget will be positioned by Flex. |
The main attributes are:
Attribute | Description |
---|---|
accessible | Enable a boolean value with accessibility information. |
accessibilityLabel | Defines with a string message for accessibility. |
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.
Container(
listOf(
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"
}.setId("WidgetID")
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.