Einer der grundlegendsten Aspekte in jeder Anwendung sind die Formulare, da diese es uns ermöglichen, die Benutzerinformationen in Bezug auf das Geschäftsmodell zu erfassen, das von unserer Anwendung verarbeitet wird.
Material Design kombiniert die Best Practices des klassischen Designs mit der Umsetzung von originellen und innovativen Effekten und ermöglicht es uns, Formen zu erstellen, die nicht nur gut aussehen, sondern unserer Anwendung eine zusätzliche Funktionalität verleihen.
Lassen Sie uns nun sehen, wie Sie eine Grundform nach den Prinzipien des Materialdesigns erstellen.
Der materialisieren Behälter
Materialize container funktioniert genauso wie Bootstrap , wenn wir dieses Framework bereits berührt haben, werden wir keine Probleme damit haben, seine Funktionsweise zu verstehen, aber für diejenigen, die es nicht kennen, ist es hauptsächlich ein Container mit 12 Spalten , in dem wir können Sagen Sie unseren Elementen, wie viele Spalten es abdecken kann.
Es hat eine ziemlich ähnliche Hierarchie, es hat eine Containerklasse, gefolgt von einer Klassenzeile und schließlich den Klassen, die für die Spalten gelten. Sehen wir uns an, wie eine Struktur einer vollständigen Zeile aussehen würde, gefolgt von einer Zeile, die zwei Elemente enthalten würde.
<div class = "container"> <div class = "row"> <div class = "col s12"> Dies ist ein div mit 12 Spalten </ div> <div class = "col s6"> Dies ist ein 6-Spalten-Div. </ div> <div class = "col s6"> Dies ist ein 6-Spalten-Div. </ div> </ div> </ div>
Wie wir sehen, ist ganz einfach: Wir müssen uns nur darüber im Klaren sein, dass wir zwölf Spalten haben, mit denen wir arbeiten können, und auf diese Weise unsere Inhalte organisiert und visuell besser präsentiert halten. Nachdem wir nun gesehen haben, wie der Container funktioniert, wollen wir mit der Konstruktion unserer Grundform fortfahren.
Erstellung des Formulars
Wir werden einen HTML-Code mit unserer Standardstruktur erstellen. Als Erstes werden wir die Bibliotheken von CSS und Materialise JavaScript einbeziehen und auf diese Weise die gewünschten Funktionen auf unser Formular anwenden.
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"> </ script>
Es ist wichtig, dass wir jQuery in die neueste Version aufnehmen, damit das Framework ordnungsgemäß funktioniert. Außerdem müssen wir eine spezielle Zeile einfügen, mit der wir die Symbole des Frameworks verwenden können.
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
Sobald wir die Bibliotheken eingeschlossen haben, bleibt die Konstruktion unseres Formulars erhalten, die meisten Elemente haben eine Struktur ähnlich der folgenden, wobei wir die Zeilenklasse haben, gefolgt von der Col- Klasse und der Anzahl der Spalten, die das Element belegen wird.
<div class = "row"> <div class = "input-field col s6"> <input placeholder = "Hier steht der Name" id = "name" type = "text" class = "validate"> <label for = "name"> Name </ label> </ div> <div class = "input-field col s6"> <input id = "last name" type = "text" class = "validate"> <label for = "last name"> Nachname </ label> </ div> </ div>
Materialise ermöglicht es uns, Felder zusätzlich zu validieren, im Falle der E-Mail, wenn wir den Typ angeben, dem wir Nachrichten zuweisen können, ob die Informationen gültig sind oder nicht.
<input id = "email" type = "email" class = "validate"> <label for = "email" data-error = "falsche E-Mail" data-success = "gültige E-Mail"> E-Mail </ label>
Wir können auch die berühmten Symbole einbeziehen, die dem flachen Design entnommen sind und unserer Anwendung ein höheres Maß an Benutzerfreundlichkeit verleihen. Dafür verwenden wir das <i> -Tag mit der spezifischen Klasse:
<i class = "Material-Icons-Präfix"> E-Mail </ i>
Schließlich ist kein Basisformular vollständig ohne das berühmte Textfeld, das es uns ermöglicht, viel mehr Informationen zu sammeln, wie z. B. die Adresse eines Benutzers oder Beschreibungen einiger Inhalte.
<textarea id = "textarea" class = "materialize-textarea"> </ textarea> <label for = "textarea"> Textbereich </ label>
Sobald wir unser Formular fertiggestellt haben, müssen wir nur noch die Funktionsweise testen, wie Materialize genügend Effekte in unser Formular einfügt und es sehr visuell macht, um zu sehen, wie es im nächsten animierten GIF aussieht.
Wie wir sehen, kann die Konstruktion einer Grundform mit der Konstruktionssprache Materialdesign und der Verwendung eines Frameworks wie Materialize eine Aufgabe sein, die wir in Minuten erledigen können und die ein qualitativ hochwertiges Ergebnis liefert, das nicht nur eine bessere visuelle Darstellung bietet, sondern auch nur die besten Funktionen bietet eigene Anwendungen.
Das Beste ist, dass du es herunterlädst und ausprobierst, es gefällt dir bestimmt.
471 Descargas form-material-design.html 2.75K 471 Downloads
