วัสดุเชิงมุม - วิดเจ็ต
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คำสั่งเชิงมุมใช้เพื่อแสดงองค์ประกอบช่วง มีสองโหมด -
|
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ธาตุ. ส่วนประกอบชิปผู้ติดต่อยอมรับนิพจน์เคียวรีซึ่งส่งคืนรายชื่อผู้ติดต่อที่เป็นไปได้ ผู้ใช้สามารถเลือกหนึ่งในสิ่งเหล่านี้และเพิ่มลงในรายการชิปที่พร้อมใช้งาน |