Izveidot automātisko izmēru maiņas elementus ar Scalable.js

Ja jums ir nepieciešams veikt elastīgus elementus, kas automātiski piepilda savus konteinerus Es ļoti ieteiktu Scalable. Šis bezmaksas atvērtā koda JS skripts ir ideāls, lai radītu šķidruma dizainu bez daudz stresa.

Viss Scalable.js bibliotēkā ir veidojams, lai jūs varētu mainīt katra konteinera stilu, lielumu, pozīciju un iekšējo saturu. Vai nepieciešams elementi, kas ir saskaņoti ar lapas augšdaļu vai apakšējo daļu? Mērogojamam ir iespējas.

Uzziniet par GitHub repo, lai uzzinātu vairāk par to, kā tas darbojas.

Visbiežāk šī skripta formā tiek parādīts mērķa lapas elements, kā arī dažas iespējas, kā pielāgot displeju. Šeit ir daži parauga kodi, kas ņemti tieši no GitHub:

var scalable = new Mērogojams (konteinersEl, opcijas);

Protams, pirmais parametrs ir tas, kurš konteinera elements ir mērķēts (ideāli a

vai kaut kas līdzīgs).

Parametru parametram vajadzētu būt atslēgas => vērtību pāru masīvam. Šīs iespējas ietver konteinera augstuma vērtības, min un maksimālie platumi, kā arī min un max svari (ti, cik daudz tas var mērīt ar iekšējiem elementiem).

Apskatiet galveno projekta lapu par izmantojamu demonstrāciju. Jūs varat vilkt konteinera stūriem, lai automātiski mainītu elastīgā vienuma izmērus. Tas ir diezgan foršs, jo zem šīs zonas atradīsiet izmantojamais kods tieši no lapas.

Ir veidi, kā rīkoties ar elastīgiem elementiem tikai ar tīru CSS. Tomēr šīs metodes var justies datētas un tās nesniedz tik daudz kontroles kā JavaScript.

Ja vēlaties to izmēģināt, vienkārši paņemiet kopiju no GitHub un skatiet, ko tu domā.

Mērogojamība joprojām ir aktīvā attīstībā, bet tas ir viegls skripts, lai rediģētu jūsu vajadzības.