สร้างองค์ประกอบการปรับขนาดอัตโนมัติด้วย Scalable.js

หากคุณต้องการ สร้างองค์ประกอบที่ยืดหยุ่นที่เติมตู้คอนเทนเนอร์โดยอัตโนมัติ ฉันขอแนะนำให้ปรับขนาดได้ สคริปต์ JS โอเพนซอร์สฟรีนี้เหมาะสำหรับการสร้างการออกแบบที่ลื่นไหลโดยไม่ต้องเครียด.

ทุกอย่างในไลบรารี Scalable.js นั้นมีความอ่อนตัวคุณจึงสามารถเปลี่ยนสไตล์ขนาดตำแหน่งและเนื้อหาภายในของคอนเทนเนอร์ได้ ต้องการองค์ประกอบที่จัดชิดกับด้านบนหรือด้านล่างของหน้า? Scalable มีตัวเลือกสำหรับสิ่งนั้น.

ดู repo ของ GitHub เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการทำงานของมัน.

ในรูปแบบพื้นฐานที่สุดสคริปต์นี้ใช้องค์ประกอบหน้าเป้าหมายพร้อมกับตัวเลือกบางอย่างสำหรับปรับแต่งการแสดงผล นี่คือตัวอย่างโค้ดที่นำมาจาก GitHub โดยตรง:

var scalable = new Scalable (containerEl, ตัวเลือก);

โดยปกติแล้วพารามิเตอร์แรกคือองค์ประกอบคอนเทนเนอร์ใดที่คุณกำลังกำหนดเป้าหมาย

หรือสิ่งที่คล้ายกัน).

พารามิเตอร์ options ควรใช้อาร์เรย์ของคู่ key => value ตัวเลือกเหล่านี้รวมถึง ค่าความสูงของภาชนะ, ความกว้างขั้นต่ำและสูงสุด, พร้อมกับขนาดของขั้นต่ำและสูงสุด (กล่าวคือสามารถปรับขนาดได้ด้วยองค์ประกอบภายใน).

ดูที่หน้าโครงการหลักสำหรับการสาธิตที่ใช้งานได้ คุณสามารถลากมุมของคอนเทนเนอร์เพื่อปรับขนาดรายการที่มีความยืดหยุ่นโดยอัตโนมัติ ที่นี่ค่อนข้างเย็นตั้งแต่ด้านล่างคุณจะพบ รหัสที่ใช้งานได้ นำโดยตรงจากหน้า.

มีวิธีจัดการองค์ประกอบที่ยืดหยุ่นด้วย CSS ที่บริสุทธิ์ อย่างไรก็ตามวิธีการเหล่านี้อาจรู้สึกล้าสมัยและไม่มีการควบคุมมากเท่ากับ JavaScript.

หากคุณต้องการลองใช้งานเพียงหยิบสำเนาจาก GitHub แล้วดูว่าคุณคิดอย่างไร.

Scalable ยังอยู่ในระหว่างการพัฒนา แต่มันก็เป็นสคริปต์ที่ง่ายต่อการแก้ไขสำหรับความต้องการของคุณ.