Ionic - Cartes

Étant donné que les appareils mobiles ont une taille d'écran plus petite, les cartes sont l'un des meilleurs éléments pour afficher des informations conviviales. Dans le chapitre précédent, nous avons expliqué comment insérer des listes. Les cartes sont très similaires aux listes en incrustation, mais elles offrent une ombre supplémentaire qui peut influencer les performances des listes plus grandes.

Ajouter des cartes

Une carte par défaut peut être créée en ajoutant un cardclasse à votre élément. Les cartes sont généralement formées sous forme de listes avec leitemclasse. L'une des classes les plus utiles est laitem-text-wrap. Cela vous aidera lorsque vous avez trop de texte, vous voulez donc l'envelopper dans votre carte. La première carte de l'exemple suivant n'a pas leitem-text-wrap classe assignée, mais la seconde l'utilise.

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

Le code ci-dessus produira l'écran suivant -

En-tête et pied de page de la carte

Dans le chapitre précédent, nous avons déjà expliqué comment utiliser le item-dividerclasse pour regrouper les listes. Cette classe peut être très utile lorsque vous travaillez avec des cartes pour créer des en-têtes de carte. La même classe peut être utilisée pour les pieds de page comme indiqué dans le code suivant -

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

Le code ci-dessus produira l'écran suivant -

Carte complète

Vous pouvez ajouter n'importe quel élément au-dessus de votre carte. Dans l'exemple suivant, nous allons vous montrer comment utiliser lefull-image classe avec le item-body pour obtenir une belle image fenêtrée à l'intérieur de votre carte.

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

Le code ci-dessus produira l'écran suivant -