วัสดุเชิงมุม - วิดเจ็ต

Angular Material มีไลบรารีของวิดเจ็ต UI มากมาย สิ่งนี้ช่วยให้ผู้ใช้มีความสามารถในการโต้ตอบขั้นสูงกับแอปพลิเคชัน

ตารางต่อไปนี้แสดงรายการวิดเจ็ตที่สำคัญสองสามรายการพร้อมคำอธิบาย -

ซีเนียร์ No วิดเจ็ตและคำอธิบาย
1 ปุ่มต่างๆ

md-buttonAngular Directive คือคำสั่งปุ่มที่มีระลอกหมึกเสริม (และเปิดใช้งานโดยค่าเริ่มต้น) ถ้าhref หรือ ng-href มีการระบุแอตทริบิวต์จากนั้นคำสั่งนี้จะทำหน้าที่เป็นองค์ประกอบยึด

2 CheckBoxes

md-checkboxAngular Directive ใช้เป็นตัวควบคุมช่องทำเครื่องหมาย

3 เนื้อหา

md-contentAngular Directive เป็นองค์ประกอบคอนเทนเนอร์และใช้สำหรับเนื้อหาที่เลื่อนได้ layout-padding สามารถเพิ่มแอตทริบิวต์เพื่อให้มีเนื้อหาที่มีเบาะ

4 เลือกวันที่

md-datepickerAngular Directive คือตัวควบคุมอินพุตเพื่อเลือกวันที่ นอกจากนี้ยังรองรับ ngMessages สำหรับการตรวจสอบอินพุต

5 ไดอะล็อก

md-dialogAngular Directive เป็นองค์ประกอบคอนเทนเนอร์และใช้เพื่อแสดงกล่องโต้ตอบ องค์ประกอบของมันmd-dialog-content มีเนื้อหาของกล่องโต้ตอบและไฟล์ md-dialog-actions มีหน้าที่รับผิดชอบในการโต้ตอบ

mdDialogซึ่งเป็นบริการเชิงมุมจะเปิดกล่องโต้ตอบบนแอปพลิเคชันเพื่อแจ้งให้ผู้ใช้ทราบและช่วยในการตัดสินใจ

6 ตัวแบ่ง

md-dividerAngular Directive เป็นองค์ประกอบของกฎและใช้เพื่อแสดงกฎน้ำหนักเบาบาง ๆ เพื่อจัดกลุ่มและแบ่งเนื้อหาภายในรายการและเค้าโครงหน้า

7 รายการ

md-listคำสั่งเชิงมุมคือส่วนประกอบคอนเทนเนอร์ที่มี md-list-itemองค์ประกอบตอนเป็นเด็ก คำสั่ง md-list-item เป็นส่วนประกอบคอนเทนเนอร์สำหรับไอเท็มแถวของ md-list container คลาส CSSmd-2-line และ md-3-line สามารถเพิ่มลงใน md-list-item เพื่อเพิ่มความสูงของแถวด้วย 22px และ 40px ตามลำดับ

8 เมนู

md-menuคำสั่งเชิงมุมเป็นส่วนประกอบในการแสดงตัวเลือกเพิ่มเติมภายในบริบทของการดำเนินการ md-menuมีองค์ประกอบลูกสองอย่าง องค์ประกอบแรกคือtrigger elementและใช้เพื่อเปิดเมนู องค์ประกอบที่สองคือmd-menu-contentเพื่อแสดงเนื้อหาของเมนูเมื่อเปิดเมนู md-menu-content มักจะมีรายการเมนูเป็น md-menu-item

9 แถบเมนู

md-menu-barเป็นส่วนประกอบคอนเทนเนอร์สำหรับเก็บหลายเมนู แถบเมนูช่วยในการสร้างเอฟเฟกต์เมนูที่จัดเตรียมไว้ให้ระบบปฏิบัติการ

10 แถบความคืบหน้า

