# Etude des composants Ionic: cas du composant "ion-card"
**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
```xml
Card Title
Card Subtitle
Here's a small text description for the card content. Nothing more, nothing less.
```
* **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
```xml
Card Title
Card Subtitle
Here's a small text description for the card content. Nothing more, nothing less.
```
* **Création d'un composant** `ion-card` **avec des boutons**
```xml
Card Title
Card Subtitle
Here's a small text description for the card content. Nothing more, nothing less.
Action 1
Action 2
```
* **Création d'un composant** `ion-card` **avec des listes**
```xml
Card Title
Card Subtitle
Item
Item
Item
Item
```
* **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](https://ionicframework.com/docs/api/card)