ATLSearchBox

SB_Orig

Esta molécula foi desenhada para conter uma caixa de busca em tempo real com um mecanismo de apagar o input.

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

Exemplo de Uso:

import { ATLSearchBox } from '@appsimples/atlantica-react-native'
...
<ATLSearchBox
    value={value}
    onChange={onChangeValue}
    placeholderText={'Busca'}
/>

Props

value
onChange
placeholderText
complementaryPrimary
complementarySecondary
hideClearButton
isLoading
horizontalMargin
verticalMargin
clearButtonBaseProps
iconBaseProps

`value`

Valor de texto que será exibido no input.

Tipo	Obrigatório
string	Não

`onChange`

Handler que será chamado quando o usuário mudar o texto.

Tipo	Obrigatório
function	Não

`placeholderText`

Texto que aparece inicialmente no campo antes de o usuário começar a digitar. Ao focar no campo, o texto some.

Tipo	Obrigatório
string	Não

`complementaryPrimary`

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

Tipo	Obrigatório
boolean	Não

`complementarySecondary`

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

Tipo	Obrigatório
boolean	Não

`hideClearButton`

Se for true, deixa de exibir o botão de limpar quando a digitação é iniciada.

Tipo	Obrigatório
boolean	Não

`isLoading`

Se for true, mostra um símbolo de loading dentro do input, à direita.

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	SpacingBase	8

`clearButtonBaseProps`

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

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
buttonBorderColor	ColorNone	'transparent'
buttonBorderWidth	(fixed)	0
buttonColor	ColorNone	transparent
buttonSize	SizeIconBase	24
iconColor	ColorLightNeutral	#9E9E9E
iconSize	SizeIconBase	24

Para mais informações, acesse ATLIconButtonBase.

`iconBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo de ícone da lupa à esquerda da molécula, é possível através da modificação das iconBaseProps.

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

Props	Token	Default Value
opacity	(fixed)	1
size	SizeIconBase	24
tintColor	ColorLightNeutral	#9E9E9E

Para mais informações, acesse ATLIconBase.

Atlantica

Moléculas

Átomos