מהו חומר זוויתי וכיצד ליישם אותו?

רכיבי UI / UX בזוויתית, ידועים בשם חומרים זוויתיים. הֵםלעזור ליישומים זוויתיים לבצע ביעילות . עם זאת, אם אינך מודע להם עדיין, הנה מאמר שיעזור לך ללמוד חומרים זוויתיים בפירוט. כמו כן, to לקבל ידע מעמיק ב- Angular, שקול להירשם ל ' מאדוריקה.

במאמר זה אעבור על הנושאים הבאים:

• מבוא לחומרים זוויתיים
• התקנת חומרים זוויתיים
• רכיבי חומר זוויתי
  • ניווט
    1. סרגל כלים
    2. תַפרִיט
  • בקרות טופס
    1. שדה טופס
    2. כפתור רדיו
• חומר זוויתי CDK
  • שדה טקסט

מבוא לחומרים זוויתיים

חומרים הוצגו כשפת עיצוב שפותחה על ידי גוגל בשנת 2014. עיצוב חומר הוא כלילמסגרות חזיתיות, שעוזרות לך עם חָזוּתִי , תְנוּעָה , ו אינטראקציה לְעַצֵב. זה גם עוזר לך להסתגל בין מכשירים שונים וגדלי מסך שונים. ראשית, זה תויג ל- AngularJS כדי להפוך את היישומים האלה ליותר מוֹשֵׁך ולהופיע מהר יותר . לאחר מכן, גוגל כתבה מחדש את הקוד מאפס והסירה את JS כלומר. , ושמו לו בספטמבר 2016. מאוחר יותר, גוגל תייגה את העיצוב החומר ל- Angular, המשתמש בו , וכינה אותו חומרים זוויתיים.

חומרים זוויתיים או רכיבי ממשק משתמש (UI) עוזרים לך לעצב את היישום שלך ב- מובנה דֶרֶך. הם מושכים משתמשים ועושים את זה קל יותר לגשת האלמנטים או הרכיבים הקיימים ביישום שלך. הם גם עוזרים בעיצוב היישומים שלך בצורה אטרקטיבית, ייחודית סגנונות ו צורות . רכיבים אלה עוזרים בהפיכת היישום שלך ליותר עִקבִי , מָהִיר , מגוון ואפילו עיצוב מגיב אתרים.

התקנת חומרים זוויתיים

עכשיו, נתחיל בהדרכה מהירה כיצד להתקין חומרים זוויתיים. ראשית, ודא שהתקנת Angular במערכת שלך. אם אינך מכיר את Angular, עיין בקישור ב . לאחר שהכל מוגדר, תוכל להוסיף חומרים זוויתיים לפרויקט שלך באמצעות הפקודה הבאה:

של להוסיף @ זוויתי / חומר

ראשית, הוא יבקש ממך לבחור שם נושא שנבנה מראש או נושא מותאם אישית.

עליך לבחור את ערכת הנושא הבנויה מראש 'אינדיגו / ורוד' שהיא נושא ברירת המחדל לעיצוב היישום שלך. אתה יכול גם לבחור את ערכת הנושא 'מותאמת אישית' כך שתוכל להתאים אישית את קבצי העיצוב שלך הכוללים את כל הסגנונות הנפוצים.

לאחר מכן, הוא יבקש ממך להגדיר האמר JS . HammerJS היא ספרייה פופולרית, המשמשת בעיקר ביישום Angular. זה מוסיף תמיכה בתנועות מגע כמו החלקה, פאן, קמצוץ, סיבוב ורבים נוספים, במיוחד ביישומים ניידים.

אתה יכול לבחור באפשרות 'כן' או 'לא'. HammerJS יכול להיות שימושי כאשר אתה משתמש ביישום שלך בניידים. מכיוון שהניידים מציעים תצוגות מגע, מחוות אלו יעילות יותר ועשויות להיראות אופנתיות ביישום הנייד שלך.

לאחר שתבחר בבחירתך, הבא היא תבקש ממך להגדיר אנימציות דפדפן לחומר זוויתי.

עליך לבחור 'כן' כדי שתוכל להשתמש באנימציות ביישום שלך. אנימציות זוויתיות הופכות את היישום שלך למהנה יותר וקל יותר לשימוש. זה יכול לשפר את האפליקציה ואת חוויית המשתמש שלך שמושכת את תשומת לב המשתמשים.

לאחר מכן, הדבר יתקין חומרים זוויתיים ביישום שלך.

רכיבי חומר זוויתי

כאמור, רכיבי חומרים זוויתיים אינם אלא ממשק משתמש / UX רכיבי עיצוב. הם מכילים מגוון רחב של רכיבים כמו בקרות טופס, ניווט, לחצנים ואינדיקטורים, חלונות קופצים ורבים אחרים. רכיבים אלה עוזרים לך ליישם דפוסים על פי המפרט לעיצוב חומרים.

