Widget

Descrição dos componentes do Widget e seus atributos

O que é?

O Widget é uma classe abstrata que permite que um componente visual seja referenciado no Beagle. Quando um componente visual se estende do widget, ele herda 3 atributos que habilitam algum atributos e funcionalidades nos elementos visualizados.

abstract class Widget : StyleComponent, AccessibilityComponent, IdentifierComponent {

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

Abaixo listamos todos os atributos que um widget pode receber. Mas se quiser um exemplo de uso e como criar um widget, veja a seção posicionamento de componentes.

Quais seus atributos?

Atributos do Widget

Os principais atributos desta classe são:

AtributoTipoObrigatórioDefinição
idStringidentifica o componente visual listado pelo widget.
styleStyledefine uma série de propriedades visuais.
accessibilityAccessibilitydefine o conteúdo textual para uso de leitor de telas.

Atributos do Style

Os principais atributos são:

AtributoTipoObrigatórioDefinição
backgroundColorStringDefine a cor de fundo de um componente visual. Para isso, é importante que a cor seja listada em formato hexadecimal, necessariamente começando com #. Por exemplo: a cor branca em um background seria "#FFFFFF
cornerRadiusCornerRadiusDefine o arredondamento da borda desse componente
sizeSizeDefine o tamanho do componente com um valor inteiro . Este valor deve ser seguido da notação .unitPercent() para definir um tamanho percentual em relação a tela da aplicação, ou usando a notação .unitReal() para definir um tamanho pontual em pixels. Um valor 80.unitPercent() define que o componente terá um tamanho relativo a 80% da tela. Já 80.unitReal()define o tamanho de 80 pixels.
marginEdgeValueDetermina a margem que afeta o espaçamento ao redor de um elemento, contribuindo para que ele se desloque de acordo com os limites internos do elemento pai e de seus irmãos. A margem de um elemento contribui para o tamanho total de seu pai se, por exemplo, o elemento pai for dimensionado automaticamente.
paddingEdgeValueDefine espaços internos no componente, ele se comporta como uma espécie de "margem interna" do elemento. Por exemplo, um container que tenha dois elementos visuais define um valor para padding para que os elementos internos não fiquem "colados" nas margens internas.
positionEdgeValueAdiciona padding a uma posição. Para mais detalhes sobre seu funcionamento verifique nossa documentação sobre o atributo posição em um layout de componentes.
flexFlexResponsável por posicionar elementos na tela. Para mais detalhes verifique nossa documentação sobre o Flex.
positionTypePositionTypeResponsável por estabelecer a relação de posicionamento entre este elemento e seus irmãos.
displayDisplayDefine se o elemento vinculado a esse widget será posicionado pelo Flex.

Atributos do Accessibility

Os principais atributos são:

AtributosTipoObrigatórioDefinição
accessibleBooleanHabilita informações para acessibilidade
accessibilityLabelStringDefine uma mensagem para acessibilidade

Como usar?

No exemplo abaixo, utilizamos um Container para exemplificar os atributos de um widget. A classe que define um componente visual deve estender da classe widget.

Container(
    listOf(
        Text("I'am a Server-Driven text"),
        Text("I'am 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")