md-progress-circular และ md-progress-linear เป็นคำสั่งความคืบหน้าเชิงมุมและใช้เพื่อแสดงข้อความการโหลดเนื้อหาในแอปพลิเคชัน

11 ปุ่มวิทยุ

md-radio-group และ md-radio-buttonคำสั่งเชิงมุมใช้เพื่อแสดงปุ่มตัวเลือกในแอปพลิเคชัน md-radio-group คือคอนเทนเนอร์การจัดกลุ่มสำหรับองค์ประกอบปุ่ม md-radio

12 เลือก

md-selectคำสั่งเชิงมุมใช้เพื่อแสดงกล่องเลือกที่ล้อมรอบด้วย ng-model

13 แถบเครื่องมือ Fab

md-fab-toolbarคำสั่งเชิงมุมใช้เพื่อแสดงแถบเครื่องมือขององค์ประกอบหรือปุ่มต่างๆสำหรับการเข้าถึงการกระทำทั่วไปอย่างรวดเร็ว

14 แถบเลื่อน

md-sliderคำสั่งเชิงมุมใช้เพื่อแสดงองค์ประกอบช่วง มีสองโหมด -

  • normal- ผู้ใช้สามารถเลื่อนไปมาระหว่างค่าต่างๆได้ ค่าเริ่มต้น.

  • discrete- ผู้ใช้สามารถเลื่อนระหว่างค่าที่เลือก ในการเปิดใช้งานโหมดไม่ต่อเนื่องให้ใช้แอตทริบิวต์ md-discrete และ step

15 แท็บ

md-tabs และ md-tabคำสั่งเชิงมุมใช้เพื่อแสดงแท็บในแอปพลิเคชัน md-tabs คือการจัดกลุ่มคอนเทนเนอร์สำหรับองค์ประกอบ md-tab

16 แถบเครื่องมือ

md-toolbarคำสั่งเชิงมุมใช้เพื่อแสดงแถบเครื่องมือซึ่งโดยปกติจะเป็นพื้นที่เหนือเนื้อหาเพื่อแสดงชื่อเรื่องและปุ่มที่เกี่ยวข้อง

17 คำแนะนำเครื่องมือ

Angular Material มีวิธีการพิเศษต่างๆเพื่อแสดงคำแนะนำเครื่องมือที่ไม่สร้างความรำคาญให้กับผู้ใช้ Angular Material มีวิธีในการกำหนดทิศทางสำหรับพวกเขาและคำสั่ง md-tooltip ใช้เพื่อแสดงคำแนะนำเครื่องมือ คำแนะนำเครื่องมือจะเปิดใช้งานเมื่อใดก็ตามที่ผู้ใช้โฟกัสวางเมาส์เหนือหรือแตะส่วนประกอบหลัก

18 ชิป

md-chipsAngular Directive ใช้เป็นส่วนประกอบพิเศษที่เรียกว่าชิปและสามารถใช้เพื่อแสดงข้อมูลชุดเล็ก ๆ เช่นผู้ติดต่อแท็กเป็นต้นแม่แบบที่กำหนดเองสามารถใช้เพื่อแสดงเนื้อหาของชิป สิ่งนี้สามารถทำได้โดยการระบุองค์ประกอบ md-chip-template ที่มีเนื้อหาที่กำหนดเองเป็นลูกของ md-chips

19 ชิปติดต่อ

md-contact-chipsAngular Directive คือตัวควบคุมอินพุตที่สร้างขึ้นบนชิป md และใช้ไฟล์ md-autocompleteธาตุ. ส่วนประกอบชิปผู้ติดต่อยอมรับนิพจน์เคียวรีซึ่งส่งคืนรายชื่อผู้ติดต่อที่เป็นไปได้ ผู้ใช้สามารถเลือกหนึ่งในสิ่งเหล่านี้และเพิ่มลงในรายการชิปที่พร้อมใช้งาน