PC & Mobile

La vraie beauté de Material-UI – Meilleure programmation

La vraie beauté de Material-UI - Meilleure programmation


Quand nous avons mis xs = {12} dans la grille intérieure, il est dicté que, lorsque la taille de l'écran est très petite, il convient de définir l'élément sur 12 colonnes (* élément: notre carte conservée à l'intérieur, donc affectée par notre grille interne).

12 est la valeur par défaut dans notre conception de grille, car elle conserve le maximum de flexibilité par rapport à tout nombre possible inférieur à 12. (Consultez la grille CSS et la Flexbox pour en savoir plus sur les colonnes de la grille.)

Ralentissons un instant et traitons-le. Si notre largeur de grille max est de 12 colonnes, alors en définissant xs sur 12, qui définit l'élément de grille chaque fois que la taille de l'écran devient «extra-petit» pour s'étendre sur les 12 colonnes, ne renvoie donc qu'un seul élément.

tiré de Material-UI Open Source

Poursuivant dans cette direction, si nous fixons md = {4} (Maryland: taille d’écran moyenne) applique la condition selon laquelle, lorsque la taille du navigateur est moyenne, configurer notre élément pour s’étendre sur 4 colonnes.

La grille fournit ensuite un calcul et nous retourne 3 cartes qui s'étalent en réponse sur 12 colonnes maximum.

Voici un exemple de la beauté fonctionnelle de Material-UI. Avec juste un peu de configuration et grâce à une simple expression et un simple calcul, Material-UI rend nos cartes plus réactives avec un design interne de qualité.

Bon produit. Maintenant que nous en avons terminé, buvons un peu plus de café et revenons à notre application pour finir.

Retour dans le App.js fichier, intégrons toutes les données de l’API, y compris les images, les courriels et les noms, Carte composant que nous allons maintenant créer, importer et titre PplCard.

le App.js Le fichier (à partir de l'instruction return) devrait maintenant ressembler à ceci:

revenir (

LA VRAIE BEAUTÉ DE L’UI MATÉRIELLE

<Espacement des conteneurs dans la grille = {10}style = {{padding: '24px'}}>{users.map (users =><Grid key = {users.id} itemxs = {12} sm = {6} md = {4} lg = {4} xl = {3}><PplCardclé = {utilisateurs.id} email = {utilisateurs.email} prénom = {utilisateurs.first_name}nom = {users.last_name} avatar = {users.avatar}/> )}
) }
exportation par défaut App;
  • Notez que nous pouvons voir quels noms de données de propriété nous pouvons extraire spécifiquement, dans la documentation de notre hôte API.

Ensuite, dans le PplCard.js déposer, copier et coller le Composant de carte multimédia de la documentation du site Web de Material-UI.

Allez-y et renommez la fonction Carte multimédia à PplCard. Après cela, ajoutez les accessoires et la déstructure à PplCard recevoir les données utilisateur et propager nos cartes responsive.

Personnalisez les cartes en remplaçant d’abord l’image multimédia par nos données d’avatar récupérées, ainsi que le contenu par des noms d’utilisateur et des courriels. Notre carte Material-UI mise à jour devrait donc ressembler à ceci:

le PplCard.js Le fichier devrait maintenant ressembler à ceci:

import Réagir de ‘réagir’;importer {makeStyles} à partir de «@ material-ui / core / styles»;importer une carte à partir de «@ material-ui / core / Card»;importer CardActionArea à partir de «@ material-ui / core / CardActionArea»;importer CardActions à partir de «@ material-ui / core / CardActions»;importer CardContent à partir de «@ material-ui / core / CardContent»;importer CardMedia à partir de «@ material-ui / core / CardMedia»;bouton Import de ‘@ material-ui / core / Button’;importer une typographie à partir de «@ material-ui / core / Typography»;const useStyles = makeStyles ({carte: {maxWidth: 345,},support: {hauteur: 140,},});fonction d'exportation par défaut PplCard ({email, prénom, nom, avatar}) {const classes = useStyles ();revenir (  <CardMedia className = {classes.media}image = {avatar} /> {prénom + ““ + nom}{email}      ) }

Et voilà!

Impressionnant. Nous avons donc maintenant une disposition d'image de carte personnalisée et moderne. Nous pouvons non seulement afficher nos données avec un codage intuitif et à jour, mais nous pouvons le faire avec style!

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer