Einer der grundlegendsten Aspekte in jeder Anwendung sind die Formulare, da sie es uns ermöglichen, die Informationen des Benutzers über das Geschäftsmodell zu erfassen, das unsere Anwendung verwaltet.
Material Design Durch die Kombination der Best Practices des klassischen Designs und der Umsetzung origineller und innovativer Effekte können wir Formen erstellen, die nicht nur gut aussehen, sondern unserer Anwendung auch eine zusätzliche Funktionalität verleihen.
Sehen wir uns dann an, wie Sie eine Grundform nach den Prinzipien von . erstellen Material Design.
AnforderungenBevor Sie mit diesem Tutorial beginnen, empfehlen wir Ihnen, hier die Einführung in Material Design durchzugehen. Wir werden uns auf das Framework namens Materialise verlassen und es ist wichtig, dass wir verstehen, wie der Container unserer Anwendung funktioniert.
Der Materialise-Container
Der Behälter von Materialisieren es funktioniert genauso BootstrapFalls wir dieses Framework bereits angesprochen haben, werden wir kein Problem damit haben, wie es funktioniert, aber für diejenigen, die es nicht kennen, ist es hauptsächlich ein Container von 12 Spalten, in dem wir unseren Elementen mitteilen können, wie viele Spalten sie abdecken können.
Es hat eine ziemlich ähnliche Hierarchie, es hat eine Container-Klasse, gefolgt von einer Zeilenklasse und schließlich die auf Spalten anwendbaren Klassen. Sehen wir uns an, wie eine Struktur einer vollständigen Zeile aussehen würde, gefolgt von einer Zeile, die zwei Elemente enthalten würde.
Dies ist ein 12-Spalten-DivDies ist ein 6-spaltiges DivDies ist ein 6-Spalten-DivWie wir sehen, ist es ganz einfach, wir müssen uns nur klar machen, dass wir zwölf Spalten haben, mit denen wir arbeiten können und auf diese Weise unsere Inhalte organisiert und visuell besser präsentiert werden. Nachdem wir bereits gesehen haben, wie der Container funktioniert, gehen wir zum Aufbau unserer Grundform über.
Formularerstellung
Lass uns eine erstellen HTML mit unserer Standardstruktur und das erste, was wir tun werden, ist die Bibliotheken von beiden einzubinden CSS mögen JavaScript von Materialisieren und wenden Sie auf diese Weise die gewünschte Funktionalität auf unser Formular an.
Es ist wichtig, dass wir einschließen jQuery in der neuesten Version für das ordnungsgemäße Funktionieren des Frameworks müssen wir außerdem eine spezielle Zeile einfügen, die es uns ermöglicht, seine Symbole zu verwenden.
Sobald wir die Bibliotheken eingebunden haben, bleibt die Konstruktion unseres Formulars bestehen, die meisten Elemente haben eine Struktur ähnlich der folgenden, wobei wir die Klasse haben werden die Zeile, gefolgt von der Klasse Kohl und die Anzahl der Spalten, die das Element belegen wird.
NameFamilienname, NachnameMaterialisieren Es ermöglicht uns auch, Felder im Falle von E-Mails zu validieren, indem wir den Typ angeben, den wir Nachrichten zuweisen können, falls die Informationen gültig sind oder nicht, mal sehen:
TextbereichMit unserem ausgefüllten Formular müssen wir nur noch seine Funktion testen, wie Materialisieren Es integriert viele Effekte in unser Formular und macht es sehr visuell. Sehen wir uns im folgenden animierten GIF.webp an, wie es aussieht.
Wie wir die Konstruktion einer Grundform mit Hilfe der Designsprache sehen Material Design und unterstützt von einem Framework wie Materialisieren Es kann eine Aufgabe sein, die wir in wenigen Minuten erledigen und ein qualitativ hochwertiges Ergebnis erzielen können, das nicht nur eine bessere Optik bietet, sondern auch Funktionen, die nur die besten Anwendungen haben.
Das Beste ist, dass Sie es herunterladen und ausprobieren, es wird Ihnen sicherlich gefallen.
form-material-design.html 2.75K 647 Downloads