בהמשך, בואו נראה כמה דוגמאות כיצד ליישם רכיבים אלה ביישום הזוויתי שלכם.

ניווט

ראשית, אדון ברכיבים בניווט.

• סרגל כלים

עליך להקליד את הקוד הבא ב- app.component.html להשתמש ברכיב סרגל הכלים ביישום שלך.

 מדריך חומרים זוויתי 

הוא מיכל מחומר זוויתי המשמש לכותרות וכותרות. הצבע של ניתן לשנות את המכולה באמצעות צֶבַע תכונה.כברירת מחדל, סרגלי כלים משתמשים בצבע רקע ניטרלי המבוסס על הנושא הנוכחי כלומר בהיר או כהה.אתה יכול לבחור שלושה נושאי ברירת מחדל שהם: 'יְסוֹדִי' , 'מִבטָא' , או 'לְהַזהִיר' .כדי להשתמש בסרגל כלים זה, תחילה עליך לייבא אותו פנימה app.module.ts קובץ מחומרים זוויתיים באמצעות הפקודה הבאה:

ייבא את {MatToolbarModule} מ- '@ angular / material'

מאוחר יותר, עליך להוסיף מודול זה גם ב- יבוא: [] החלק הממוקם ב app.module.ts קוֹבֶץ.

יבוא: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

בסרגל הכלים של Mat, עליך להוסיף ' MatToolbarModule ”.

עכשיו, בואו נשרת את הפרויקט שלך באמצעות הפקודה הבאה:

של הגשה -או

פעולה זו תפתח את הפרויקט שלך בדפדפן ברירת המחדל של המערכת שלך, כמוצג להלן:

אם ברצונך לשנות את צבע סרגל הכלים לפי בחירתך, תוכל לעשות זאת בעזרת גיליון סגנונות CSS. תן לי להראות לך דוגמה.

ראשית, עליך למחוק צֶבַע נכס מ ולאחר מכן הקלד את הפרטים הבאים CSS קוד ב app.component.css קוֹבֶץ.

סרגל הכלים של המחצלת {צבע רקע: / * צבע לפי בחירתך * / צבע: / * צבע טקסט * /}

כעת, הגש את הפרויקט שלך כדי לראות את התוצאה.

• תַפרִיט

לאחר מכן אדון ברכיב התפריט. עליך להקליד את הקוד הבא שלך app.component.html קוֹבֶץ.

 מדריך חומרים זוויתי הגדרות תפריט עזרה

בואו נוסיף קצת סטיילינג על ה- תַפרִיט לַחְצָן. עליך להקליד את הקוד הבא שלך app.component.css קוֹבֶץ.

