Cipta Elakkan Semula Elemen dengan Scalable.js

Jika anda perlu membuat elemen fleksibel yang mengisi bekas mereka secara automatik Saya sangat mengesyorkan berskala. Skrip JS sumber terbuka percuma ini sesuai untuk menghasilkan reka bentuk cecair tanpa banyak tekanan.

Segala-galanya dalam perpustakaan Scalable.js dapat dibentuk supaya anda boleh mengubah setiap jenis, saiz, kedudukan, dan kandungan dalam kontena. Perlu elemen yang diselaraskan ke bahagian atas atau bawah halaman? Scalable mempunyai pilihan untuk itu.

Ambil penglihatan di repo GitHub untuk mengetahui lebih lanjut mengenai cara ini berfungsi.

Pada bentuk yang paling asas, skrip ini mengambil elemen halaman sasaran bersama dengan beberapa pilihan untuk menyesuaikan paparan. Berikut adalah beberapa contoh kod yang diambil terus dari GitHub:

var scalable = new Scalable (containerEl, options);

Sememangnya, parameter pertama adalah mana-mana elemen kontena yang anda sasarkan (idealnya a

atau sesuatu yang serupa).

Parameter opsyen perlu mengambil pelbagai pasangan => nilai pasangan. Pilihan ini termasuk nilai ketinggian kontena, lebar min dan maks, bersamaan dengan skala min dan maksimum (iaitu berapa banyaknya boleh skala dengan elemen dalaman).

Lihat halaman utama projek untuk demo yang boleh digunakan. Anda boleh menyeret sudut kontena untuk auto-mengubah saiz item yang fleksibel di dalamnya. Ini agak sejuk kerana di bawah kawasan itu anda akan dapati kod yang boleh digunakan diambil secara langsung dari halaman.

Ada cara untuk mengendalikan unsur-unsur yang fleksibel dengan hanya CSS tulen. Walau bagaimanapun, kaedah ini boleh merasa bertarikh dan mereka tidak menawarkan banyak kawalan seperti JavaScript.

Jika anda ingin mencuba ini, ambil salinan dari GitHub dan lihat apa yang anda fikirkan.

Scalable masih dalam perkembangan aktif tetapi skrip mudah untuk diedit untuk keperluan anda.