Angular Material คืออะไรและจะนำไปใช้งานได้อย่างไร?

ส่วนประกอบ UI / UX ใน Angular เรียกว่า วัสดุเชิงมุม พวกเขาช่วยแอปพลิเคชั่นเชิงมุมทำงาน อย่างมีประสิทธิภาพ . อย่างไรก็ตามหากคุณยังไม่ทราบนี่คือบทความที่จะช่วยให้คุณเรียนรู้รายละเอียดเกี่ยวกับวัสดุเชิงมุม นอกจากนี้ to รับความรู้เชิงลึกเกี่ยวกับ Angular พิจารณาลงทะเบียนเรียน ' จาก Edureka

ในบทความนี้ฉันจะพูดถึงหัวข้อต่อไปนี้:

• ข้อมูลเบื้องต้นเกี่ยวกับวัสดุเชิงมุม
• การติดตั้งวัสดุเชิงมุม
• ส่วนประกอบวัสดุเชิงมุม
  • การนำทาง
    1. แถบเครื่องมือ
    2. เมนู
  • การควบคุมแบบฟอร์ม
    1. ฟิลด์แบบฟอร์ม
    2. ปุ่มตัวเลือก
• CDK วัสดุเชิงมุม
  • ช่องข้อความ

ข้อมูลเบื้องต้นเกี่ยวกับวัสดุเชิงมุม

วัสดุ ถูกนำมาใช้เป็นภาษาออกแบบที่พัฒนาโดย Google ในปี 2014 การออกแบบวัสดุ เป็นเครื่องมือสำหรับเฟรมเวิร์กส่วนหน้าซึ่งช่วยคุณได้ ภาพ , การเคลื่อนไหว และ ปฏิสัมพันธ์ ออกแบบ. นอกจากนี้ยังช่วยให้คุณปรับเปลี่ยนอุปกรณ์ต่างๆและขนาดหน้าจอที่แตกต่างกัน ขั้นแรกมันถูกแท็กไปที่ AngularJS เพื่อทำให้แอพเหล่านี้มีมากขึ้น น่าสนใจ และดำเนินการ เร็วขึ้น . จากนั้น Google เขียนโค้ดใหม่ทั้งหมดตั้งแต่เริ่มต้นและลบ JS นั่นคือ และตั้งชื่อมัน ในเดือนกันยายน 2016 ต่อมา Google ได้ติดแท็ก Material Design เป็น Angular ซึ่งใช้ และตั้งชื่อมันว่า Angular Materials

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

การติดตั้งวัสดุเชิงมุม

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

ของ add @ angular / material

ขั้นแรกระบบจะขอให้คุณเลือกชื่อธีมที่สร้างไว้ล่วงหน้าหรือธีมที่กำหนดเอง

คุณต้องเลือกธีมที่สร้างไว้ล่วงหน้า“ คราม / ชมพู” ซึ่งเป็นธีมเริ่มต้นเพื่อจัดสไตล์แอปพลิเคชันของคุณ คุณยังสามารถเลือกธีม 'กำหนดเอง' เพื่อปรับแต่งไฟล์ธีมของคุณซึ่งรวมถึงสไตล์ทั่วไปทั้งหมด

ถัดไประบบจะขอให้คุณตั้งค่า HammerJS . HammerJS เป็นไลบรารียอดนิยมซึ่งส่วนใหญ่ใช้ในแอปพลิเคชัน Angular เพิ่มการรองรับท่าทางสัมผัสเช่น Swipe, Pan, Pinch, Rotate และอื่น ๆ อีกมากมายโดยเฉพาะในแอปพลิเคชันมือถือ

คุณสามารถเลือก“ ใช่” หรือ“ ไม่” ก็ได้ HammerJS มีประโยชน์เมื่อคุณใช้แอปพลิเคชันบนโทรศัพท์มือถือ เนื่องจากโทรศัพท์มือถือมีจอสัมผัสท่าทางเหล่านี้จึงมีประโยชน์มากกว่าและอาจดูทันสมัยในแอปพลิเคชันมือถือของคุณ

