Vytvořit prvky automatické změny velikosti pomocí nástroje Scalable.js

Pokud potřebuješ vytvořit pružné prvky, které automaticky naplní své kontejnery Velmi doporučuji Scalable. Tento volný open-source JS skript je ideální pro vytváření tekutého designu bez velkého stresu.

Vše v knihovně Scalable.js je tvárné, takže můžete měnit styl, velikost, pozici a vnitřní obsah každého kontejneru. Potřebujete prvky zarovnané nahoře nebo dole na stránce? Škálovatelnost má na to možnosti.

Podívejte se na repozitář GitHub a dozvíte se více o tom, jak to funguje.

Ve své nejzákladnější podobě tento skript vezme prvek cílové stránky spolu s některými možnostmi přizpůsobení zobrazení. Zde je ukázkový kód převzatý přímo z GitHubu:

var scalable = new Škálovatelný (containerEl, možnosti);

Prvním parametrem je přirozeně jakýkoli prvek kontejneru, na který cílíte (v ideálním případě a

nebo něco podobného).

Parametr options by měl mít řadu párů klíčů => hodnota. Tyto možnosti zahrnují hodnoty výšky kontejneru, min a max šířky, spolu s min a max měřítky (tj. jak moc se může měnit s interními prvky).

Podívejte se na hlavní stránku projektu a využijte demo. Přetažením rohů kontejneru můžete automaticky změnit velikost flexibilní položky uvnitř. To je docela v pohodě, protože pod touto oblastí najdete použitelný kód přímo ze stránky.

Existují způsoby, jak zvládnout flexibilní prvky s čistě CSS. Nicméně, tyto metody se mohou cítit datované a nenabízejí tolik kontroly jako JavaScript.

Pokud byste si to chtěli vyzkoušet, stačí si pořídit kopii z GitHubu a zjistit, co si myslíte.

Škálovatelnost je stále v aktivním vývoji, ale je to jednoduchý skript, který lze upravit pro vaše potřeby.