Débuter avec ionic
Éléments de base d’un projet Ionic
Découverte des composants Ionic
Changer le thème de l’application
Encore plus de composants
Lancer l’application sur un smartphone Android
Utiliser les fonctionnalités natives du téléphone
Détails de la leçon
Description de la leçon
Dans cette leçon, nous abordons l'utilisation du composant IonCard afin d'afficher les détails d'une annonce sur notre application développée avec Ionic. Le IonCard est parfait pour structurer et mettre en forme les informations comme le titre, la date de publication, la catégorie et la description des annonces. Nous commençons par créer un IonCard dans le fichier détail-annonce.html. Nous y ajoutons ensuite un IonCardHeader qui contient le titre de l'annonce avec une balise IonCardTitle et sa date de publication avec une balise IonCardSubtitle utilisant le PipeDate pour le formatage.
Nous intégrons également l'image de l'annonce au début de la carte comme une balise IMG classique pour qu'elle soit chargée dès l'ouverture de la page. Pour terminer, nous ajoutons une catégorie dans le IonCardHeader et la description de l'annonce dans le IonCardContent. Cette méthodologie permet d'obtenir une mise en page claire et structurée dès le premier rendu. Dans la prochaine vidéo, nous améliorerons encore cette vue en ajoutant des informations supplémentaires sous forme de liste.
Objectifs de cette leçon
Comprendre l'utilisation du composant IonCard pour créer des pages de détail d'annonce dans Ionic
Prérequis pour cette leçon
Connaissance de base d'Ionic et des composants Angular
Métiers concernés
Développeurs mobile, développeurs front-end et professionnels du développement d'applications multiplateformes
Alternatives et ressources
D'autres composants pour afficher des cartes dans Ionic incluent IonItem et IonList
Questions & Réponses
IMG classique au-dessus du IonCardHeader.
Je m'abonne