หลังจากที่คุณเลือกตัวเลือกแล้วระบบจะขอให้คุณตั้งค่าต่อไป ภาพเคลื่อนไหวของเบราว์เซอร์ สำหรับวัสดุเชิงมุม

คุณต้องเลือก“ ใช่” เพื่อให้คุณสามารถใช้ภาพเคลื่อนไหวบนแอปพลิเคชันของคุณได้ Angular Animations ทำให้แอปพลิเคชันของคุณสนุกและใช้งานง่ายขึ้น ซึ่งสามารถปรับปรุงแอปและประสบการณ์ผู้ใช้ของคุณซึ่งดึงดูดความสนใจของผู้ใช้

จากนั้นสิ่งนี้จะติดตั้ง Angular Materials ในแอปพลิเคชันของคุณ

ส่วนประกอบวัสดุเชิงมุม

ดังที่ได้กล่าวไว้ก่อนหน้านี้ส่วนประกอบของวัสดุเชิงมุมนั้นไม่มีอะไรนอกจาก UI / UX ส่วนประกอบการออกแบบ ประกอบด้วยส่วนประกอบต่างๆเช่นการควบคุมฟอร์มการนำทางปุ่มและตัวบ่งชี้ป๊อปอัปและอื่น ๆ อีกมากมาย ส่วนประกอบเหล่านี้ช่วยให้คุณใช้รูปแบบตามข้อกำหนดการออกแบบวัสดุ

ในขั้นต่อไปเรามาดูตัวอย่างวิธีการนำส่วนประกอบเหล่านี้ไปใช้ในแอปพลิเคชัน Angular ของคุณ

การนำทาง

ก่อนอื่นฉันจะพูดถึงส่วนประกอบในการนำทาง

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

คุณต้องพิมพ์รหัสต่อไปนี้ในไฟล์ app.component.html ไฟล์เพื่อใช้ส่วนประกอบ Toolbar ในแอปพลิเคชันของคุณ

 การสอนวัสดุเชิงมุม 

เป็นภาชนะจากวัสดุเชิงมุมที่ใช้สำหรับส่วนหัวและชื่อเรื่อง สีของ สามารถเปลี่ยนภาชนะได้โดยใช้ สี ทรัพย์สิน.ตามค่าเริ่มต้นแถบเครื่องมือจะใช้สีพื้นหลังที่เป็นกลางตามธีมปัจจุบันเช่นสีอ่อนหรือสีเข้มคุณสามารถเลือกธีมเริ่มต้นได้สามแบบ ได้แก่ : 'หลัก' , 'สำเนียง' , หรือ 'เตือน' .ในการใช้แถบเครื่องมือนี้คุณต้องนำเข้าก่อน app.module.ts ไฟล์จากวัสดุเชิงมุมโดยใช้คำสั่งต่อไปนี้:

นำเข้า {MatToolbarModule} จาก '@ angular / material'

ในภายหลังคุณต้องเพิ่มโมดูลนี้ในไฟล์ การนำเข้า: [] ส่วนที่อยู่ใน app.module.ts ไฟล์.

การนำเข้า: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

สำหรับ Mat-Toolbar คุณต้องเพิ่ม“ MatToolbarModule ”.

ตอนนี้ให้บริการโครงการของคุณโดยใช้คำสั่งต่อไปนี้:

ของการให้บริการ -o

สิ่งนี้จะเปิดโครงการของคุณบนเบราว์เซอร์เริ่มต้นของระบบของคุณดังที่แสดงด้านล่าง:

หากคุณต้องการเปลี่ยนสีของแถบเครื่องมือตามที่คุณเลือกคุณสามารถทำได้โดยใช้สไตล์ชีท CSS ให้ฉันดูตัวอย่าง

ขั้นแรกคุณต้องลบ สี คุณสมบัติจาก จากนั้นพิมพ์ต่อไปนี้ CSS รหัสใน app.component.css ไฟล์.

mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}

ตอนนี้ให้บริการโครงการของคุณเพื่อดูผลลัพธ์

• เมนู

ต่อไปฉันจะพูดถึงส่วนประกอบของเมนู คุณต้องพิมพ์รหัสต่อไปนี้ในไฟล์ app.component.html ไฟล์.

 การสอนวัสดุเชิงมุม วิธีใช้การตั้งค่าเมนู

มาเพิ่มสไตล์ในไฟล์ เมนู ปุ่ม. คุณต้องพิมพ์รหัสต่อไปนี้ในไฟล์ app.component.css ไฟล์.

.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}

class =” space” ใช้เพื่อเพิ่มระยะห่างระหว่าง“ ชื่อแถบเครื่องมือ” และ“ ตัวเลือกเมนู”

ในกรณีที่คุณไม่คุ้นเคยกับสไตล์ชีต CSS คุณสามารถอ้างถึงบล็อกของเราได้ที่ เพื่อรับข้อมูลเชิงลึก

เช่นเดียวกับ Toolbar เพื่อใช้ และ คุณต้องทำตามขั้นตอนเดียวกับข้างต้นเพื่อนำเข้า MatMenuModule และ MatButtonModule จาก วัสดุเชิงมุม และเพิ่มเข้าไป การนำเข้า: [] ส่วนที่อยู่ใน app.module.ts ไฟล์.

ให้บริการโครงการของคุณตอนนี้เพื่อแสดงผลลัพธ์

การควบคุมแบบฟอร์ม

ตอนนี้ฉันจะพูดถึงส่วนประกอบใน Form Control

• ฟิลด์แบบฟอร์ม

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

คุณต้องพิมพ์รหัสต่อไปนี้ในไฟล์ app.component.html เพื่อใช้คอมโพเนนต์ Form-Field ในแอปพลิเคชันของคุณ

 
การควบคุมแบบฟอร์ม
ชื่อ

ตามปกติคุณต้องนำเข้า MatFormFieldModule และ MatInputModule และเพิ่มเข้าไป การนำเข้า: [] ส่วนที่อยู่ใน app.module.ts ไฟล์. โดยทั่วไปรหัสข้างต้นจะใช้ในการป้อนชื่อเช่น 'ชื่อ' 'นามสกุล' ฯลฯ คุณยังสามารถใช้โปรแกรมตรวจสอบความถูกต้องและกำหนดฟิลด์ที่จำเป็นได้อีกด้วย ตัวอย่างเช่นคุณสามารถใช้สำหรับฟิลด์อีเมล คุณสามารถซ่อนหรือยกเลิกการซ่อนข้อความสำหรับรหัสผ่าน สำหรับการอ้างอิงโปรดดูรหัสด้านล่าง:

ป้อนอีเมลของคุณ {{getErrorMessage ()}} ป้อนรหัสผ่านของคุณ {{hide? 'visibility_off': 'visibility'}}

ในไฟล์ app.component.css คุณต้องเพิ่มรหัสต่อไปนี้:

.example-container {padding-left: 50px}

ตอนนี้ในไฟล์ app.component.ts คุณต้องนำเข้าไฟล์ FormControl และ ผู้ตรวจสอบ จาก @ เชิงมุม / แบบฟอร์ม ไดเรกทอรี

นำเข้า {FormControl, Validators} จาก '@ angular / form'

คุณต้องเพิ่มข้อความเพื่อแสดงข้อผิดพลาดภายในคลาสต่อไปนี้

ส่งออกคลาส AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'คุณต้องป้อนค่า': this.email.hasError ('email')? 'ไม่ใช่อีเมลที่ถูกต้อง': ''} hide = true}

อ้างอิงถึงขั้นตอนข้างต้นคุณต้องพิมพ์รหัสต่อไปนี้ในไฟล์ app.module.ts ไฟล์เพื่อนำเข้าโมดูลที่จำเป็น

