Maak automatisch aanpassende elementen met Scalable.js
Als je moet maak flexibele elementen die hun containers automatisch vullen Ik zou Scalable ten zeerste aanbevelen. Dit gratis opensource JS-script is perfect voor het creëren van een vloeiend ontwerp zonder veel stress.
Alles in de Scalable.js-bibliotheek is kneedbaar, zodat u de stijl, grootte, positie en interne inhoud van elke container kunt wijzigen. Noodzaak elementen uitgelijnd aan de bovenkant of onderkant van de pagina? Schaalbaar heeft daar opties voor.
Neem een kijkje in de GitHub-repo om meer te leren over hoe dit werkt.
In de meest eenvoudige vorm neemt dit script een doelpagina-element samen met enkele opties voor het aanpassen van de weergave. Hier is een voorbeeldcode die rechtstreeks uit GitHub is overgenomen:
var scalable = new Schaalbaar (containerEl, opties);
Uiteraard is de eerste parameter het containerelement dat u target (idealiter een De parameter options moet een reeks sleutel => waardeparen aannemen. Deze opties omvatten hoogte van de containerhoogte, min. en max. breedte, samen met min. en max. schalen (dat wil zeggen, hoeveel kan het schalen met de interne elementen). Neem een kijkje op de hoofdprojectpagina voor een bruikbare demo. U kunt de hoeken van de container slepen om het flexibele item binnen het formaat automatisch aan te passen. Dit is best gaaf, want onder dat gebied zul je vinden bruikbare code direct van de pagina genomen. Er zijn manieren om flexibele elementen te verwerken met pure CSS. Deze methoden kunnen echter verouderd aanvoelen en bieden niet zoveel controle als JavaScript. Als je dit wilt uitproberen, neem dan gewoon een kopie van GitHub en zie wat je ervan vindt. Schaalbaar is nog steeds in actieve ontwikkeling, maar het is een eenvoudig script om te bewerken voor uw behoeften.
