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

โครงกระดูกมีสองประเภท - แบบอินไลน์และแบบสแตนด์อโลน:

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

เราได้สร้างส่วนประกอบสี่เหลี่ยมผืนผ้าที่ใช้ความกว้าง ความสูง และชื่อคลาสที่กำหนดเอง แอนิเมชั่น CSS เล็กน้อยจะเพิ่มเอฟเฟกต์พัลส์ที่ดีให้กับมัน

ตอนนี้ เราสามารถใช้มันในคำสั่งโครงสร้าง และสร้างสี่เหลี่ยมได้มากเท่าที่เราต้องการ:

มีอินพุตหลายตัว: loadingสถานะ จำนวนสี่เหลี่ยมที่จะแสดง ความกว้างและความสูง และคลาสที่กำหนดเอง เราแสดงส่วนประกอบสี่เหลี่ยมผืนผ้าตามอินพุตที่ให้ไว้เมื่อloadingคุณสมบัติเป็นtrue; มิฉะนั้น เราแสดงเทมเพลต

ตอนนี้เราสามารถใช้งานได้ในเทมเพลตของเรา:

อะไรต่อไป

นี่เป็นการสาธิตเพียงเล็กน้อยว่าเราจะทำอะไรได้บ้างกับคำสั่งเชิงโครงสร้าง แนวคิดเพิ่มเติมบางส่วนอยู่ด้านล่าง:

เราสามารถเพิ่มtypeอินพุตและแสดงผลรูปร่างที่กำหนดไว้ล่วงหน้าต่างๆ ได้ เช่นcardโครงกระดูก

เราสามารถปรับปรุงคำสั่งของเราเพื่อรองรับสถานะข้อผิดพลาด

ติดตามฉันบนสื่อหรือTwitterเพื่ออ่านเพิ่มเติมเกี่ยวกับ Angular และ JS!