Ionic se distingue comme un outil puissant pour le développement d'applications mobiles multiplateformes, et en son cœur se trouve un ensemble diversifié de composants conçus pour simplifier le développement de l'interface utilisateur. Parmi ceux-ci, le composant ion-card apparaît comme un élément polyvalent et largement utilisé qui joue un rôle central dans la présentation de divers types de contenu au sein des applications Ionic.

Qu'est-ce que ion-card ?

ion-card est un composant d'interface utilisateur conçu pour structurer et présenter l'information de manière claire et esthétique. Elle sert essentiellement de conteneur flexible pour l'affichage de divers contenus, allant du texte aux images, en passant par les listes et bien plus encore.

ion-card peut être un composant unique, mais elle est souvent constituée d'un en-tête, d'un titre, d'un sous-titre et d'un contenu. Pour tenir compte de cette structure, les cartes sont divisées en plusieurs composants : ion-card-header, ion-card-title, ion-card-subtitle et ion-card-content.

Réputée pour sa simplicité et son adaptabilité, le composant ion-card est devenu un choix incontournable pour les développeurs Ionic qui cherchent à créer des interfaces utilisateur visuellement attrayantes et fonctionnelles.

Comment l'utiliser et le personnaliser ?

Le composant ion-card est subdivisé en plusieurs éléments : l'en-tête de la carte, le titre de la carte, le sous-titre de la carte et le contenu de la carte.

• Création d'un composant ion-card basique

  Présentons les différents sous-sections du composant ion-card

  • ion-card-header

    L'en-tête de la carte est un composant enfant de la carte qui doit être placé avant le contenu de la carte. Il peut contenir un titre et un sous-titre de carte.

    Il prend en charge les propriétés ci-après : color, mode et translucent

  • ion-card-title et ion-card-subtitle

    Le titre et le sous-titre de la carte sont des composants enfants de la carte qui doit être placé à l'intérieur de l'en-tête de la carte. Ils prennent en charge les propriétés color et mode

  • ion-card-content

    Le contenu de la carte est un composant enfant de la carte qui ajoute un rembourrage autour de son contenu. Il est recommandé de placer le texte d'une carte à l'intérieur du contenu de la carte. Il prend uniquement la propriété mode en charge

      <ion-card>
        <ion-card-header>
          <ion-card-title>Card Title</ion-card-title>
          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
        </ion-card-header>
    
        <ion-card-content>
          Here's a small text description for the card content. Nothing more, nothing less.
        </ion-card-content>
      </ion-card>
    

• Création d'un composant ion-card avec une image

  Le composant ion-card peut contenir une image d'en-tete comme s'est illustré ci-dessous

    <ion-card>
      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
      <ion-card-header>
        <ion-card-title>Card Title</ion-card-title>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      </ion-card-header>
  
      <ion-card-content>
        Here's a small text description for the card content. Nothing more, nothing less.
      </ion-card-content>
    </ion-card>
  

• Création d'un composant ion-card avec des boutons

    <ion-card>
      <ion-card-header>
        <ion-card-title>Card Title</ion-card-title>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      </ion-card-header>
  
      <ion-card-content>
        Here's a small text description for the card content. Nothing more, nothing less.
      </ion-card-content>
  
      <ion-button fill="clear">Action 1</ion-button>
      <ion-button fill="clear">Action 2</ion-button>
    </ion-card>
  

• Création d'un composant ion-card avec des listes

    <ion-card>
      <ion-card-header>
        <ion-card-title>Card Title</ion-card-title>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
          <ion-item>
            <ion-thumbnail slot="start">
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </ion-thumbnail>
            <ion-label>Item</ion-label>
          </ion-item>
  
          <ion-item>
            <ion-thumbnail slot="start">
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </ion-thumbnail>
            <ion-label>Item</ion-label>
          </ion-item>
  
          <ion-item>
            <ion-thumbnail slot="start">
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </ion-thumbnail>
            <ion-label>Item</ion-label>
          </ion-item>
  
          <ion-item lines="none">
            <ion-thumbnail slot="start">
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </ion-thumbnail>
            <ion-label>Item</ion-label>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  

• Présentation des diverses propriétés du composant ion-card

  Le composant ion-card prend en charge plusieurs propriétés qui nous permettrons d'apporter des caractéristiques spécifiques personnalisées à notre composant.

  • button

    Cette propriété est de type booléen et permettra de spécifier l'affichage ou non de boutons. Si true, une étiquette de bouton sera affichée et la carte pourra être touchée.

  • color

    Cette propriété est utilisée pour spécifier la couleur d'arrière-plan de la carte. Les couleurs par défaut à utiliser dans la palette de couleurs de votre application sont les suivantes : "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", et "dark"

  • disabled

    Cette propriété est de type booléen et permet désactiver ou pas le bouton. Si sa valeur est égale à true, l'utilisateur ne peut pas interagir avec la carte.

  • mode

    Cette propriété permet de déterminer le rendu de la carte suivant la plateforme à utiliser. Il peut être de type md ou ios.

    Pour rappel, le rendu des composants en général, diffère suivant la plateforme Android ou iOS. Par défaut, lors que le mode n'est pas précisé, Ionic s'en charge automatiquement afin de faire correspondre le rendu suivant la plateforme cible. Toutefois, nous pouvons aussi décider de fixer le mode d'affichage en agissant sur la propriété mode .

    Nous venons ci-dessus d'évoquer quelques propriétés les plus utilisées. On peut aussi ajouter à ces derniers : rel, target, type, download, href, routerDirection, routerAnimation .

• Personnalisation de styles du composant ion-card

  Le composant ion-card est livré avec une variété de propriétés CSS que vous pouvez personnaliser pour adapter l'apparence de la carte à vos préférences en matière de design. Vous trouverez ci-dessous, les propriétés CSS personnalisées les plus couramment utilisées :

  • --background : qui permet de spécifier la couleur de l'arrière-plan de la carte

  • --color : qui permet de spécifier la couleur de la carte

En résumé, le composant ion-card est un élément essentiel dans l'arsenal d'un développeur Ionic. Il offre une solution élégante et efficace pour présenter des informations de manière structurée dans les applications mobiles hybrides. Grâce à sa flexibilité et à ses fonctionnalités riches, le composant ion-card contribue à améliorer l'esthétique et la convivialité des applications Ionic, offrant ainsi une expérience utilisateur optimale. Que ce soit pour afficher des articles, des produits, des profils d'utilisateurs, ou d'autres types de contenus, le ion-card demeure un choix incontournable pour les développeurs cherchant à créer des interfaces modernes et attractives.

Pour plus d'informations :

👉 Ion-card