יצירת שינוי גודל אוטומטי עם אלמנטים Scalable.js

אם אתה צריך לעשות אלמנטים גמישים אוטומטי מילוי המכולות שלהם אני מאוד ממליץ Scalable. זה קוד פתוח קוד פתוח JS סקריפט מושלם ליצירת עיצוב נוזל ללא מתח רב.

הכל בספרייה Scalable.js הוא חטוב, כך שתוכל לשנות את כל הסגנון של המכל, גודל, מיקום, ותוכן פנימי. צריך אלמנטים מיושרים לחלק העליון או התחתון של הדף? Scalable יש אפשרויות עבור זה.

קח מבט על ריפו GitHub כדי ללמוד עוד על איך זה עובד.

בצורה הבסיסית ביותר, סקריפט זה לוקח רכיב דף היעד יחד עם כמה אפשרויות להתאמה אישית של התצוגה. הנה כמה דוגמאות לדוגמה שנלקחו ישירות מ- GitHub:

var scalable = New Scalable (containerEl, options);

באופן טבעי, הפרמטר הראשון הוא אלמנט המרכיב שבו אתה ממקד (באופן אידיאלי א

או משהו דומה).

פרמטר האופציות צריך לקחת מערך של מפתח => זוגות ערך. אפשרויות אלה כוללות ערכי גובה מכולה, מינימום ורוחב מרבי, יחד עם קשקשים מינימום ומקסימום (כלומר, כמה הוא יכול בקנה מידה עם אלמנטים פנימיים).

יש להסתכל על הדף הראשי הפרויקט עבור הדגמה שמיש. ניתן לגרור את פינות המכל כדי לשנות את גודל הגודל הגמיש. זה די מגניב מאז מתחת לאזור זה תמצא קוד שמיש נלקח ישירות מתוך הדף.

ישנן דרכים להתמודד עם אלמנטים גמישים עם CSS טהור בלבד. עם זאת, שיטות אלה יכולים להרגיש מתאריך והם לא מציעים שליטה רבה כמו JavaScript.

אם אתה רוצה לנסות את זה רק לתפוס עותק מ GitHub ולראות מה אתה חושב.

Scalable הוא עדיין בפיתוח פעיל אבל זה סקריפט קל לערוך לצרכים שלך.