Le carte stanno rapidamente diventando un pattern dell'interfaccia utente "goto", in particolare sul Web mobile. Questo è, in parte, grazie ai siti web tradizionali, come Pinterest, Twitter e Google Now che presentano le carte in modo pesante. Su Tuts + troverai anche i corsi e gli ultimi messaggi sulla rete in prima pagina usando il modello di scheda.
Tuts + usa le carte per visualizzare un elenco di corsi in prima pagina
In questo tutorial, esamineremo il componente delle schede in Material Design Lite (MDL). In base alle specifiche del Material Design, una carta è:
"Un pezzo di carta con dati relativi unici, che funge da punto di accesso a informazioni più dettagliate.
Una carta può contenere testo, un'immagine, una combinazione di entrambi e può anche includere altri componenti MDL. Nel contesto del Web, generalmente utilizziamo un'interfaccia per schede per visualizzare elenchi di post di blog, notizie, video, prodotti e così via.
Come sempre in questa serie, prima di poter implementare qualsiasi cosa, è necessario caricare le librerie MDL, i fogli di stile e il codice JavaScript, nel capo di un documento HTML.
Una volta installati questi file, possiamo iniziare a costruire le carte.
Partire!
Per creare una carta, iniziamo con a div con il MDL-card classe, poi il MDL-shadow - 2DP classe per applicare le ombre sulla carta. Cambiare il MDL-shadow - 2DP numero di classe a 3, 4, 6, 8 o 16 per aumentare la profondità dell'ombra e distribuire secondo necessità.
Al momento, la larghezza della carta non è definita. Possiamo impostare noi stessi la larghezza tramite CSS o applicarla in combinazione con il componente della griglia MDL. Vorrei che la nostra demo card fosse reattiva e strettamente integrata con l'ecosistema MDL, quindi opteremo per quest'ultimo. Abbiamo avvolto il MDL-card con un contenitore della griglia e imposta la carta stessa come cella o colonna della griglia.
Contenuto della carta
Ora dobbiamo determinare il contenuto. Supponiamo di voler utilizzare la scheda per visualizzare un post sul blog. Tradizionalmente, questo potrebbe consistere nell'immagine post-presentazione, nel titolo del post, nell'estratto e in un tipico pulsante "Leggi di più" che punta all'intero contenuto.
Inizieremo con il titolo. Per aggiungerne uno, crea un vuoto div con il MDL-card__titleclasse.
Aggiungi un'intestazione all'interno del div e applicare il MDL-card__title-text classe; a seconda della struttura della pagina e del livello di contenuto della carta, è possibile aggiungere un h1 a h6.
Apprendimento Web Design
Aggiungiamo ora il post estratto: il riassunto del contenuto del post. Per questo, ne creiamo un altro div sotto il contenitore del titolo e applicare il MDL-card__supporting-text classe. Quindi, avvolgere l'estratto con un elemento di paragrafo e aggiungerlo all'interno del div.
Apprendimento Web Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.
Per l'immagine post in evidenza, abbiamo bisogno di creare un altro elemento contenente (andremo per un figura) sopra il contenitore del titolo, con il MDL-card__media classe. gli elementi figure hanno impostato un margine per impostazione predefinita, quindi eseguiamo l'override manualmente, in questo modo:
.mdl-card__media margin: 0;
Infine, aggiungi un'immagine.
...
Apprendimento Web Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.
...
Per impostazione predefinita, MDL non ridimensiona l'immagine all'interno del contenitore del supporto della scheda. Quando la scheda viene ridimensionata, la larghezza dell'immagine e l'altezza sono persistenti. Il contenitore multimediale è impostato per nascondere l'immagine traboccante.
Infine, l'immagine è sproporzionatamente alta, il che non rende la carta un bell'aspetto.
La carta è troppo alta :(
Se vogliamo ridimensionare l'immagine, seguendo il contenitore, mantenendo il suo rapporto, dovremo aggiungere alcuni stili, impostando l'immagine larghezza massima a 100%.
.mdl-card__media> img larghezza massima: 100%;
L'azione della carta
Una carta dovrebbe idealmente contenere un'azione relativa al contenuto della carta. Ad esempio, se la carta è un tweet, potrebbe avere a Retweet e a Seguire pulsante. Poiché la nostra carta è utilizzata per visualizzare un post sul blog, aggiungeremo un Leggi di più pulsante che punta al contenuto completo del post, insieme a un paio di pulsanti per piace e condividi il post. Aggiungiamo questi pulsanti di azione sotto l'estratto del post, racchiuso in un nuovo div con il MDL-card__actions.
...
Apprendimento Web Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.
Nota: MDL non viene fornito con stili predefiniti che coprono questo scenario in cui abbiamo tre pulsanti nel contenitore azione Card. Quindi abbiamo bisogno di aggiungere alcuni altri stili per allineare correttamente questi pulsanti.
Ora aggiungi alcune altre carte per creare un elenco di post:
Avvolgendo
La visualizzazione di più post del blog è una delle implementazioni più popolari dell'interfaccia della carta sui siti web. Detto questo, il componente della carta può essere effettivamente adattato per visualizzare qualsiasi tipo di contenuto, anche una singola immagine, un widget di calendario o forse informazioni meteorologiche.
Alcuni altri esempi del componente della scheda di MDL
Tuttavia, le classi standard nelle specifiche del componente non includono tutti gli stili per tali scenari specifici. Preparati ad aggiungere nomi di classi personalizzati e alcune regole di stile extra per personalizzare l'aspetto della carta secondo le tue esigenze. Vediamo nei commenti cosa ottieni!
Share
Tuts + usa le carte per visualizzare un elenco di corsi in prima pagina
La carta è troppo alta :(
Alcuni altri esempi del componente della scheda di MDL
Accentsconagua
