ตอบสนองการรวม MDL ทำปฏิกิริยากับ Material Design Lite

Google เพิ่งเปิดห้องสมุดชื่อ Material Design Lite ซึ่งเป็นทรัพยากรส่วนหน้าสำหรับนักพัฒนา โดยจะกำหนดรูปแบบเว็บไซต์ใด ๆ โดยอัตโนมัติโดยใช้แนวทางการออกแบบวัสดุด้วย CSS และ JS ที่สร้างไว้ล่วงหน้า.

นี่เป็นกรอบงานยอดนิยมสำหรับโครงการ dev ทั่วไป React MDL รวมกรอบงานของ Google เข้ากับห้องสมุด React เพื่อสร้างทรัพยากรส่วนหน้าที่โค้งมน.

การออกแบบวัสดุของ Google นั้นชัดเจนว่าอนาคตของ UI / UX ในโลกของ Google และด้วย Material Design Lite มันง่ายกว่าที่เคยในการนำคุณสมบัติเหล่านี้ไปใช้กับเว็บไซต์ใด ๆ ที่มีไลบรารี่โอเพนซอร์สที่เป็นกรรมสิทธิ์.

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

นี่คือตัวอย่างเทมเพลตบทความเพื่อให้คุณรู้สึกว่าหน้าตานี้เป็นอย่างไร.

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

คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับ Material Design Lite ได้จาก repo ของ GitHub หากคุณต้องการเรียนรู้เพิ่มเติม จากตรงนั้นคุณสามารถดาวน์โหลด raw CSS และ JS เพื่อนำไปใช้ในหน้าของคุณซึ่งรองรับเบราว์เซอร์ที่ทันสมัยและการเสื่อมสภาพที่ดีโดยอัตโนมัติ.

น่าเสียดายเนื่องจาก React MDL ยังค่อนข้างใหม่จึงไม่ได้รับการสนับสนุนอย่างเต็มที่สำหรับส่วนประกอบทั้งหมด.

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

ฉันจะ ไม่ แนะนำให้เรียนรู้ React MDL จนกว่าคุณจะรู้สึกสบายใจกับห้องสมุดทั้งสอง.

Material Design Lite suite นั้นค่อนข้างง่ายในการเริ่มต้น แต่ React นั้นซับซ้อนกว่ามาก.

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

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

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

คุณสามารถหาข้อมูลเพิ่มเติมได้จากหน้า React MDL GitHub หากคุณต้องการศึกษาแหล่งที่มาและดำน้ำ.