Materyal Tasarımı ile akordeon oluşturun

Akordeonlar, bilgiyi organize etmenin en popüler yollarından biridir ve daha sonra farklı efektler kullanarak içinde bulunan bilgileri gösterebiliriz. Bunlar bir süredir internette var ve bunları aşağıdaki gibi çerçevelerle uygulayabiliriz. jQuery, Önyükleme ve onları sadece kullanarak inşa etmeye cüret etsek bile HTML5 Y CSS3.

Ancak teknolojiler hızla gelişiyor ve yukarıda belirtilen çerçeveleri kullanarak bir akordeon uygulamak oldukça basit olsa da, hala bu basitliğin ötesine geçen yöntemler var. Bunlardan biri de denilen yeni tasarım dili ile yapmaktır. Malzeme Tasarımı ve çerçeveden bizi desteklemek somutlaştırmak onun için.

Materyal Tasarımında Akordeonlar
akordeonlar Malzeme Tasarımı Bunları uygulamak sadece kolay olmakla kalmaz, aynı zamanda web sitemiz için bize çok daha fazla çeşitlilik sağlayan çeşitli işlevselliklere de sahibiz, bunların arasında şunlar var:

Akordeon
Klasiktir ve üzerlerine tıklandığında birbiri ardına çöken bloklar halinde bilgileri düzenlemeyi sağlar, bunlar sınıfla tanımlanır katlanabilir akordeon.

Popout
akordeon yazın pop-out popüler bileşene yeni bir efekt ekleyin ve klasik işlevselliği çok daha ayrıntılı görüntü efektleriyle birleştirin, bunlar sınıfla tanımlanır katlanabilir pop-out.

Genişletilebilir
Sonunda genişletilebilir akordeonlar veya genişletilebilir, aynı anda birden fazla akordeon açmaya izin verir, yani bu varlığın kapatmayacağı akordeon başka bir şey görmek istiyorsak, bu tür akordeonları tanımlamak için öznitelik kullanılır veri daraltılabilir tipi genişletilebilir.

Uygulayabileceğimiz akordeon çeşitlerini öğrendikten sonra, üç çeşidi tek bir sayfada topladığımız bir örnek yapacağız.

Web akordeonlarının uygulanması

Yapılacak ilk şey, kütüphaneleri dahil etmektir. somutlaştırmak, hem .js dosyası hem de çerçevenin stil sayfası, bunları örneğimizde kullanabilmek için ve en son sürümünü unutmadan simgelere de bağlantı vermemiz önemlidir. jQuery JavaScript kitaplığından önce somutlaştırmak:

Bu yapıldıktan sonra, uyguladığımız her akordeon için üç konteynerlik bir yapı oluşturacağız, ilki standart akordeon olacak ve onu tanımlamak için ul ve li ile tanımlayacağımız bir yapı oluşturmamız gerekecek. karşılık gelen sınıflar:

Materyal Tasarımı ile standart akordeon

filtre_dramaBirinci
Lorem ipsum ağrı otur amet.

yerSaniye
Lorem ipsum ağrı otur amet.

ne atışÜçüncü
Lorem ipsum ağrı otur amet.

Akordeon içindeki her öğe için aşağıdaki sınıfları tanımlamamız gerektiğini belirtmek önemlidir. katlanabilir başlık ve katlanabilir gövde, yani her birinin başlığı ve mesajı, bakalım ilk akordeonumuz nasıl görünüyor.

BÜYÜT

Gördüğümüz gibi oldukça güzel görünüyor ve karmaşık bir şey yapmamıza gerek kalmadı, şimdi popout tipi akordeonumuzu oluşturacağız ve bunun için tek yapmamız gereken class'ı eklemek. katlanabilir pop-out ve bir önceki örneğin yapısını koruyarak, bununla birlikte işlevselliğimizi oluşturacağız, bunun için kod parçacığını görelim:

Son olarak, genişletilebilir akordeonumuzu oluşturmak için yalnızca veri daraltılabilir seçenek genişletilebilir ve daha önce nasıl yaptığımızı yapıyı koruyorduk ve zaten işlevselliğimize sahip olacaktık:

Akordeonlarımızın nasıl çalıştığını anlamak için aşağıda nasıl göründüklerine bakalım.

Gördüğümüz gibi, sadece birkaç dakika içinde son derece güçlü ve görsel olarak etkileyici bir işlevsellik yarattık, mevcut herhangi bir web sitesi veya uygulama için zengin ve kullanışlı işlevler oluşturmak için örneği alıp ihtiyaçlarına göre uyarlamak sadece herkese kalmış.

akordeon_material_design.html 2.87K 170 İndirme