Buat Elemen Ubah Ukuran Otomatis dengan Scalable.js

Jika perlu membuat elemen fleksibel yang secara otomatis mengisi wadah mereka Saya akan sangat merekomendasikan Scalable. Skrip JS open-source gratis ini sangat cocok untuk membuat desain yang lancar tanpa banyak tekanan.

Segala sesuatu di pustaka Scalable.js dapat ditempa sehingga Anda dapat mengubah gaya, ukuran, posisi, dan konten internal setiap penampung. Perlu elemen disejajarkan dengan bagian atas atau bawah halaman? Scalable memiliki opsi untuk itu.

Mengintip repo GitHub untuk mempelajari lebih lanjut tentang cara kerjanya.

Pada bentuk paling mendasar, skrip ini mengambil elemen halaman target bersama dengan beberapa opsi untuk menyesuaikan tampilan. Berikut beberapa contoh kode yang diambil langsung dari GitHub:

var scalable = Scalable baru (containerEl, opsi);

Secara alami, parameter pertama adalah elemen penampung mana pun yang Anda targetkan (idealnya a

atau yang serupa).

Parameter opsi harus mengambil array pasangan kunci =>. Opsi-opsi ini termasuk nilai tinggi kontainer, lebar min dan maks, bersama dengan skala min dan max (mis. berapa banyak yang dapat diukur dengan elemen internal).

Lihat halaman proyek utama untuk demo yang dapat digunakan. Anda dapat menarik sudut wadah untuk secara otomatis mengubah ukuran item fleksibel di dalamnya. Ini cukup keren karena di bawah area itu Anda akan menemukan kode yang dapat digunakan diambil langsung dari halaman.

Ada beberapa cara untuk menangani elemen fleksibel hanya dengan CSS murni. Namun, metode ini bisa terasa ketinggalan jaman dan mereka tidak menawarkan kontrol sebanyak JavaScript.

Jika Anda ingin mencoba ini, ambil saja salinan dari GitHub dan lihat apa yang Anda pikirkan.

Scalable masih dalam pengembangan aktif tetapi skrip mudah diedit untuk kebutuhan Anda.