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