Les cartes deviennent rapidement un modèle d'interface utilisateur «goto», en particulier sur le Web mobile. Ceci est dû en partie aux sites Web traditionnels tels que Pinterest, Twitter et Google Now, qui proposent beaucoup de cartes. Sur Tuts +, vous trouverez également les cours et les dernières publications du réseau sur la page d'accueil à l'aide du modèle de carte..

Tuts + utilise des cartes pour afficher une liste de parcours en première page

Dans ce didacticiel, nous allons examiner le composant cartes dans Material Design Lite (MDL). Selon la spécification Material Design, une carte est:

«Un morceau de papier avec des données uniques, qui sert de point d’entrée pour des informations plus détaillées.

Une carte peut contenir du texte, une image, une combinaison des deux et peut également inclure d'autres composants MDL. Dans le contexte du Web, nous utilisons généralement une interface de carte pour afficher des listes de billets de blog, actualités, vidéos, produits, etc..

Comme toujours dans cette série, avant de pouvoir implémenter quoi que ce soit, nous devons charger les bibliothèques MDL - les feuilles de style et le JavaScript - dans le répertoire. tête d'un document HTML.

Une fois ces fichiers en place, nous pouvons commencer à créer les cartes..

Aller!

Pour créer une carte, nous commençons par un div avec le carte mdl classe, puis le mdl-shadow - 2dp classe à appliquer des ombres portées à la carte. Changer la mdl-shadow - 2dp numéro de classe à 3, 4, 6, 8 ou 16 pour augmenter la profondeur de l'ombre et l'étendre au besoin.

Pour l'instant, la largeur de la carte n'est pas définie. Nous pouvons définir la largeur via CSS nous-mêmes ou l'appliquer conjointement avec le composant de grille MDL. Je souhaiterais que notre carte de démonstration soit réactive et étroitement intégrée à l'écosystème MDL, nous allons donc opter pour ce dernier. Nous enveloppons le carte mdl avec un conteneur de grille et définissez la carte elle-même comme cellule ou colonne de grille.

Contenu de la carte

Nous devons maintenant déterminer le contenu. Supposons que nous souhaitons utiliser la carte pour afficher un article de blog. Traditionnellement, cela peut comprendre l’image en vedette, le titre, l’extrait et un bouton typique «Lire la suite» pointant vers le contenu complet..

Nous allons commencer par le titre. Pour en ajouter un, créez un vide div avec le mdl-card__titleclasse.

Ajouter une rubrique dans la div et appliquer le mdl-card__title-text classe; en fonction de la structure de votre page et du niveau de contenu de la carte, vous pouvez ajouter un h1 à h6.

 
 
 
Apprentissage Web Design
 
 
 

Ajoutons maintenant l'extrait de publication - le résumé du contenu de la publication. Pour cela, nous créons un autre div sous le conteneur du titre et appliquer le mdl-card__supporting-text classe. Enveloppez ensuite l’extrait avec un élément de paragraphe et ajoutez-le dans le champ div.

 
 
 
Apprentissage Web Design
 
 
 
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Aliquam accusamus, consectetur.
 
 
 

Pour l’image sélectionnée, nous devons créer un autre élément contenant (nous choisirons un élément figure) au-dessus du conteneur en titre, avec le mdl-card__media classe. les éléments de la figure ont une certaine marge définie par défaut, aussi allons-nous la remplacer manuellement, comme ceci:

.mdl-card__media margin: 0; 

Enfin, ajoutez une image.

… 
 
  
 
 
Apprentissage Web Design
 
 
 
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Aliquam accusamus, consectetur.
 
 
… 

Par défaut, MDL ne redimensionnera pas l'image dans le conteneur de supports de carte. Lorsque la carte est redimensionnée, la largeur et la hauteur de l'image sont persistantes. Le conteneur de média est configuré pour masquer l'image en débordement.

Enfin, la taille de l'image est disproportionnée, ce qui ne donne pas une belle apparence à la carte..

La carte est trop grande :(

Si nous voulons que l'image soit redimensionnée en suivant le conteneur tout en conservant son rapport, nous devrons ajouter quelques styles, en définissant l'image. largeur maximale à 100%.

.mdl-card__media> img largeur maximale: 100%;  

L'action carte

Une carte devrait idéalement contenir une action relative au contenu de la carte. Si la carte est un tweet, par exemple, elle peut avoir un Retweet et un Suivre bouton. Puisque notre carte est utilisée pour afficher un article de blog, nous ajouterons un Lire la suite bouton pointant vers le contenu complet du message, avec quelques boutons pour comme et partager le post. Nous ajoutons ces boutons d’action sous l’extrait de message, enveloppés dans une nouvelle div avec le mdl-card__actions.

… 
 
  
 
 
Apprentissage Web Design
 
 
 
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Aliquam accusamus, consectetur.
 
 
 Lire la suite 
 préféré partager 
 
… 

Remarque: MDL ne vient pas avec des styles prédéfinis qui couvrent ce scénario où nous avons trois boutons dans le conteneur d'action de carte. Nous devons donc ajouter quelques styles supplémentaires pour aligner correctement ces boutons..

.mdl-card__actions display: flex; taille de la boîte: boîte-frontière; align-items: centre;  .mdl-card__actions> .mdl-button - icône margin-right: 3px; marge gauche: 3px;  

Ajoutez maintenant quelques cartes supplémentaires pour créer une liste de publications:

Emballer

L'affichage de plusieurs articles de blog est l'une des implémentations les plus courantes de l'interface de carte sur les sites Web. Cela dit, le composant de carte peut en réalité être adapté pour afficher tout type de contenu, même une seule image, un widget de calendrier ou peut-être des informations météorologiques..

Quelques autres exemples du composant de carte par MDL

Toutefois, les classes standard de la spécification de composant n'incluent pas tous les styles pour ces scénarios spécifiques. Préparez-vous à ajouter des noms de classe personnalisés et des règles de style supplémentaires pour personnaliser l'apparence de la carte selon vos besoins. Laissez-nous voir dans les commentaires ce que vous réalisez!