FlatCard

Utilizado para a descrição de preços dos produtos.

Exemplo

Modifique esse componente em tempo real pelo Storybook clique aqui

Utilização

<FlatCard
onClick={() => console.log('FlatCard')}
size={'large'}
price={100000}
conditionPayment="em até 12x parcelas"
paymentshape="Jeitto"
/>

Propriedades

size

• Type: String
• Opcional

Define o tipo de FlatCard a ser utilizado.

Valores aceitos

• size="lare"
• size="small"

FlatCard Large

price

• Type: Number
• Opcional
• Suporta BBCode

Descrição do preço do produto.

priceProps

• Type: Object
• Opcional

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

• Type: String
• Opcional
• Suporta BBCode

Descrição da condição de pagamento.

conditionPaymentProps

• Type: Object
• Opcional

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

• Type: String
• Opcional
• Suporta BBCode

Descrição da forma de pagamento.

paymentShapeProps

• Type: Object
• Opcional

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

• Type: String
• Opcional
• Suporta BBCode

Descrição do botão que carrega a função de click da prop onClick.

buttonProps

• Type: Object
• Opcional

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

• Type: Boolean
• Opcional

Bloqueia o usuário de interagir com o FlatCard.

onClick

• Type: Function
• Opcional

Recebe uma função para ser executada em um evento de toque sobre o texto descrito na prop button.

FlatCard Small

price

• Type: String
• Opcional
• Suporta BBCode

Descrição do preço do produto.

priceProps

• Type: Object
• Opcional

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

• Type: String
• Opcional
• Suporta BBCode

Descrição da condição de pagamento.

conditionPaymentProps

• Type: Object
• Opcional

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

• Type: String
• Opcional
• Suporta BBCode

Descrição do juros pagamento.

rateProps

• Type: Object
• Opcional

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

• Type: Boolean
• Opcional

Bloqueia o usuário de interagir com o FlatCard.

onClick

• Type: Function
• Opcional

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

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>