Twórz formularze za pomocą Material Design

Jednym z najbardziej fundamentalnych aspektów każdej aplikacji są formularze, ponieważ pozwalają nam one przechwycić informacje użytkownika dotyczące modelu biznesowego, którym zarządza nasza aplikacja.

Wygląd materiału Łącząc najlepsze praktyki klasycznego designu z realizacją oryginalnych i innowacyjnych efektów, pozwalają nam tworzyć formy, które nie tylko dobrze wyglądają, ale także dodają funkcjonalności naszej aplikacji.

Zobaczmy więc, jak stworzyć podstawowy formularz, korzystając z zasad Wygląd materiału.

WymaganiaPrzed rozpoczęciem tego samouczka zalecamy zapoznanie się z wprowadzeniem do projektowania materiałów tutaj. Będziemy polegać na frameworku o nazwie Materialise i ważne jest, abyśmy rozumieli, jak działa kontener naszej aplikacji.

Pojemnik zmaterializuj

Pojemnik z Zmaterializować działa tak samo, jak działa BootstrapW przypadku, gdy już dotknęliśmy tego frameworka, nie będziemy mieli problemu ze zrozumieniem, jak to działa, ale dla tych, którzy go nie znają, jest to głównie kontener 12 kolumn, w którym możemy powiedzieć naszym elementom, ile kolumn może pokryć.

Ma dość podobną hierarchię, ma klasę kontenera, następnie klasę wiersza i na końcu klasy mające zastosowanie do kolumn, zobaczmy jak wyglądałaby struktura pełnego wiersza, po którym następuje wiersz zawierający dwa elementy.

To jest 12-kolumnowy divTo jest 6-kolumnowy divTo jest 6-kolumnowy div

Jak widzimy, jest to dość proste, musimy tylko jasno powiedzieć, że mamy dwanaście kolumn do pracy, dzięki czemu nasze treści są uporządkowane i lepiej prezentowane wizualnie. Widząc już, jak działa kontener, przejdźmy do budowy naszej podstawowej formy.

Tworzenie formularzy

Stwórzmy HTML z naszą domyślną strukturą, a pierwszą rzeczą, którą zrobimy, jest włączenie bibliotek obu CSS lubić JavaScript z Zmaterializować i w ten sposób zastosuj funkcjonalność jaką chcemy w naszym formularzu.

Ważne jest, abyśmy uwzględnili jQuery w jego najnowszej wersji dla poprawnego działania frameworka, dodatkowo musimy dołączyć specjalną linię, która pozwoli nam korzystać z jego ikon.

Gdy mamy już biblioteki, konstrukcja naszego formularza pozostaje, większość elementów będzie miała strukturę podobną do poniższej, gdzie będziemy mieli klasę wiersz, a następnie klasa kapusta i liczbę kolumn, które element będzie zajmować.

NazwaNazwisko

Zmaterializować Pozwala nam również na walidację pól, w przypadku wiadomości e-mail poprzez wskazanie typu możemy przypisać wiadomości w przypadku, gdy informacja jest poprawna lub nie, zobaczmy:

 E-mail

Możemy również uwzględnić słynne ikony, cechę zaczerpniętą z płaskiej konstrukcji, która zapewnia naszej aplikacji wyższy poziom użyteczności. W tym celu użyjemy tagu o określonej klasie:

 e-mail

Wreszcie żadna podstawowa forma nie jest kompletna bez słynnego obszar tekstowy, pola tekstowe, które pozwalają nam zebrać znacznie więcej informacji, takich jak adres użytkownika lub opisy niektórych treści.

 Obszar tekstowy

Kiedy już wypełnimy nasz formularz, musimy tylko przetestować jego działanie, jak Zmaterializować Zawiera wiele efektów w naszym formularzu i sprawia, że ​​jest bardzo wizualny, zobaczmy, jak to wygląda w poniższym animowanym GIF.webp-ie.

Jak widzimy budowę podstawowej formy za pomocą języka projektowania? Wygląd materiału i wspierany przez framework, taki jak Zmaterializować Może to być zadanie, które możemy wykonać w ciągu kilku minut i uzyskać wynik wysokiej jakości, który zapewnia nie tylko lepszy wygląd, ale także funkcje, które mają tylko najlepsze aplikacje.

Najlepsze jest to, że pobierzesz go i wypróbujesz, na pewno ci się spodoba.

form-material-design.html 2.75K 647 pobrań