นำเข้า {FormsModule, ReactiveFormsModule} จากการนำเข้า '@ angular / รูปแบบ' {MatIconModule} จาก '@ angular / material'

ในภายหลังคุณต้องเพิ่มโมดูลเหล่านี้ใน การนำเข้า: [] มาตรา.

• ปุ่มตัวเลือก

โดยทั่วไปปุ่มวิทยุจะใช้เพื่อเลือกตัวเลือกจากตัวเลือกต่างๆ คุณสามารถตรวจสอบรหัสต่อไปนี้เพื่อใช้อ้างอิง

สำหรับ app.component.html ไฟล์,

 
เพศ
เพศชายเพศหญิง

สำหรับ app.component.css ไฟล์,

mat-radio-button {Padding-left: 50px}

ตอนนี้คุณต้องนำเข้า MatRadioModule และเพิ่มเข้าไป การนำเข้า: [] ส่วนที่อยู่ใน app.module.ts ไฟล์.

หลังจากนั้นคุณต้องให้บริการโครงการของคุณเพื่อแสดงผลลัพธ์

ต่อไปฉันจะพูดถึง Angular Material CDK

CDK วัสดุเชิงมุม

CDK หรือที่เรียกว่า ส่วนประกอบ Dev Kit เป็นห้องสมุดของ พฤติกรรมที่กำหนดไว้ล่วงหน้า ใน Angular Material ซึ่งเป็นชุดเครื่องมือที่ใช้ร่วมกัน รูปแบบการโต้ตอบ และ คุณสมบัติการใช้งาน . ไม่มีรูปแบบเฉพาะสำหรับดีไซน์ Material มาดูตัวอย่างของ CDK

• ช่องข้อความ

องค์ประกอบฟิลด์ข้อความมียูทิลิตี้สำหรับการทำงานกับช่องป้อนข้อความ คุณสามารถใช้คอมโพเนนต์ CDK บนฟิลด์ข้อความเพื่อปรับขนาดอินพุต มาดูตัวอย่างวิธีการใช้งานกัน

สำหรับ app.component.html ไฟล์,

 
CDK วัสดุเชิงมุม
ขนาดตัวอักษร 10px 12px 14px 16px 18px 20px Autosize textarea

สำหรับ app.component.ts คุณต้องนำเข้าส่วนประกอบที่จำเป็นก่อน

นำเข้า {CdkTextareaAutosize} จากการนำเข้า '@ angular / cdk / text-field' {NgZone, ViewChild} จากการนำเข้า '@ angular / core' {take} จาก 'rxjs / operator'

ตอนนี้คุณต้องพิมพ์รหัสต่อไปนี้ในชั้นเรียน

วิธีใช้คลาสสแกนเนอร์

ส่งออกคลาส AppComponent {constructor (ส่วนตัว _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (จริง))}}

ถัดไปคุณต้องนำเข้า MatSelectModule และเพิ่มเข้าไป การนำเข้า: [] ส่วนที่อยู่ใน app.module.ts ไฟล์.

สุดท้ายคุณต้องให้บริการโครงการของคุณเพื่อแสดงผลลัพธ์

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

เพียงเท่านี้ฉันก็ขอจบบล็อกของฉัน ฉันหวังว่าคุณจะมีความชัดเจนเกี่ยวกับพื้นฐานของ Angular Materialหากคุณมีข้อสงสัยหรือข้อสงสัยเกี่ยวกับบทความนี้อย่าลังเลที่จะโพสต์ไว้ในส่วนความคิดเห็นด้านล่าง

หากคุณต้องการเรียนรู้ทั้งหมดที่คุณเพิ่งเรียนรู้จากบล็อกนี้และข้อมูลเพิ่มเติม เชิงมุม และมุ่งมั่นในอาชีพของคุณไปสู่ ​​Angular Developer ที่มีความเชี่ยวชาญจากนั้นพิจารณาลงทะเบียนสำหรับไฟล์ ' .

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'Angular Material' และเราจะติดต่อกลับโดยเร็วที่สุด