Materialize - CSS Framework การออกแบบวัสดุ
ของ Google การออกแบบวัสดุ มีวัตถุประสงค์เพื่อให้ทำงานได้ดีบนเว็บและในแอปมือถือ มันกำลังได้รับความนิยมจากนักพัฒนาและถ้าคุณต้องการที่จะปรับมันเช่นกันมีหลายวิธีในการใช้การออกแบบวัสดุบนเว็บไซต์ของคุณ คุณสามารถใช้โพลิเมอร์หรือเชิงมุมหรือคุณสามารถใช้วัสดุ.
เป็นรูปเป็นร่าง เฟรมเวิร์ก CSS ตามหลักการออกแบบวัสดุพร้อมการสนับสนุน Sass เพื่อการพัฒนาที่ดีขึ้น มันดำเนินการจัดแต่งทรงผมเริ่มต้นสำหรับการใช้งานง่ายและมีเอกสารรายละเอียด.
คุณสามารถค้นหาส่วนประกอบที่มีประโยชน์มากมายภายใน: ไดอะล็อก, โมดัล, ตัวเลือกวันที่, ปุ่มวัสดุ, พารัลแลกซ์, การ์ดและอื่น ๆ นอกจากนี้ยังมีตัวเลือกการนำทางมากมายที่คุณสามารถเลือกได้เช่นเลื่อนลงเลื่อนลงในเมนูและแท็บ วัสดุยังใช้ ระบบ 12-grid ด้วย 3 เคียวรีสื่อบันทึกขนาดหน้าจอเริ่มต้น: ความกว้างสูงสุด 600px เป็นอุปกรณ์มือถือ, อุปกรณ์แท็บเล็ต 992px และอีกกว่า 992px ถือเป็นอุปกรณ์เดสก์ท็อป.
เริ่มต้นใช้งาน
การเริ่มต้นกับ Materialize มีสองวิธี: ใช้ CSS มาตรฐาน หรือ Sass. สามารถดาวน์โหลดทั้งสองแหล่งได้ที่นี่ นอกจากนี้คุณยังสามารถรับ bower โดยใช้คำสั่งต่อไปนี้:
ติดตั้ง bower เป็นตัวเป็นตน
หลังจากที่คุณได้รับแหล่งที่มาตรวจสอบให้แน่ใจว่าได้ทำการเชื่อมโยงอย่างถูกต้องในไฟล์โครงการของคุณหรือรวบรวมแหล่งที่มาหากคุณกำลังใช้รุ่น Sass.
คุณสมบัติ
ในส่วนนี้ฉันจะอธิบายคุณสมบัติบางอย่างที่เป็นจริงให้.
1. Sass Mixins
เฟรมเวิร์กนี้มี Sass Mixins ซึ่งจะเพิ่มคำนำหน้าเบราว์เซอร์ทั้งหมดโดยอัตโนมัติเมื่อคุณเขียนคุณสมบัติ CSS บางอย่าง มันเป็นคุณสมบัติที่ยอดเยี่ยมที่ต้องทำให้มั่นใจ เข้ากันได้กับเบราว์เซอร์ทั้งหมด, ด้วยความยุ่งยากน้อยและรหัสมากที่สุด.
ดูคุณสมบัติของแอนิเมชันต่อไปนี้:
-webkit-animation: 0.5 วินาที; -moz-animation: 0.5 วินาที; - ภาพเคลื่อนไหว: 0.5 วินาที; -ms-animation: 0.5 วินาที; นิเมชั่น: 0.5 วินาที;
บรรทัดของรหัสเหล่านั้นสามารถเขียนใหม่ด้วย Sass mixin บรรทัดเดียวดังนี้:
@ รวมภาพเคลื่อนไหว (.5s);
มีประมาณ 19 มิกซ์อินหลัก ใช้ได้ หากต้องการดูรายการทั้งหมดตรงไปที่หมวดหมู่ Sass ใน mixins แถบ.
2. ข้อความไหล
ในขณะที่เฟรมเวิร์กส่วนหน้าอื่น ๆ ใช้ข้อความที่แก้ไขแล้ว Materialize จะใช้ข้อความที่ตอบสนองได้อย่างแท้จริง ขนาดตัวอักษรและความสูงของบรรทัดจะถูกปรับขนาดอย่างมีความรับผิดชอบเพื่อรักษาความสามารถในการอ่าน เมื่อพูดถึงหน้าจอขนาดเล็กความสูงของเส้นจะถูกปรับให้ใหญ่ขึ้น.
ในการใช้ Flow Text คุณสามารถเพิ่ม การไหลของข้อความ ชั้นบนข้อความที่คุณต้องการ ตัวอย่างเช่น
นี่คือข้อความการไหล.
ชำระเงินการสาธิตที่นี่ในส่วนของข้อความไหล.
3. ระลอกคลื่นด้วยคลื่น
การออกแบบวัสดุยังมาพร้อมกับข้อเสนอแนะแบบโต้ตอบตัวอย่างหนึ่งที่น่าสังเกตคือระลอกคลื่น ใน Materialize เอฟเฟกต์นี้เรียกว่า คลื่น. โดยทั่วไปเมื่อผู้ใช้คลิกหรือแตะ / แตะปุ่มการ์ดหรือองค์ประกอบอื่น ๆ เอฟเฟกต์จะปรากฏขึ้น สามารถสร้างคลื่นได้อย่างง่ายดายโดยการเพิ่ม คลื่นผลกระทบ ชั้นบนองค์ประกอบของคุณ.
ตัวอย่างนี้ให้เอฟเฟกต์คลื่นแก่คุณ.
เสนอ
ระลอกเป็นสีเทาตามค่าเริ่มต้น แต่ในสถานการณ์ที่คุณมีพื้นหลังสีเข้มคุณอาจต้องการเปลี่ยนสี หากต้องการเพิ่มสีอื่นเพียงเพิ่ม Waves- (สี) เพื่อองค์ประกอบ แทนที่ "(สี)" ด้วยชื่อของสี.
เสนอ
คุณสามารถเลือกจาก 7 สี: แสงสีแดงสีเหลืองสีส้มสีม่วงสีเขียวและนกเป็ดน้ำ. คุณสามารถสร้างหรือปรับแต่งสีของคุณเองได้หากสีเหล่านั้นไม่ตรงกับความต้องการของคุณ.
4. เงา
ในการส่งมอบความสัมพันธ์ระหว่างองค์ประกอบการออกแบบวัสดุแนะนำให้ใช้ระดับความสูงบนพื้นผิว Materialize ส่งมอบหลักการนี้ด้วย Z-depth- (ตัวเลข) ชั้น คุณสามารถกำหนดความลึกเงาโดยเปลี่ยน (หมายเลข) จาก 1 เป็น 5:
ความลึกของเงา 3
ความลึกของเงาทั้งหมดแสดงด้วยภาพด้านล่าง.
5. ปุ่มและไอคอน
ในการออกแบบวัสดุมีปุ่มหลักสามประเภท: ปุ่มยก, fab (ปุ่มการกระทำลอย) และ ปุ่มแบน.
(1) ปุ่มยก
ปุ่มยกคือปุ่มเริ่มต้น หากต้องการสร้างปุ่มนี้เพียงเพิ่ม BTN ชั้นเรียนให้กับองค์ประกอบของคุณ หากคุณต้องการให้เอฟเฟกต์คลื่นเมื่อคลิกหรือกดให้ทำดังนี้:
ปุ่ม
หรือคุณสามารถให้ไอคอนปุ่มทางซ้ายหรือขวาของข้อความ สำหรับไอคอนคุณจะต้องเพิ่มที่กำหนดเอง แท็กด้วยชื่อคลาสและตำแหน่งของไอคอน ตัวอย่างเช่น
ดาวน์โหลด
ในตัวอย่างข้างต้นเราใช้ MDI ไฟล์ไฟล์ดาวน์โหลด คลาสสำหรับไอคอนดาวน์โหลด มีประมาณ 740 ไอคอนที่แตกต่าง คุณสามารถใช้ได้. หากต้องการดูพวกเขาตรงไปที่หน้า Sass ในแท็บไอคอน.
(2) ปุ่มลอย
สามารถสร้างปุ่มลอยได้ด้วยการต่อท้าย BTN ลอย ชั้นและไอคอนที่คุณต้องการ ตัวอย่างเช่น
ในการออกแบบวัสดุปุ่มแบนมักใช้ในกล่องโต้ตอบ หากต้องการสร้างเพียงเพิ่ม BTN แบน องค์ประกอบของคุณเช่นนั้น:
ปฏิเสธ
นอกจากนี้ปุ่มสามารถปิดการใช้งานด้วย พิการ ชั้นเรียนและทำให้ใช้ขนาดใหญ่ BTN ขนาดใหญ่ ชั้น.
6. กริด
Materialize ใช้มาตรฐาน กริดตอบสนอง 12 คอลัมน์ ระบบ. การตอบสนองแบ่งออกเป็นสามส่วน: ขนาดเล็กสำหรับมือถือขนาดกลาง (m) สำหรับแท็บเล็ตและ ใหญ่ (l) สำหรับเดสก์ท็อป.
ในการสร้างคอลัมน์ให้ใช้ s, m หรือ l เพื่อระบุขนาดตามด้วยหมายเลขกริด ตัวอย่างเช่นเมื่อคุณต้องการสร้างเค้าโครงครึ่งขนาดสำหรับอุปกรณ์มือถือคุณควรรวม S6 ชั้นเรียนในรูปแบบของคุณ. S6 หมายถึง ขนาดเล็ก 6 ซึ่งหมายถึง 6 คอลัมน์บนอุปกรณ์ขนาดเล็ก.
คุณจะต้องรวม เทือกเขา ชั้นเรียนในรูปแบบที่คุณสร้างและวางไว้ในองค์ประกอบที่มี แถว ชั้น นี่คือรูปแบบที่สามารถใส่ลงในคอลัมน์ได้อย่างถูกต้อง นี่คือตัวอย่าง:
ฉันมี 12 คอลัมน์หรือเต็มความกว้างที่นี่4 คอลัมน์ (หนึ่งในสาม) ที่นี่4 คอลัมน์ (หนึ่งในสาม) ที่นี่4 คอลัมน์ (หนึ่งในสาม) ที่นี่
นี่คือผลลัพธ์:
โดยค่าเริ่มต้น, col s12 มีขนาดคงที่และปรับให้เหมาะสมสำหรับทุกขนาดหน้าจอโดยทั่วไปเหมือนกับ col s12 m12 l12. แต่ถ้าคุณต้องการระบุขนาดของคอลัมน์สำหรับอุปกรณ์ต่าง ๆ สิ่งที่คุณต้องทำคือการแสดงขนาดเพิ่มเติมเช่น:
ความกว้างของฉันมี 12 คอลัมน์ทุกที่เสมอฉันมี 12 คอลัมน์บนมือถือ, 6 แท็บเล็ตและ 9 บนเดสก์ท็อป
นี่คือสิ่งที่ดูเหมือนว่า:
คุณสมบัติเหล่านี้เป็นเพียงบางส่วนของ Materialize เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติอื่น ๆ ของพวกเขาตรงไปที่หน้าเอกสาร.
