ATLAvatarEditorCondensed
Esta molécula é composta por um avatar e um botão.
Para visitar a documentação de design desta molécula, clique aqui.
[IMAGEM]
Exemplo de Uso:
import { ATLAvatarEditorCondensed } from '@appsimples/atlantica-react-native'
...
<ATLAvatarEditorCondensed
buttonText={'Mudar Foto'}
currentImage={avatar}
onPressButton={onPressButton}
/>
Props
buttonTextcurrentImageplaceholderImageonPressButtonisAvatarSquarehorizontalMarginAvatarhorizontalMarginButtonverticalMarginavatarBasePropsbuttonBaseProps
buttonText
Texto que aparece dentro do botão de ação.
| Tipo | Obrigatório |
|---|---|
| string | Sim |
currentImage
Imagem do usuário que irá aparecer dentro do círculo à esquerda.
| Tipo | Obrigatório |
|---|---|
| ImageSourcePropType | Sim |
placeholderImage
Imagem de placeholder do avatar do usuário.
| Tipo | Obrigatório |
|---|---|
| ImageSourcePropType | Não |
onPressButton
Handler que será chamado quando o usuário apertar o botão de ação.
| Tipo | Obrigatório |
|---|---|
| function | Sim |
isAvatarSquare
Campo boleano que indica se o avatar irá utilizar tokens que o deixem arredondado ou quadrado.
| Tipo | Obrigatório |
|---|---|
| boolean | Não |
horizontalMarginAvatar
Essa propriedade deve ser modificada caso seja necessário alterar a margem horizontal externa esquerda.
Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.
| Prop | Token | Default Value |
|---|---|---|
| horizontalMargin | SpacingInputMarginHorizontal | 24 |
horizontalMarginButton
Essa propriedade deve ser modificada caso seja necessário alterar o espaçamento externo ao botão.
Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.
| Prop | Token | Default Value |
|---|---|---|
| horizontalPadding | SpacingButtonMarginHorizontal | 32 |
verticalMargin
Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical externa aos elementos da molécula.
Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.
| Prop | Token | Default Value |
|---|---|---|
| verticalMargin | SpacingBase | 8 |
avatarBaseProps
Caso seja necessário mudar alguma propriedade base do átomo de avatar, é possível através da modificação das avatarBaseProps.
Abaixo temos uma tabela com todas as props do avatar, os tokens aos quais estão relacionadas e o seu valor padrão.
| Prop | Token | Default Value |
|---|---|---|
| size | SizeAvatarBase | 64 |
| borderColor | ColorPrimary | #A94CC9 |
| borderRadius | BorderRadiusAvatar | 32 |
| borderWidth | BorderWidthAvatar | 0 |
Para mais informações, acesse ATLAvatarBase.
buttonBaseProps
Caso seja necessário mudar alguma propriedade base do átomo de botão de ação, é possível através da modificação das buttonBaseProps.
Abaixo temos uma tabela com todas as props do botão, os tokens aos quais estão relacionadas e o seu valor padrão.
| Props | Token | Default Value |
|---|---|---|
| borderColor | ColorPrimary | #A94CC9 |
| borderRadius | BorderRadiusButton | 10 |
| borderWidth | BorderWidthButton | 1 |
| buttonColor | ColorPrimary | #A94CC9 |
| buttonHeight | HeightButtonBase | 32 |
| fontFamily | FontFamilyBase | undefined |
| fontSize | FontSizeButton | 12 |
| fontWeight | FontWeightStrong | Bold (700) |
| textCase | TextCaseButton | Uppercase |
| textColorRegular | ColorComplementary | #FFFFFF |
| disabledOpacity | OpacityDisabled | 0.3 |
Para mais informações, acesse ATLButtonBase.