Composant imbriqué

Créer un composant n’est pas toujours une finalité en soi. Il est possible d’intégrer un composant dans un autre facilement, juste en utilisant la balise de ce dernier.

1. Création d’un loader

Par exemple, si nous souhaitons réaliser un composant chargé d’afficher un texte, une image ou une animation pour faire patienter l’utilisateur (on appelle cela un loader) pendant le chargement de données, nous pouvons procéder de la sorte :

  • création d’un composant appelé Loader

  • ajout de son fichier CSS personnalisé.

En utilisant ce que nous savons et en récupérant le code CSS et HTML sur un site dédié aux loaders (par exemple https://loading.io/css), nous pouvons créer notre propre composant Loader réutilisable. Pour que ce composant soit directement utilisable dans la totalité de l’application, nous pouvons le placer dans le dossier Shared de notre projet. Ainsi, lorsque nous avons besoin d’un chargement, il nous suffit d’utiliser ce composant :

@if (Loading) 
{ 
    <Loader></Loader> 
} 
else 
{ 
... 
} 

Attention, les loaders présents sur le site précédemment mentionné sont blancs, et donc non visibles sur fond blanc. Il y a deux solutions afin de les rendre visibles : appliquer un fond de couleur différente sur la page ou appliquer un background...

Pour consulter la suite, découvrez le livre suivant :
couv_EIBLAZ.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
JavaScript et CSS
Suivant
Communication HTTP