FlatCard
Utilizado para a descrição de preços dos produtos.
Exemplo
Utilização
<FlatCard
onClick={() => console.log('FlatCard')}
size={'large'}
price={100000}
conditionPayment="em até 12x parcelas"
paymentshape="Jeitto"
/>
Propriedades
Size
Define o tipo de FlatCard a ser utilizado.
Valores aceitos
size="lare"
size="small"
FlatCard Large
Price
Descrição do preço do produto.
PriceProps
Propriedades de descrição do preço, você atribui um objeto com o estilo que será utilizado dentro do título somente.
Exemplo:
<FlatCard priceProps={{fontSize: "xxs", color:"amecolor-primary-medium", fontWeigth:"bold"}}
/>
ConditionPayment
Descrição da condição de pagamento.
ConditionPaymentProps
Propriedades de descrição do condição de pagamento, você atribui um objeto com o estilo que será utilizado dentro do título somente.
Exemplo:
<FlatCard conditionPaymentProps={{fontSize: "nano", color:"neutralcolor-darkest"}}
/>
PaymentShape
Descrição da forma de pagamento.
PaymentShapeProps
Propriedades de descrição do forma de pagamento, você atribui um objeto com o estilo que será utilizado dentro do título somente.
Exemplo:
<FlatCard paymentshapeProps={{fontSize: "nano", color:"neutralcolor-darkest", , fontWeigth:"bold"}}
/>
Button
Descrição do botão.
ButtonProps
Propriedades de descrição do botão, você atribui um objeto com o estilo que será utilizado dentro do título somente.
Exemplo:
<FlatCard buttonProps={{fontSize: "nano", color:"amecolor-primary-medium", , fontWeigth:"bold"}}
/>
Disabled
Bloqueia o usuário de interagir com o FlatCard.
OnClick
Recebe uma função para ser executada em um evento de toque sobre o FlatCard.
FlatCard Small
Price
Descrição do preço do produto.
PriceProps
Propriedades de descrição do preço, você atribui um objeto com o estilo que será utilizado dentro do título somente.
Exemplo:
<FlatCard priceProps={{fontSize: "xxs", color:"amecolor-primary-medium", fontWeigth:"bold"}}
/>
ConditionPayment
Descrição da condição de pagamento.
ConditionPaymentProps
Propriedades de descrição do condição de pagamento, você atribui um objeto com o estilo que será utilizado dentro do título somente.
Exemplo:
<FlatCard conditionPaymentProps={{fontSize: "nano", color:"neutralcolor-darkest"}}
/>
Rate
Descrição do juros pagamento.
RateProps
Propriedades de descrição do juros, você atribui um objeto com o estilo que será utilizado dentro do título somente.
Exemplo:
<FlatCard rateProps={{fontSize: "nano", color:"neutralcolor-dark"}}
/>
Disabled
Bloqueia o usuário de interagir com o FlatCard.
OnClick
Recebe uma função para ser executada em um evento de toque sobre o FlatCard.
Propriedades Adicionais
Bordas
border
borderRadius
borderColor
Cores
background
borderColor
Direções e alinhamentos
direction
align
justify
Saiba mais sobre direções e alinhamentos
Espaçamentos
inset
squish
Opacidade
semiopaque
intense
medium
light
transparent
visibilidade
hidden
visible
Outros exemplos
O FlatCard acima foi representado pelo código abaixo
<View>
<FlatCard
size={'small'}
price={100000}
conditionPayment={'em até 12x parcelas'}
rate={'Juros: 4,8%'}
/>
</View>