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

Saiba mais sobre bordas

Cores

• background
• borderColor

Saiba mais sobre cores

Direções e alinhamentos

• direction
• align
• justify

Saiba mais sobre direções e alinhamentos

Espaçamentos

• inset
• squish

Saiba mais sobre espaçamentos

Opacidade

• semiopaque
• intense
• medium
• light
• transparent

Saiba mais sobre opacidade

visibilidade

• hidden
• visible

Saiba mais sobre visibilidade

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>