Crea moduli con Material Design

Uno degli aspetti fondamentali in qualsiasi applicazione sono i moduli, poiché questi ci consentono di acquisire le informazioni dell'utente relative al modello di business gestito dalla nostra applicazione.

Design dei materiali Combinando le migliori pratiche del design classico e l'implementazione di effetti originali e innovativi, ci permettono di creare forme che non solo hanno un bell'aspetto, ma danno anche alla nostra applicazione una funzionalità aggiuntiva.

Vediamo allora come creare un modulo base utilizzando i principi di Design dei materiali.

RequisitiPrima di iniziare questo tutorial, ti consigliamo di dare un'occhiata all'introduzione di Material Design qui. Faremo affidamento sul framework chiamato Materialise ed è importante capire come funziona il contenitore della nostra applicazione.

Il contenitore Materialise

Il contenitore di materializzare funziona allo stesso modo BootstrapNel caso in cui abbiamo già toccato questo framework, non avremo problemi a capire come funziona, ma per chi non lo conoscesse, è principalmente un contenitore di 12 colonne, in cui possiamo dire ai nostri elementi quante colonne può coprire.

Ha una gerarchia abbastanza simile, ha una classe contenitore, seguita da una classe riga e infine le classi applicabili alle colonne, vediamo come sarebbe una struttura di una riga completa, seguita da una riga che conterrebbe due elementi.

Questo è un div . a 12 colonneQuesto è un div . a 6 colonneQuesto è un div . a 6 colonne

Il modo in cui lo vediamo è abbastanza semplice, dobbiamo solo essere chiari sul fatto che abbiamo dodici colonne con cui lavorare e in questo modo mantenere i nostri contenuti organizzati e presentati visivamente meglio. Già vedendo come funziona il contenitore, passiamo alla costruzione della nostra forma base.

Creazione del modulo

Creiamo un HTML con la nostra struttura predefinita e la prima cosa che faremo è includere le librerie di entrambi CSS Piace JavaScript di materializzare e in questo modo applichiamo la funzionalità che vogliamo al nostro form.

È importante che includiamo jQuery nella sua ultima versione per il corretto funzionamento del framework, inoltre dobbiamo includere una linea speciale che ci permetterà di utilizzare le sue icone.

Una volta inserite le librerie, rimane la costruzione del nostro form, la maggior parte degli elementi avrà una struttura simile alla seguente, dove avremo la classe riga, seguito dalla classe cavolo e il numero di colonne che l'elemento occuperà.

NomeCognome

materializzare Ci consente anche di convalidare i campi, nel caso di email indicando il tipo possiamo assegnare i messaggi nel caso in cui le informazioni siano valide o meno, vediamo:

 E-mail

Possiamo includere anche le famose icone, una caratteristica tratta dal design piatto che conferisce alla nostra applicazione un livello di usabilità superiore. Per questo useremo il tag con la classe specifica:

 e-mail

Infine, nessun modulo base è completo senza il famoso area di testo, caselle di testo che ci consentono di raccogliere molte più informazioni, come l'indirizzo di un utente o le descrizioni di alcuni contenuti.

 Area di testo

Una volta compilato il nostro modulo, dobbiamo solo testarne il funzionamento, come materializzare Incorpora molti effetti al nostro modulo e lo rende altamente visivo, vediamo come appare nella seguente GIF.webp animata.

Come vediamo la costruzione di una forma di base usando il linguaggio del design Design dei materiali e supportato da un framework come materializzare Può essere un compito che possiamo eseguire in pochi minuti e ottenere un risultato di qualità che non solo fornisca una visuale migliore, ma anche caratteristiche che solo le migliori applicazioni hanno.

La cosa migliore è che lo scarichi e lo provi, ti piacerà sicuramente.

form-material-design.html 2.75K 647 download