Създаване на форми с материален дизайн

Един от най -фундаменталните аспекти на всяко приложение са формите, тъй като те ни позволяват да улавяме информацията на потребителя относно бизнес модела, който управлява нашето приложение.

Материален дизайн Комбинирайки най -добрите практики на класическия дизайн и прилагането на оригинални и иновативни ефекти, те ни позволяват да създаваме форми, които не само да изглеждат добре, но и дават на нашето приложение допълнителна функционалност.

Нека да видим тогава как да създадем основна форма, използвайки принципите на Материален дизайн.

ИзискванияПреди да започнете този урок, препоръчваме да се разходите през въвеждането на материалния дизайн тук. Ще разчитаме на рамката, наречена Materialize и е важно да разберем как работи контейнерът на нашето приложение.

Контейнерът за материализация

Контейнерът на Материализирайте работи по същия начин, по който работи BootstrapВ случай, че вече сме се докоснали до тази рамка, няма да имаме проблем да разберем как работи, но за тези, които не я познават, тя е основно контейнер на 12 колони, в която можем да кажем на нашите елементи колко колони може да покрие.

Той има доста подобна йерархия, има клас контейнер, последван от клас ред и накрая класовете, приложими за колони, нека видим как би изглеждала структура на пълен ред, последван от ред, който ще съдържа два елемента.

Това е 12-колонен divТова е 6-колонен divТова е 6-колонен div

Начинът, по който го виждаме, е съвсем прост, просто трябва да сме наясно, че имаме дванадесет колони, с които да работим и по този начин да поддържаме съдържанието си организирано и визуално по -добре представено. Виждайки вече как работи контейнерът, нека преминем към изграждането на основната ни форма.

Създаване на формуляр

Нека създадем a HTML с нашата структура по подразбиране и първото нещо, което ще направим, е да включим библиотеките и на двете CSS като JavaScript на Материализирайте и по този начин прилагаме желаната от нас функционалност към нашата форма.

Важно е да включим jQuery в последната му версия за правилното функциониране на рамката, освен това трябва да включим специален ред, който ще ни позволи да използваме нейните икони.

След като включим библиотеките, конструкцията на нашата форма остава, повечето от елементите ще имат структура, подобна на следната, където ще имаме класа ред, последвано от клас зеле и броя на колоните, които елементът ще заема.

ИмеФамилия

Материализирайте Той също така ни позволява да потвърждаваме полета, в случай на имейл, като посочваме типа, който можем да зададем съобщения в случай, че информацията е валидна или не, нека да видим:

 Електронна поща

Можем да включим и известните икони, функция, взета от плоския дизайн, която дава на нашето приложение по -високо ниво на използваемост. За това ще използваме маркера с конкретния клас:

 електронна поща

И накрая, нито една основна форма не е пълна без известната текстово поле, текстови полета, които ни позволяват да събираме много повече информация, като например адрес на потребител или описания на някакво съдържание.

 Текстова област

След като попълним формуляра, трябва само да тестваме работата му, как Материализирайте Той включва много ефекти във формата ни и го прави силно визуален, нека да видим как изглежда в следния анимиран GIF.webp.

Как виждаме изграждането на основна форма, използвайки езика за проектиране Материален дизайн и се поддържа от рамка като Материализирайте Това може да бъде задача, която можем да изпълним за минути и да получим качествен резултат, който не само осигурява по -добра визуализация, но и функции, които имат само най -добрите приложения.

Най -хубавото е, че го изтегляте и пробвате, със сигурност ще ви хареса.

form-material-design.html 2.75K 647 изтегляния