ATLCheckbox

Esta molécula é composta por uma checkbox de seleção binária seguida de textos e/ou links.

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

Exemplo de Uso:

import { ATLCheckbox } from '@appsimples/atlantica-react-native'
...

const useTermsText: CheckboxText[] = [
    { text: 'Li e concordo com os ' },
    { text: 'Termos de Uso ', onPress: onPressUseTerms },
    { text: 'e ' },
    { text: 'Política de Privacidade', onPress: onPressPrivacyPolicy }
]
...
<ATLCheckbox
    value={valueCheckbox}
    texts={useTermsText}
    onChange={onPressCheckbox}
/>

Props

• value
• onChange
• texts
• complementary
• horizontalMargin
• horizontalPadding
• verticalMargin
• buttonToggleBaseProps
• linkLabelBaseProps
• regularLabelBaseProps

---

value

Valor da checkbox que corresponde a ela estar tickada (true) ou não (false)

Tipo	Obrigatório
boolean	Não

---

onChange

Handler que será chamado quando o usuário mudar o valor da checkbox.

Tipo	Obrigatório
function	Não

---

texts

Texto que aparece ao lado do ícone de checkbox.

Esses textos são passados em um array de objetos do tipo CheckboxText. Um objeto deste tipo possui duas propriedades: text (obrigatória) e onPress (opcional).

Caso a propriedade onPress seja passada, o texto será renderizado como um link. Caso contrário, como um texto comum.

Tipo	Obrigatório
CheckboxText[]	Não

---

complementary

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

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	SpacingInputMarginHorizontal	24

---

horizontalPadding

Essa propriedade deve ser modificada caso seja necessário alterar o espaçamento entre o ícone da checkbox e o texto.

Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.

Prop	Token	Default Value
horizontalPadding	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

---

buttonToggleBaseProps

Caso seja necessário mudar alguma propriedade base do botão da checkbox, é possível através da modificação das buttonToggleBaseProps.

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
size	(fixed)	24
tintColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLButtonToggle.

---

linkLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label relativo ao link, é possível através da modificação das linkLabelBaseProps.

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

Props	Token	Default Value
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeButton	12
fontWeight	FontWeightStrong	Bold (700)
lineHeight	LineHeightBase	20
opacity	(fixed)	1
textAlign	TextAlignmentBody	Left
textCase	TextCaseButton	uppercase
textColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLLabelBase.

---

regularLabelBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label relativo aos textos comuns, é possível através da modificação das regularLabelBaseProps.

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

Props	Token	Default Value
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeBody	14
fontWeight	FontWeightNormal	Regular (400)
lineHeight	LineHeightBase	20
opacity	(fixed)	1
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorDarkNeutral	#212121

Para mais informações, acesse ATLLabelBase.