Les formulaires sont l'un des aspects les plus fondamentaux de toute application, car ils nous permettent de capturer les informations de l'utilisateur concernant le modèle commercial géré par notre application.
Conception matérielle En combinant les meilleures pratiques du design classique et la mise en œuvre d'effets originaux et innovants, ils nous permettent de créer des formes qui non seulement sont belles mais donnent également à notre application une fonctionnalité supplémentaire.
Voyons ensuite comment créer un formulaire de base en utilisant les principes de Conception matérielle.
ExigencesAvant de commencer ce didacticiel, nous vous recommandons de parcourir l'introduction à Material Design ici. Nous nous appuierons sur le framework appelé Materialise et il est important que nous comprenions le fonctionnement du conteneur de notre application.
Le conteneur Matérialiser
Le conteneur de Se concrétiser ça marche de la même manière AmorcerDans le cas où nous avons déjà effleuré ce cadre, nous n'aurons aucun problème à comprendre comment il fonctionne, mais pour ceux qui ne le connaissent pas, il s'agit principalement d'un conteneur de 12 colonnes, dans lequel nous pouvons indiquer à nos éléments combien de colonnes il peut couvrir.
Il a une hiérarchie assez similaire, il a une classe conteneur, suivie d'une classe ligne et enfin des classes applicables aux colonnes, voyons à quoi ressemblerait une structure d'une ligne complète, suivie d'une ligne qui contiendrait deux éléments.
Il s'agit d'un div à 12 colonnesIl s'agit d'un div à 6 colonnesIl s'agit d'un div à 6 colonnesLa façon dont nous le voyons est assez simple, nous devons juste être clairs sur le fait que nous avons douze colonnes avec lesquelles travailler et ainsi garder notre contenu organisé et mieux présenté visuellement. En voyant déjà comment fonctionne le conteneur, passons à la construction de notre formulaire de base.
Création de formulaire
Créons un HTML avec notre structure par défaut et la première chose que nous ferons est d'inclure les bibliothèques des deux CSS aimer JavaScript de Se concrétiser et ainsi appliquer la fonctionnalité que nous voulons à notre formulaire.
Il est important que nous incluions jQuery dans sa dernière version pour le bon fonctionnement du framework, en plus nous devons inclure une ligne spéciale qui nous permettra d'utiliser ses icônes.
Une fois les bibliothèques incluses, la construction de notre formulaire reste, la plupart des éléments auront une structure similaire à la suivante, où nous aurons la classe ligne, suivi d'un cours choux et le nombre de colonnes que l'élément occupera.
nomLe nomSe concrétiser Il nous permet également de valider des champs, dans le cas d'email en indiquant le type que l'on peut attribuer aux messages dans le cas où l'information est valide ou non, voyons :
Zone de texteUne fois notre formulaire rempli, il ne nous reste plus qu'à tester son fonctionnement, comment Se concrétiser Il intègre de nombreux effets à notre formulaire et le rend très visuel, voyons à quoi cela ressemble dans le GIF.webp animé suivant.
Comment nous voyons la construction d'une forme de base en utilisant le langage de conception Conception matérielle et soutenu par un cadre comme Se concrétiser Cela peut être une tâche que nous pouvons effectuer en quelques minutes et obtenir un résultat de qualité qui offre non seulement un meilleur visuel, mais également des fonctionnalités que seules les meilleures applications ont.
La meilleure chose à faire est de le télécharger et de l'essayer, vous l'aimerez sûrement.
forme-matériel-conception.html 2.75K 647 Téléchargements
