Materiale de design Lite Carduri

Cardurile devin rapid un tip de "IO", în special pe web mobil. Acest lucru este, în parte, datorită site-urilor de internet mainstream, cum ar fi Pinterest, Twitter și Google Now, care oferă cărți în număr mare. Pe Tuts + veți găsi, de asemenea, cursuri și cele mai recente postări din rețea în prima pagină utilizând modelul de card.

Tuts + utilizează cardurile pentru a afișa o listă de cursuri pe prima pagină

În acest tutorial, vom examina componenta de carduri în Material Design Lite (MDL). Conform specificației Material Design, o carte este:

"O bucată de hârtie cu date unice asociate, care servește drept punct de intrare la informații mai detaliate.

O carte poate conține text, o imagine, o combinație a celor două și poate include și alte componente MDL. În contextul webului, folosim, în general, o interfață de carte pentru a afișa liste de postări pe blog, știri, videoclipuri, produse și așa mai departe.

Ca întotdeauna în această serie, înainte de a putea implementa ceva, trebuie să încărăm bibliotecile MDL - foile de stil și JavaScript-ul în cap a unui document HTML.

   

Odată ce avem aceste fișiere în loc, putem începe să construim cărțile.

Merge!

Pentru a crea un card, începem cu div cu mdl-card clasa, apoi mdl-umbra - 2DP de clasă pentru a aplica umbre de picătură pe card. Schimba mdl-umbra - 2DP numărul de clasă la 3, 4, 6, 8 sau 16 pentru a mări adâncimea umbrei și a răspândi după cum este necesar.

Încă, lățimea cardului este nedefinită. Putem seta lățimea fiecăruia prin CSS sau să o aplicăm împreună cu componenta grilei MDL. Aș face ca cardul nostru demo să fie receptiv și puternic integrat în ecosistemul MDL, așa că vom opta pentru acesta din urmă. Am înfășurat mdl-card cu un container de rețea și setați cartela în sine ca celula sau coloana rețelei.

Conținutul cardului

Acum trebuie să determinăm conținutul. Să presupunem că vrem să folosim cardul pentru a afișa un post pe blog. În mod tradițional, aceasta poate consta în imaginea post prezentată, titlul postului, fragmentul și un buton tipic "Citește mai mult", care indică întregul conținut.

Vom începe cu titlul. Pentru a adăuga unul, creați un spațiu gol div cu mdl-card__titleclasă.

Adăugați o poziție în cadrul div și aplicați mdl-card__title text clasă; în funcție de structura paginii dvs. și de nivelul de conținut al cardului, puteți adăuga un h1 la h6.

Învățarea Web Design

Să adăugăm acum extrasul de post - rezumatul conținutului mesajului. Pentru asta, noi creăm un altul div sub containerul de titlu și aplicați mdl-card__supporting text clasă. Apoi, împachetați extrasul cu un element de paragraf și adăugați-l în cadrul div.

Învățarea Web Design

Lorem ipsum dolor stați amet, consectetur adipisicing elit. Aliquam acusamus, consectetur.

Pentru imaginea post prezentată, trebuie să creați un alt element care să conțină (vom merge pentru o figura) deasupra containerului de titlu, cu mdl-card__media clasă. elementele figurace au o anumită marjă setată implicit, deci hai să ignorăm manual acest lucru, așa cum este cazul:

.mdl-card__media margine: 0; 

În cele din urmă, adăugați o imagine.

... 

Învățarea Web Design

Lorem ipsum dolor stați amet, consectetur adipisicing elit. Aliquam acusamus, consectetur.

...

În mod prestabilit, MDL nu redimensionează imaginea din containerul media de pe card. Pe măsură ce este redimensionată, lățimea imaginii și înălțimea sunt persistente. Containerul media este setat să ascundă imaginea care se deplasează.

În cele din urmă, imaginea este disproporționat de înaltă, ceea ce nu face ca cardul să arate grozav.

Cardul este prea înalt :(

Dacă vrem ca imaginea să fie redimensionată, urmând containerul, păstrând în același timp raportul său, va trebui să adăugăm câteva stiluri, setând imaginea lățimea maximă la 100%.

.mdl-card__media> img max-lățime: 100%;  

Acțiunea Cardului

În mod ideal, o carte ar trebui să conțină o acțiune referitoare la conținutul cărții. În cazul în care cardul este un tweet, de exemplu, acesta poate avea a retweet și a Urma buton. Deoarece cartea noastră este utilizată pentru a afișa un post pe blog, vom adăuga o Citeste mai mult butonul care indică întregul conținut al postului, împreună cu câteva butoane ca și împărtășiți postul. Adăugăm aceste butoane de acțiune sub extrasul mesajului, înfășurat într-un nou div cu MoL-card__actions.

... 

Învățarea Web Design

Lorem ipsum dolor stați amet, consectetur adipisicing elit. Aliquam acusamus, consectetur.

...

Notă: MDL nu vine cu stiluri predefinite care acoperă acest scenariu în care avem trei butoane din containerul de acțiune al cardului. Așadar, trebuie să adăugăm încă câteva stiluri pentru a alinia corect aceste butoane.

.mdl-card__actions display: flex; box-dimensionare: de frontieră-box; aliniere: centru;  .mdl-card__actions> .mdl -button - icon margin-right: 3px; margin-stânga: 3px;  

Acum adăugați câteva cărți pentru a crea o listă de postări:

Înfășurarea în sus

Afișarea mai multor postări de blog este una dintre cele mai populare implementări ale interfeței de pe site-uri web. Spunând că, componenta cardului poate fi adaptată pentru a afișa orice tip de conținut, chiar și o singură imagine, un widget calendar sau poate informații despre vreme.

Alte exemple ale componentei cardului cu MDL

Cu toate acestea, clasele standard din specificația componentei nu includ toate stilurile pentru scenariile respective. Fiți pregătiți să adăugați nume de clasă personalizate și câteva reguli suplimentare de stil pentru a personaliza aspectul cardului după nevoile dvs. Să vedem în comentariile pe care le obțineți!