Opret formularer med Material Design

Et af de mest fundamentale aspekter i enhver applikation er formularerne, da disse giver os mulighed for at fange brugerens oplysninger om den forretningsmodel, som vores applikation administrerer.

Materialedesign Ved at kombinere den bedste praksis med klassisk design og implementering af originale og innovative effekter giver de os mulighed for at skabe former, der ikke kun ser godt ud, men også giver vores applikation en ekstra funktionalitet.

Lad os derefter se, hvordan du opretter en grundlæggende form ved hjælp af principperne for Materialedesign.

KravInden du starter denne vejledning, anbefaler vi, at du går en tur gennem introduktionen af ​​materialedesign her. Vi vil stole på den ramme, der kaldes Materialize, og det er vigtigt, at vi forstår, hvordan containeren i vores applikation fungerer.

Materialiseringsbeholderen

Beholderen med Materialiser det fungerer på samme måde som det gør BootstrapHvis vi allerede har berørt denne ramme, vil vi ikke have noget problem med at forstå, hvordan det fungerer, men for dem, der ikke kender det, er det hovedsageligt en beholder med 12 kolonner, hvor vi kan fortælle vores elementer, hvor mange kolonner det kan dække.

Det har et nogenlunde lignende hierarki, det har en containerklasse, efterfulgt af en rækklasse og endelig de klasser, der gælder for kolonner, lad os se, hvordan en struktur af en komplet række vil se ud, efterfulgt af en række, der vil indeholde to elementer.

Dette er en 12-kolonne divDette er en 6-kolonne divDette er en 6-kolonne div

Hvordan vi ser det er ganske enkelt, vi skal bare være klare over, at vi har tolv spalter at arbejde med og på denne måde holde vores indhold organiseret og visuelt bedre præsenteret. Lad os allerede se, hvordan containeren fungerer, og gå videre til konstruktionen af ​​vores grundform.

Oprettelse af formularer

Lad os oprette en HTML med vores standardstruktur og det første, vi vil gøre, er at inkludere begge biblioteker CSS synes godt om JavaScript af Materialiser og på den måde anvende den funktionalitet, vi ønsker, på vores formular.

Det er vigtigt, at vi inkluderer jQuery i den nyeste version for at rammeverket fungerer korrekt, derudover skal vi inkludere en særlig linje, der giver os mulighed for at bruge dens ikoner.

Når vi har inkluderet bibliotekerne, forbliver konstruktionen af ​​vores formular, de fleste af elementerne vil have en struktur, der ligner det følgende, hvor vi vil have klassen række, efterfulgt af klasse kål og antallet af kolonner elementet vil optage.

NavnEfternavn

Materialiser Det giver os også mulighed for at validere felter, i tilfælde af e -mail ved at angive den type, vi kan tildele beskeder i tilfælde af, at oplysningerne er gyldige eller ej, lad os se:

 E-mail

Vi kan også inkludere de berømte ikoner, en funktion taget fra det flade design, der giver vores applikation et højere brugervenlighed. Til dette vil vi bruge mærket med den specifikke klasse:

 e-mail

Endelig er ingen grundform komplet uden den berømte tekstområde, tekstbokse, der giver os mulighed for at indsamle meget mere information, f.eks. en brugers adresse eller beskrivelser af noget indhold.

 Tekstområde

Når vi er færdige med vores udfyldte formular, skal vi kun teste dens funktion, hvordan Materialiser Det inkorporerer mange effekter i vores form og gør det meget visuelt, lad os se, hvordan det ser ud i den følgende animerede GIF.webp.

Hvordan ser vi konstruktionen af ​​en grundform ved hjælp af designsproget Materialedesign og understøttet af en ramme som Materialiser Det kan være en opgave, vi kan udføre på få minutter og opnå et kvalitetsresultat, der ikke kun giver en bedre visuel, men også funktioner, som kun de bedste applikationer har.

Det bedste er, at du downloader det og prøver det, du vil helt sikkert kunne lide det.

form-material-design.html 2,75K 647 Downloads