Visão Geral

Descrição do Style e seus atributos

O que é?

É uma classe que define os parâmetros de estilo e posicionamento dos componentes do Beagle.

Atributos	Tipo	Definição
backgroundColor	Bind<String>	Define a cor de fundo em um componente. Deve ser listado com um formato de cor hexadecimal. Por exemplo, digite “#FFFFFF” para um fundo BRANCO.
cornerRadius	CornerRadius	Define se o canto do componente é arredondado. Você pode definir um valor para o parâmetro `radius` que será aplicado a todos os cantos ou pode definir um valor para cada um dos cantos, como `topLeft`, `bottomLeft`, `topRight` e `bottomRight`
borderColor	Bind<String>	Define a cor da borda de um componente. Formatos suportados: #RRGGBBAA e #RGBA.
borderWidth	Bind<Double>	Define a largura da borda de um componente.
size	Size	Adiciona um tamanho a um componente. Clique no link do parâmetro size para mais detalhes.
margin	EdgeValue	Adiciona espaçamento ao redor de um componente. Um componente com margem se deslocará dos limites de seu pai, mas também deslocará a localização de quaisquer irmãos. A margem de um componente contribui para o tamanho total de seu pai, se o pai for dimensionado automaticamente. Clique no link do parâmetro margin para mais detalhes.
padding	EdgeValue	Adiciona um espaço interno as laterais de um componente ao qual é aplicado. O `padding` no Yoga atua como se fosse um box-sizing: border-box. O preenchimento não será adicionado ao tamanho total de um elemento se ele tiver um conjunto de tamanho explícito. Para visualizações com tamanho automático, o preenchimento aumentará o tamanho do componente e também deslocará a localização de quaisquer filhos. Clique no link do parâmetro padding para mais detalhes.
position	EdgeValue	Adiciona espaço a posição de um componente. Clique no parâmetro position para mais detalhes.
flex	Flex	Define a propriedade `flex` no componente em que é aplicado. Clique no link do parâmetro flex para mais detalhes
positionType	PositionType	Define a propriedade `position type` para definir a relação de um componente com seus componentes-parentes. Ele pode ser definido como `relative` ou `absolute`. Clique no link do parâmetro positionType para mais detalhes.
display	Bind<Display>	Habilita a propriedade `flex` para todos os filhos diretos do componente em que é aplicado. Clique no link do parâmetro display para mais detalhes.

Como usar?

O exemplo abaixo é um botão que possui alguns parâmetros de estilo (Style) definidos. Os parâmetros listados acima que não implementados abaixo, estão listados na seção Posicionamento do componente.

JSON
Kotlin DSL

Container(
            children = listOf(
                Button(
                    text = "Click",
                    onPress = listOf(
                        Alert(
                            title = "Styled Button",
                            message = "This button has got the Style!"
                        )
                    )
                ).setStyle {
                    backgroundColor = constant("#3C7503")
                    borderColor = constant("#ff6681")
                    borderWidth = constant(5.0)
                    cornerRadius = CornerRadius(
                        radius = constant(20.0),
                        topLeft = constant(0.0),
                        bottomRight = constant(0.0)
                    )
                }
            )
)