Herhangi bir uygulamadaki en temel yönlerden biri formlardır, çünkü bunlar, uygulamamızın yönettiği iş modeliyle ilgili kullanıcının bilgilerini yakalamamıza izin verir.
Malzeme Tasarımı Klasik tasarımın en iyi uygulamalarını özgün ve yenilikçi efektlerin uygulanmasıyla birleştirerek, yalnızca güzel görünmekle kalmayıp aynı zamanda uygulamamıza ek bir işlevsellik kazandıran formlar oluşturmamıza olanak tanırlar.
O zaman, ilkelerini kullanarak temel bir formun nasıl oluşturulacağını görelim. Malzeme Tasarımı.
GereksinimlerBu eğiticiye başlamadan önce, buradaki Materyal Tasarımı girişini gözden geçirmenizi öneririz. Materialize adlı çerçeveye güveneceğiz ve uygulamamızın konteynerinin nasıl çalıştığını anlamamız önemlidir.
Materyalize kapsayıcı
konteyner somutlaştırmak aynı şekilde çalışır ÖnyüklemeBu çerçeveye daha önce değindiysek, nasıl çalıştığını anlamakta sorun yaşamayacağız, ancak bilmeyenler için esas olarak bir kapsayıcıdır. 12 sütun, öğelerimize kaç sütun kapsayabileceğini söyleyebiliriz.
Oldukça benzer bir hiyerarşiye sahiptir, bir kap sınıfına, ardından bir satır sınıfına ve son olarak sütunlara uygulanabilir sınıflara sahiptir, tam bir satırın yapısının nasıl görüneceğini ve ardından iki öğe içeren bir satırın nasıl görüneceğini görelim.
Bu 12 sütunlu bir divBu 6 sütunlu bir divBu 6 sütunlu bir divBunu oldukça basit görüyoruz, sadece on iki sütunla çalışmak ve bu şekilde içeriğimizi düzenli ve görsel olarak daha iyi sunmak için açık olmalıyız. Zaten konteynerin nasıl çalıştığını görerek, temel formumuzun yapımına geçelim.
Form oluşturma
bir oluşturalım HTML varsayılan yapımızla ve yapacağımız ilk şey, her ikisinin de kitaplıklarını dahil etmek CSS beğenmek JavaScript nın-nin somutlaştırmak ve bu şekilde formumuza istediğimiz işlevselliği uygularız.
dahil etmemiz önemlidir. jQuery çerçevenin doğru çalışması için en son sürümüne ek olarak, simgelerini kullanmamıza izin verecek özel bir satır eklemeliyiz.
Kütüphaneleri eklediğimizde, formumuzun yapısı kalır, öğelerin çoğu aşağıdakine benzer bir yapıya sahip olacak, burada sınıfa sahip olacağız. sıra, ardından sınıf lahana ve elemanın kaplayacağı sütun sayısı.
İsimSoyadısomutlaştırmak Ayrıca alanları doğrulamamızı da sağlar, e-posta olması durumunda bilgilerin geçerli olup olmaması durumunda mesaj atayabileceğimiz türü belirterek, bakalım:
e-postaAyrıca, uygulamamıza daha yüksek düzeyde kullanılabilirlik sağlayan düz tasarımdan alınan bir özellik olan ünlü simgeleri de dahil edebiliriz. Bunun için etiketi kullanacağız belirli sınıfla:
e-postaSon olarak, ünlü olmadan hiçbir temel form tamamlanmış sayılmaz. metin alanı, bir kullanıcının adresi veya bazı içeriğin açıklamaları gibi çok daha fazla bilgi toplamamıza izin veren metin kutuları.
Metin AlanıDoldurduğumuz formumuzla birlikte, sadece çalışmasını test etmemiz gerekiyor, nasıl somutlaştırmak Formumuza birçok efekt katıyor ve onu oldukça görsel hale getiriyor, hadi aşağıdaki animasyonlu GIF.webp'de nasıl göründüğüne bakalım.
Tasarım dilini kullanarak temel bir formun inşasını nasıl görüyoruz? Malzeme Tasarımı ve gibi bir çerçeve tarafından desteklenen somutlaştırmak Dakikalar içinde gerçekleştirebileceğimiz ve sadece daha iyi bir görsel değil, aynı zamanda sadece en iyi uygulamaların sahip olduğu özellikler sağlayan kaliteli bir sonuç elde edebileceğimiz bir görev olabilir.
En güzeli de indirip denemeniz, kesinlikle beğeneceksiniz.
form-material-design.html 2.75K 647 İndirilenler
