Opret auto-resizing Elements med Scalable.js
Hvis du har brug for det Lav fleksible elementer, der automatisk fylder deres beholdere Jeg vil meget anbefale Scalable. Dette gratis open-source JS script er perfekt til at skabe et fluid design uden stor stress.
Alt i biblioteket Scalable.js kan formes, så du kan ændre hver container stil, størrelse, position og internt indhold. Har du brug for elementer, der er justeret til toppen eller bunden af siden? Skalerbar har muligheder for det.
Tag et kig på GitHub repo for at lære mere om, hvordan dette virker.
I sit mest grundlæggende form tager dette script et mål sideelement sammen med nogle muligheder for at tilpasse displayet. Her er nogle eksempler kode taget lige fra GitHub:
var skalerbar = ny skalerbar (containerEl, indstillinger);
Naturligvis er den første parameter, hvilket beholderelement du målretter mod (ideelt set a Indstillingsparameteren skal tage en række af nøgle => værdipar. Disse muligheder omfatter beholder højde værdier, min og max bredder, sammen med min og max skalaer (dvs. hvor meget det kan skala med de interne elementer). Se over hovedprojektsiden for en brugbar demo. Du kan trække beholderens hjørner for automatisk at ændre størrelsen på det fleksible element indeni. Dette er ret cool, da under det område du finder brugbar kode taget direkte fra siden. Der er måder at håndtere fleksible elementer med bare ren CSS. Disse metoder kan dog føles dateret, og de tilbyder ikke så meget kontrol som JavaScript. Hvis du gerne vil prøve det, skal du bare tage en kopi fra GitHub og se, hvad du synes. Skalerbar er stadig i aktiv udvikling, men det er et let script til redigering til dine behov.
