Et av de mest grunnleggende aspektene i enhver applikasjon er skjemaene, siden disse lar oss fange brukerens informasjon om forretningsmodellen som applikasjonen vår administrerer.
Materialdesign Ved å kombinere beste praksis for klassisk design og implementering av originale og innovative effekter, lar de oss lage former som ikke bare ser bra ut, men også gir applikasjonen vår en ekstra funksjonalitet.
La oss se hvordan du lager en grunnleggende form ved å bruke prinsippene for Materialdesign.
KravFør du starter denne opplæringen, anbefaler vi å ta en tur gjennom introduksjonen til materialdesign her. Vi vil stole på rammeverket Materialize, og det er viktig at vi forstår hvordan beholderen til applikasjonen vår fungerer.
Materialiser beholderen
Beholderen med Materialiser det fungerer på samme måte som det gjør StøvelhempeHvis vi allerede har berørt dette rammeverket, vil vi ikke ha noe problem med å forstå hvordan det fungerer, men for de som ikke vet det, er det hovedsakelig en beholder med 12 kolonner, der vi kan fortelle elementene våre hvor mange kolonner den kan dekke.
Den har et ganske likt hierarki, den har en beholderklasse, etterfulgt av en radklasse og til slutt klassene som gjelder for kolonner, la oss se hvordan en struktur for en komplett rad vil se ut, etterfulgt av en rad som vil inneholde to elementer.
Dette er en divisjon med 12 kolonnerDette er en seks-kolonne divDette er en seks-kolonne divHvordan vi ser det er ganske enkelt, vi må bare være klare på at vi har tolv spalter å jobbe med og på denne måten holde innholdet organisert og visuelt bedre presentert. Når vi allerede har sett hvordan beholderen fungerer, la oss gå videre til konstruksjonen av vår grunnleggende form.
Formopprettelse
La oss lage en HTML med vår standardstruktur og det første vi vil gjøre er å inkludere bibliotekene til begge CSS som JavaScript av Materialiser og på denne måten bruke funksjonaliteten vi ønsker på skjemaet vårt.
Det er viktig at vi inkluderer jQuery i den siste versjonen for at rammeverket skal fungere korrekt, må vi i tillegg inkludere en spesiell linje som lar oss bruke ikonene.
Når vi har bibliotekene inkludert, forblir konstruksjonen av skjemaet vårt, de fleste elementene vil ha en struktur som ligner på følgende, hvor vi vil ha klassen rad, etterfulgt av klasse kål og antall kolonner elementet vil oppta.
NavnEtternavnMaterialiser Det lar oss også validere felt, når det gjelder e -post ved å angi typen vi kan tildele meldinger i tilfelle at informasjonen er gyldig eller ikke, la oss se:
E-postVi kan også inkludere de berømte ikonene, en funksjon hentet fra det flate designet som gir applikasjonen vår et høyere brukervennlighet. Til dette bruker vi taggen med den spesifikke klassen:
e-postTil slutt er ingen grunnleggende form komplett uten den berømte tekstområde, tekstbokser som lar oss samle inn mye mer informasjon, for eksempel en brukers adresse eller beskrivelser av noe innhold.
TekstområdeNår vi har fullført skjemaet, trenger vi bare å teste hvordan det fungerer Materialiser Den inneholder mange effekter i formen vår og gjør den svært visuell, la oss se hvordan den ser ut i den følgende animerte GIF.webp -en.
Hvordan vi ser konstruksjonen av et grunnleggende skjema ved hjelp av formspråket Materialdesign og støttet av et rammeverk som Materialiser Det kan være en oppgave vi kan utføre på få minutter og få et kvalitetsresultat som ikke bare gir et bedre visuelt, men også funksjoner som bare de beste programmene har.
Det beste er at du laster det ned og prøver det, du vil sikkert like det.
form-material-design.html 2,75K 647 Nedlastinger
