CornerRadius
Descrição do CornerRadius.
É uma classe que define os parâmetros de estilo e posicionamento dos componentes do Beagle.
Atributos | Tipo | Obrigatório | 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. |
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
.
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)
)
}
)
)
Descrição do CornerRadius.
Descrição do EdgeValue.
Descrição do Size.
Descrição do UnitValue.
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.