.space {flex: 1 1 auto} .btns {רוחב: 100 פיקסלים גובה: 40 פיקסלים גודל גופן: רדיוס גבול גדול: 10 פיקסלים גבול: 3 פיקסלים מלא # 113c89 צבע רקע: אור קורל}

class = 'space' משמש להוספת רווח בין 'שם סרגל הכלים' לבין 'אפשרות תפריט'.

אם אינך מכיר את גיליון הסגנונות של CSS, תוכל לעיין בבלוג שלנו ב- כדי להעמיק.

בדיוק כמו סרגל הכלים, לשימוש ו מיכלים, עליך לבצע את אותו ההליך כמו לעיל, כדי לייבא MatMenuModule ו MatButtonModule מ חומר זוויתי ולהוסיף אותם פנימה יבוא: [] קטע הממוקם ב app.module.ts קוֹבֶץ.

הגש את הפרויקט שלך כעת כדי להציג את הפלט.

בקרות טופס

כעת אדון ברכיבים בבקרת הטפסים.

• שדה טופס

כפי שהשם מרמז, Form-Field משמש לקלטים שניתנו על ידי המשתמש. הוא משמש לרוב לרישום משתמש, ביישום או באתר.

עליך להקליד את הקוד הבא ב- app.component.html להשתמש ברכיב טופס-שדה ביישום שלך.

 
בקרות טופס
שֵׁם

כרגיל, עליך לייבא MatFormFieldModule ו MatInputModule ולהוסיף אותם פנימה יבוא: [] החלק הממוקם ב app.module.ts קוֹבֶץ. הקוד שלעיל משמש בדרך כלל להזנת שמות כמו 'שם פרטי', 'שם משפחה' וכו '. אתה יכול אפילו להשתמש במאמתים ולהפוך שדה לחובה. לדוגמה, תוכלו להשתמש בו לשדה הדואר האלקטרוני. אתה יכול להסתיר או לבטל הסתרה של הטקסט עבור סיסמאות. לעיונך, עיין בקוד שלמטה:

הזן את הדוא'ל שלך {{getErrorMessage ()}} הזן את הסיסמה שלך {{הסתר? 'visibility_off': 'נראות'}}

שלך app.component.css , עליך להוסיף את הקוד הבא:

מיכל לדוגמה. {padding-left: 50px}

עכשיו, שלך app.component.ts הקובץ, עליך לייבא FormControl ו מאמתים מ @ זוויתי / צורות מַדרִיך.

ייבא את {FormControl, Validators} מ- '@ angular / forms'

אתה צריך אפילו להוסיף את הטקסט כדי להציג שגיאה במחלקה הבאה.

מחלקת ייצוא AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {להחזיר this.email.hasError ('חובה')? 'עליך להזין ערך': this.email.hasError ('דוא'ל')? 'לא דוא'ל חוקי': ''} hide = true}

בהתייחס לנוהל לעיל, עליך להקליד את הקוד הבא שלך app.module.ts קובץ לייבוא ​​המודולים הדרושים.

ייבא את {FormsModule, ReactiveFormsModule} מ- '@ angular / forms' ייבא את {MatIconModule} מ- '@ angular / material'

מאוחר יותר, עליך להוסיף את המודולים האלה יבוא: [] סָעִיף.

• כפתור רדיו

כפתורי הרדיו משמשים בדרך כלל לבחירה בין האפשרויות השונות. אתה יכול לבדוק את הקוד הבא להפניה.

ל app.component.html קוֹבֶץ,

 
מִין
זכר נקבה

ל app.component.css קוֹבֶץ,

כפתור רדיו מחצלת {ריפוד-שמאל: 50 פיקסלים}

כעת עליך לייבא MatRadioModule ולהוסיף אותו פנימה יבוא: [] החלק הממוקם ב app.module.ts קוֹבֶץ.

מאוחר יותר, עליך להגיש את הפרויקט שלך כדי להציג את הפלט.

בהמשך, אדון ב- CDK של Angular Material.

חומר זוויתי CDK

CDK, הידוע גם בשם ערכת התפתחות רכיבים , היא ספרייה של התנהגויות מוגדרות מראש ב- Angular Material, שהוא סט כלים ליישום משותף דפוסי אינטראקציה ו תכונות יישום . אין לו שום עיצוב ספציפי לעיצוב חומרים. בואו נראה דוגמה ל- CDK.

• שדה טקסט

רכיב שדה טקסט מספק כלי עבודה לעבודה עם שדות קלט טקסט. אתה יכול להשתמש ברכיבי CDK בשדה הטקסט כדי לשנות את גודל הקלטים. בואו נראה דוגמה כיצד ליישם אותה.

ל app.component.html קוֹבֶץ,

 
חומר זוויתי CDK
גודל גופן 10 פיקסלים 12 פיקסלים 14 פיקסלים 16 פיקסלים 18 פיקסלים 20 פיקסל גודל גודל טקסט אוטומטי

בשביל ה app.component.ts , עליך קודם לייבא את הרכיבים הדרושים.

ייבא את {CdkTextareaAutosize} מ- '@ angular / cdk / field-field' ייבא {NgZone, ViewChild} מ- '@ angular / core' ייבוא ​​{take} מ- 'rxjs / operators'

כעת עליך להקליד את הקוד הבא בכיתה.

מערכת יחסים בג'אווה

מחלקת ייצוא AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('גודל אוטומטי', {static: false}) גודל אוטומטי: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (קח (1)). מנוי (((() ) = & ampampampgt this.autosize.resizeToFitContent (נכון))}}

לאחר מכן, עליך לייבא MatSelectModule ולהוסיף אותו פנימה יבוא: [] החלק הממוקם ב app.module.ts קוֹבֶץ.

לבסוף, עליך להגיש את הפרויקט שלך כדי להציג את הפלט.

זו לא המסקנה ויש כמה רכיבים אחרים בחומרים הזוויתיים. אתה יכול להתייחס אליהם מה- אתר רשמי של חומר זוויתי.

עם זאת, ברצוני לסיים את הבלוג שלי. אני מקווה שברור לך ביסודות החומר הזוויתי.אם יש לך ספקות או שאילתות בנוגע למאמר זה, אל תהסס לפרסם אותם בסעיף ההערות למטה.

אם תרצה ללמוד את כל מה שרק למדת מהבלוג הזה, ועוד על זוויתי , וכוון את הקריירה שלך למפתח זוויתי מיומן, ואז שקול להירשם ל ' .

יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות בבלוג 'חומר זוויתי' ונחזור אליך בהקדם האפשרי.