Een van de meest fundamentele aspecten in elke applicatie zijn de formulieren, aangezien deze ons in staat stellen om de gebruikersinformatie vast te leggen met betrekking tot het bedrijfsmodel dat onze applicatie beheert.
Materiaal ontwerp Door de best practices van klassiek design te combineren met de implementatie van originele en innovatieve effecten, stellen ze ons in staat om vormen te creëren die er niet alleen goed uitzien, maar die onze applicatie ook een extra functionaliteit geven.
Laten we eens kijken hoe we een basisformulier kunnen maken met behulp van de principes van Materiaal ontwerp.
VereistenVoordat u aan deze zelfstudie begint, raden we u aan hier de introductie van Material Design door te nemen. We zullen vertrouwen op het framework genaamd Materialize en het is belangrijk dat we begrijpen hoe de container van onze applicatie werkt.
De Materialise-container
De container van materialiseren het werkt op dezelfde manier als het doet BootstrapAls we dit raamwerk al hebben aangeroerd, zullen we geen probleem hebben om te begrijpen hoe het werkt, maar voor degenen die het niet kennen, is het voornamelijk een container met 12 kolommen, waarin we onze elementen kunnen vertellen hoeveel kolommen het kan beslaan.
Het heeft een redelijk vergelijkbare hiërarchie, het heeft een containerklasse, gevolgd door een rijklasse en tenslotte de klassen die van toepassing zijn op kolommen, laten we eens kijken hoe een structuur van een volledige rij eruit zou zien, gevolgd door een rij die twee elementen zou bevatten.
Dit is een div . met 12 kolommenDit is een div . met 6 kolommenDit is een div . met 6 kolommenHoe we het zien is vrij eenvoudig, we moeten alleen duidelijk zijn dat we twaalf kolommen hebben om mee te werken en op deze manier onze inhoud georganiseerd en visueel beter gepresenteerd te houden. Nu we al zien hoe de container werkt, gaan we verder met de constructie van onze basisvorm.
Formulier maken
Laten we een maken HTML met onze standaardstructuur en het eerste wat we zullen doen is de bibliotheken van beide opnemen CSS Leuk vinden JavaScript van materialiseren en op deze manier de functionaliteit die we willen toepassen op onze vorm.
Het is belangrijk dat we opnemen: jQuery in de nieuwste versie voor de juiste werking van het framework, moeten we bovendien een speciale regel opnemen waarmee we de pictogrammen kunnen gebruiken.
Zodra we de bibliotheken hebben opgenomen, blijft de constructie van onze vorm behouden, de meeste elementen zullen een structuur hebben die lijkt op de volgende, waar we de klasse zullen hebben rij, gevolgd door klasse kool en het aantal kolommen dat het element zal innemen.
NaamAchternaammaterialiseren Het stelt ons ook in staat om velden te valideren, in het geval van e-mail door het type aan te geven dat we berichten kunnen toewijzen in het geval dat de informatie geldig is of niet, laten we eens kijken:
TekstgebiedEenmaal met ons ingevulde formulier, hoeven we alleen de werking ervan te testen, hoe? materialiseren Het bevat veel effecten in onze vorm en maakt het zeer visueel, laten we eens kijken hoe het eruit ziet in de volgende geanimeerde GIF.webp.
Hoe we de constructie van een basisvorm zien met behulp van de ontwerptaal Materiaal ontwerp en ondersteund door een raamwerk zoals materialiseren Het kan een taak zijn die we in enkele minuten kunnen uitvoeren en een kwaliteitsresultaat verkrijgen dat niet alleen een betere visuele weergave biedt, maar ook functies die alleen de beste applicaties hebben.
Het beste is dat je het downloadt en probeert, je zult het zeker leuk vinden.
vorm-materiaal-design.html 2.75K 647 downloads
