Vytváranie prvkov s automatickým zmenou veľkosti pomocou programu Scalable.js

Ak potrebujete vytvoriť flexibilné prvky, ktoré automaticky vyplnia svoje kontajnery Veľmi by som vám odporučila škálovateľnosť. Tento bezplatný open-source JS skript je ideálny pre vytvorenie tekutého dizajnu bez veľkého stresu.

Všetko v knižnici Scalable.js je tvárné, takže môžete meniť štýl, veľkosť, pozíciu a vnútorný obsah každého kontajnera. Potrebujete prvky zarovnané v hornej alebo dolnej časti stránky? Rozbaliteľná možnosť má možnosti.

Pozrite sa na repo spoločnosti GitHub a dozviete sa viac o tom, ako to funguje.

V najzákladnejšej podobe tento skript preberá prvok cieľovej stránky spolu s niektorými možnosťami prispôsobenia zobrazenia. Tu je nejaký vzorový kód odobratý priamo z GitHub:

var scalable = nový škálovateľný (containerEl, možnosti);

Prirodzene, prvým parametrom je ľubovoľný prvok kontajnera, na ktorý zacieľujete (v ideálnom prípade

alebo niečo podobné).

Parameter možností by mal mať pole kľúčov => hodnôt. Medzi tieto možnosti patrí hodnoty výšky kontajnera, minimálna a maximálna šírka, spolu so stupnicami min a max (napr., koľko sa môže meniť s vnútornými prvkami).

Pozrite sa na hlavnú stránku projektu pre použiteľné demo. Môžete pretiahnuť rohy kontajnera tak, aby sa flexibilná položka vo vnútri automaticky zmenila. To je celkom skvelé, pretože pod touto oblasťou nájdete použiteľný kód prevzaté priamo zo stránky.

Existujú spôsoby, ako zvládnuť flexibilné prvky len s čistým CSS. Avšak tieto metódy sa môžu cítiť datované a neponúkajú toľko kontroly ako JavaScript.

Ak by ste to chceli vyskúšať, jednoducho uchopte kópiu od spoločnosti GitHub a uvidíte, čo si myslíte.

Scalable je stále v aktívnom vývoji, ale je to jednoduchý skript, ktorý môžete upraviť podľa svojich potrieb.