ATLFloatingButton

FAB_orig

Esta molécula é composta por um botão que fica sobre os itens da tela no canto inferior direito.

Para visitar a documentação de design desta molécula, clique aqui.

Exemplo de Uso:

import { ATLFloatingButton } from '@appsimples/atlantica-react-native'
...
<SafeAreaView style={{ flex: 1 }}>
    <ScrollView>
    ... (sua tela aqui)
    </ScrollView>
    <ATLFloatingButton
        icon={myIcon} 
        onPress={onPressFloatingButton}
    />
</SafeAreaView>

Para a utilização, é importante atentar-se a alguns pontos:

Deve ser colocado na view mais externa da tela, que precisa possuir a propriedade flex: 1
Não deve ser colocada dentro de uma ScrollView

`icon`

Ícone que aparece dentro do botão.

Tipo	Obrigatório
ImageSourcePropType	Sim

`onPress`

Handler que será chamado quando o usuário apertar o botão.

Tipo	Obrigatório
function	Sim

`complementary`

Variação complementar da molécula a ser usada quando o fundo da tela é da cor ColorPrimary.

FAB_var

Tipo	Obrigatório
boolean	Não

`horizontalMargin`

Essa propriedade deve ser modificada caso seja necessário alterar a margem horizontal 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
horizontalMargin	SpacingMarginal	16

`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	SpacingMarginal	16

`iconButtonBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo de botão com ícone, é possível através da modificação das iconButtonBaseProps.

Abaixo temos uma tabela com todas as props do iconButton, os tokens aos quais estão relacionadas e o seu valor padrão.

Props	Token	Default Value
buttonColor	ColorPrimary	#A94CC9
buttonSize	SizeFloatingButton	50
buttonBorderColor	ColorPrimary	#A94CC9
buttonBorderRadius	BorderRadiusFloatingButton	25
buttonBorderWidth	(fixed)	0
iconColor	ColorComplementary	#FFFFFF
iconSize	SizeIconBase	24

Para mais informações, acesse ATLIconButtonBase.

Atlantica

Moléculas

Átomos