Single Image
Função
Molécula que exibe uma imagem qualquer.
Estrutura Básica
Espaçamentos
- horizontalMargin, como Margem Lateral
- verticalMargin, como Margens Superior e Inferior.
Átomos
- Átomo SimpleImage, como Image
- Overlay (Faz parte do Átomo SimpleImage)
Prop-Token Mapping
Props da Molécula
| Prop | Token | Default Value | Use |
|---|---|---|---|
| horizontalMargin | SpacingMargin | 16 | 1 |
| verticalMargin | SpacingBase | 8 | 2 |
| imageBaseProps | - | - | 3 |
| imageOverlay | - | - | 4 |
ImageBaseProps
| Prop | Token | Default Value |
|---|---|---|
| borderColor | ColorNone | #000000 00% |
| borderRadius | BorderRadiusLogo | 0 |
| borderWidth | BorderWidthLogo | 0 |
| opacity | OpacityCover | 1 |
| resizeMode | ResizeModeCover | Cover |
| imageProportion | ProportionCover | 1:1 |
imageOverlay
| Prop | Token | Default Value |
|---|---|---|
| Color | ColorPrimary | #A94CC9 |
| Opacity | ColorOpacity | 0.85 |
Conteúdo
- Source: uma imagem
Estados
Não possui estados.
Reações
Conteúdo
A imagem fica centralizada dentro da área de exibição desta, respeitando a proporção indicada no Token ProportionCover.
Tamanho da Tela
As dimensões da molécula se modificam, mantendo a proporção da Imagem. Os espaçamento mantêm-se fixos. A altura da molécula se reduz proporcionalmente à largura da imagem.
Estados
Não apresenta variação de estado.
Tipos
Margin
É a molécula apresentada até aqui. Além desta, existe a seguinte variação.
No Margin
É a variação molécula apresentada até aqui, mas sem as props de espaçamento. Apresenta os mesmos tokens e reações.
No Overlay
Ambas as variações (Margin e No Margin) podem se apresentar sem o overlay. Neste caso, altera-se o token abaixo:
| imageOverlayProps | Token | Default Value |
|---|---|---|
| Opacity | ColorOpacity | 0 |