Scalable.js ile Otomatik Yeniden Boyutlandırma Elemanları Yaratın
Gerekirse konteynerlerini otomatik olarak dolduracak esnek elemanlar oluşturabilir Ölçeklenebilir tavsiye ederim. Bu ücretsiz açık kaynaklı JS betiği, çok fazla stres olmadan akışkan bir tasarım oluşturmak için mükemmeldir..
Scalable.js kütüphanesindeki her şey dövülebilirdir, böylece her bir kabın stilini, boyutunu, konumunu ve dahili içeriğini değiştirebilirsiniz. Sayfanın üst veya altına hizalanmış öğelere mi ihtiyacınız var? Ölçeklenebilir bunun için seçenekler var.
Bunun nasıl çalıştığı hakkında daha fazla bilgi için GitHub deposuna bir göz atın.
En basit şekliyle, bu komut dosyası, ekranı özelleştirmek için bazı seçeneklerle birlikte bir hedef sayfa öğesi alır. İşte GitHub'dan doğrudan alınan bazı örnek kodlar:
var ölçeklenebilir = yeni Ölçeklenebilir (containerEl, seçenekler);
Doğal olarak, ilk parametre hedeflediğiniz konteyner öğesidir (ideal olarak Options parametresi bir anahtar => değer çifti dizisi almalıdır. Bu seçenekler arasında konteyner yükseklik değerleri, min ve maks genişlikler, min ve maks skalalarla birlikte (yani, iç öğelerle ne kadar ölçeklenebileceği). Kullanılabilir bir demo için ana proje sayfasına göz atın. İçerideki esnek öğeyi otomatik olarak yeniden boyutlandırmak için kabın köşelerini sürükleyebilirsiniz. Bu oldukça serin çünkü o bölgenin altında kullanılabilir kod doğrudan sayfadan alınan. Esnek elemanları yalnızca saf CSS ile işlemenin yolları vardır. Ancak, bu yöntemler tarihli olabilir ve JavaScript kadar kontrol sunmuyorlar. Bunu denemek istiyorsanız GitHub'dan bir kopyasını alın ve ne düşündüğünüzü görün.. Ölçeklenebilirlik hala aktif bir gelişim içinde ancak ihtiyaçlarınız için düzenlenmesi kolay bir senaryo.
