Card

Card é um componente que contêm um conteúdo e ações sobre um determinado assunto.

Exemplo

Utilização

<Card
showArrow
disabled
icon={require('../assets/images/icon_ame.svg')}
title="Título do Card"
truncate={2}
/>

Title

Texto que será exibido no título do card.

TitleProps

Propriedades de estilo do título, você atribui um objeto com o estilo que será utilizado dentro do título somente.

Exemplo:

<Card
  title='Um título'
  titleProps={{ fontSize: 'md', color: 'neutralcolor-dark' }}
/>

Description

Texto que será exibido na descrição do card.

DescriptionProps

Propriedades de estilo do título, você atribui um objeto com o estilo que será utilizado dentro do título somente.

Exemplo:

<Card
  title='Um título'
  description='Uma descrição'
  descriptionProps={{ fontSize: 'md', color: 'neutralcolor-dark' }}
/>

Hint

Texto que será exibido na linha de detalhamento superior do card.

HintProps

Propriedades de estilo do hint, você atribui um objeto com o estilo que será utilizado dentro do hint somente.

Exemplo:

<Card
  title='Um título'
  hint='Um detalhe importante'
  hintProps={{ fontSize: 'md', color: 'neutralcolor-dark' }}
/>

ShowArrow

Se o ícone de seta do Card irá ser exibido ou não.

Icon

Endereço HTTPS da imagem do ícone ou endereço da iamgem ícone local usando require.

Image

Endereço HTTPS da imagem ou endereço da imagem local usando require.

OnClick

Recebe uma função para ser executada em um evento de toque sobre o Card.

Disabled

Bloqueia o usuário de interagir com o Card.

Truncate

Com o truncate é possível selecionar a quantidade de linhas do texto desejada no description. Se o texto for de um tamanho que utilize linhas a mais, será cortado e acrescentado '...' ao final da linha. O valor deve ser passado em tipo number. Caso o truncate não seja atribuído, não haverá limitação de linha.

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 Card acima foi representado pelo código abaixo

<Window>
  <Card
    image={require('../assets/images/logo_phone.png')}
    title={'Título do Card'}
    description={'Informação complementar do card'}
  />
</Window>