Ionic - Cartões
Como os dispositivos móveis têm tela menor, os cartões são um dos melhores elementos para exibir informações que serão fáceis de usar. No capítulo anterior, discutimos como inserir listas. Os cartões são muito semelhantes às listas inseridas, mas oferecem algumas sombras adicionais que podem influenciar o desempenho de listas maiores.
Adicionando Cartões
Um cartão padrão pode ser criado adicionando um cardclasse para o seu elemento. Os cartões são geralmente formados como listas com oitemclasse. Uma das classes mais úteis é aitem-text-wrap. Isso ajudará quando você tiver muito texto e quiser embrulhá-lo dentro do cartão. O primeiro cartão no exemplo a seguir não tem oitem-text-wrap classe atribuída, mas o segundo está usando.
<div class = "card">
<div class = "item">
This is a Ionic card without item-text-wrap class.
</div>
<div class = "item item-text-wrap">
This is a Ionic card with item-text-wrap class.
</div>
</div>
O código acima irá produzir a seguinte tela -
Cabeçalho e rodapé do cartão
No capítulo anterior, já discutimos como usar o item-dividerclasse para agrupar listas. Esta classe pode ser muito útil ao trabalhar com cartões para criar cabeçalhos de cartão. A mesma classe pode ser usada para rodapés, conforme mostrado no código a seguir -
<div class = "card list">
<div class = "item item-divider">
Card header
</div>
<div class = "item item-text-wrap">
Card text...
</div>
<div class = "item item-divider">
Card Footer
</div>
</div>
O código acima irá produzir a seguinte tela -
Cartão Completo
Você pode adicionar qualquer elemento na parte superior do seu cartão. No exemplo a seguir, mostraremos como usar ofull-image aula junto com o item-body para obter uma imagem em janela de boa aparência dentro do cartão.
<div class = "card">
<div class = "item item-avatar">
<img src = "my-image.png">
<h2>Card Name</h2>
</div>
<div class = "item item-body">
<img class = "full-image" src = "my-image.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget
pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci.
Nam tristique elit massa, quis faucibus augue finibus ac.
</div>
</div>
O código acima irá produzir a seguinte tela -