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.
Os principais atributos desta classe são:
Atributo | Tipo | Obrigatório | Definição |
---|---|---|---|
id | String | identifica o componente visual listado pelo widget . | |
style | Style | define uma série de propriedades visuais. | |
accessibility | Accessibility | define o conteúdo textual para uso de leitor de telas. |
Os principais atributos são:
Atributo | Tipo | Obrigatório | Definição |
---|---|---|---|
backgroundColor | String | Define 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 | |
cornerRadius | CornerRadius | Define o arredondamento da borda desse componente | |
size | Size | Define 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. | |
margin | EdgeValue | Determina 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. | |
padding | EdgeValue | Define 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. | |
position | EdgeValue | Adiciona 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. | |
flex | Flex | Responsável por posicionar elementos na tela. Para mais detalhes verifique nossa documentação sobre o Flex. | |
positionType | PositionType | Responsável por estabelecer a relação de posicionamento entre este elemento e seus irmãos. | |
display | Display | Define se o elemento vinculado a esse widget será posicionado
pelo Flex. |
Os principais atributos são:
Atributos | Tipo | Obrigatório | Definição |
---|---|---|---|
accessible | Boolean | Habilita informações para acessibilidade | |
accessibilityLabel | String | Define uma mensagem para acessibilidade |
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")
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.