שימוש בפקדי Fluent UI
יצירת יישומים שנראים נפלא ב- Microsoft Teams תהיה קלה יותר עם הרכיבים החדשים שלנו. הרכיבים החדשים, המבוססים על Fluent UI Framework, ייראו נפלא עם סגנונות של Teams ויתאימו את עצמם אוטומטית לערכת הנושא של Teams המוגדרת כברירת מחדל. הפקדים החדשים הם 'לחצן', 'תיבת סימון', 'תיבה משולבת', 'בורר תאריכים', 'תווית', 'קבוצת לחצני אפשרויות', 'דירוג', 'מחוון', 'תיבת טקסט' ו'לחצן דו-מצבי'.
בוא נבחן כל פקד של Fluent UI ואת המאפיינים השימושיים ביותר שלו. לקבלת רשימה מלאה של פקדים ומאפיינים ב- Power Apps, עבור אל פקדים ומאפיינים ב- Power Apps.
Button
פקד שהמשתמש יכול לבחור בו כדי לקיים אינטראקציה עם היישום.
תיאור
קבע את תצורת המאפיין OnSelect של פקד לחצן כדי להפעיל נוסחה אחת או יותר כאשר המשתמש בוחר בפקד.
מאפיינים עיקריים
ButtonType – סגנון לחצן שיוצג, סטנדרטי או ראשי. ערך ברירת מחדל: סטנדרטי.
OnSelect – מציין כיצד היישום מגיב כאשר המשתמש בוחר פקד.
טקסט - טקסט שמופיע על פקד או שהמשתמש מזין בפקד.
תיבת סימון
פקד שהמשתמש יכול לבחור או לנקות כדי להגדיר את הערך שלו ל- true או ל- false.
תיאור
המשתמש יכול לציין ערך בוליאני על-ידי שימוש בפקד מוכר זה, שנמצא בשימוש נרחב בממשק המשתמש.
מאפיינים עיקריים
צד התיבה - הצד של הפקד שבו מוצגת תיבת הסימון.
תווית - טקסט שמופיע על פקד.
מסומן - מציין אם הפקד מסומן או לא.
תיבה משולבת
פקד שמאפשר למשתמשים לבחור מבין האפשרויות שסופקו. תמיכה בחיפוש ובבחירות מרובות.
תיאור
פקד תיבה משולבת מאפשר למשתמש לחפש פריטים לבחירה.
מצב בחירה יחידה או בחירה מרובה מוגדר דרך המאפיין SelectMultiple.
מאפיינים עיקריים
פריטים - מקור הנתונים שממנו ניתן לבחור.
DefaultSelectedItems - הפריטים שנבחרו בתחילה לפני שהמשתמש מקיים אינטראקציה עם הפקד.
SelectMultiple – מציין אם המשתמש יכול לבחור פריט בודד או פריטים מרובים.
IsSearchable – מציין אם המשתמש יכול לחפש פריטים לפני שהוא בוחר.
בורר תאריכים
פקד שהמשתמש יכול לבחור כדי לציין תאריך.
תיאור
אם תוסיף פקד בורר תאריכים במקום פקד קלט טקסט, תוכל להבטיח שהמשתמש יציין תאריך בתבנית הנכונה.
מאפיינים עיקריים
ערך - התאריך שנבחר כעת בפקד תאריך. תאריך זה מיוצג בזמן מקומי.
Label
תיבה שמציגה נתונים, כגון טקסט, מספרים, תאריכים או מטבעות.
תיאור
תווית מציגה נתונים שאתה מציין כמחרוזת טקסט ליטרלית או כנוסחה המוערכת למחרוזת טקסט. תוויות מופיעות לרוב מחוץ לפקד אחר (כגון כרזה המזהה מסך), כתווית שמזהה פקד אחר (כגון פקד דירוג או שמע), או בגלריה להצגת סוג מסוים של מידע על פריט.
מאפיינים עיקריים
צבע - צבע הטקסט בפקד.
גופן - שם משפחת הגופנים שבהם מופיע הטקסט.
טקסט - הטקסט שמופיע על פקד.
קבוצת אפשרויות
פקד קלט המציג אפשרויות מרובות, שרק באחת מהן המשתמשים יכולים לבחור בכל פעם.
תיאור
פקד קבוצת לחצני אפשרויות, פקד קלט HTML סטנדרטי, משמש בצורה הטובה ביותר עם מספר קטן של אפשרויות הבלעדיות באופן הדדי.
מאפיינים עיקריים
פריטים - מקור הנתונים המופיע בפקד כגון גלריה, רשימה או תרשים.
נבחר - רשומת הנתונים המייצגת את הפריט שנבחר.
דירוג
פקד שבעזרתו המשתמשים יכולים לציין ערך מ- 0 עד המספר המרבי שתציין.
תיאור
בפקד זה, המשתמש יכול לציין, לדוגמה, כמה הוא אהב משהו על-ידי בחירת מספר מסוים של כוכבים.
מאפיינים עיקריים
ערך - הערך ההתחלתי של פקד לפני שהוא שונה על-ידי המשתמש.
מקסימום - הערך המרבי שאליו המשתמש יכול להגדיר מחוון או דירוג.
מחוון
פקד שבעזרתו יכול המשתמש לציין ערך על-ידי גרירת נקודת אחיזה.
תיאור
המשתמש יכול לציין ערך, בין ערך מינימום לערך מקסימום שאתה מציין, על-ידי גרירת ידית האחיזה של מחוון מימין לשמאל או למעלה ולמטה, בהתאם לכיוון שאתה בוחר.
מאפיינים עיקריים
מקסימום - הערך המרבי שאליו המשתמש יכול להגדיר מחוון או דירוג.
מינימום - הערך המינימלי שאליו המשתמש יכול להגדיר מחוון.
ערך - הערך של פקד קלט.
פריסה - מציין אם פקד מוצג באופן אופקי או אנכי.
הצג ערך - מציין אם פקד אמור להציג את הערך.
תיבת טקסט
תיבה שבה המשתמש יכול להזין טקסט, מספרים ונתונים אחרים.
תיאור
המשתמש יכול לציין נתונים על-ידי הקלדה בפקד תיבת טקסט. בהתאם לאופן שבו הגדרת את היישום, ייתכן שהנתונים הללו יתווספו למקור נתונים, המשמש לחישוב ערך זמני או המשולב בדרך אחרת כלשהי.
מאפיינים עיקריים
גופן - שם משפחת הגופנים שבהם מופיע הטקסט.
טקסט - טקסט שמופיע על פקד או שהמשתמש מזין בפקד.
לחצן דו-מצבי
פקד שהמשתמש יכול להפעיל או לכבות על-ידי הזזה של נקודת האחיזה שלו.
תיאור
פקד לחצן דו-מצבי מיועד לממשק המשתמש המודרני, אבל מתנהג כמו תיבת סימון.
מאפיינים עיקריים
מסומן - מציין אם הפקד מסומן או לא.
OffText - הטקסט של המצב הכבוי.
OnText - הטקסט של המצב המופעל.
ההבדל בין Fluent UI לפקדים קלאסיים
מאפיינים של פקדים הפכו לפשוטים יותר לצורך שימוש קל. הטבלה הבאה מפרטת הבדלים בין פקדי Fluent UI לשמות מאפייני פקדים קלאסיים.
| סוג פקד | קלאסית | Fluent UI |
|---|---|---|
| Button | מילוי רקע TabIndex |
ColorFill ColorBackground AcceptsFocus |
| תיבת סימון | ברירת מחדל TabIndex |
מסומן AcceptsFocus |
| תיבה משולבת | InputTextPlaceholder TabIndex |
טקסט AcceptsFocus |
| בורר תאריכים | תאריך נבחר TabIndex |
ערך AcceptsFocus |
| תווית | גודל | FontSize |
| קבוצת אפשרויות | TabIndex | AcceptsFocus |
| דירוג | ברירת מחדל TabIndex |
ערך AcceptsFocus |
| מחוון | ברירת מחדל TabIndex |
ערך AcceptsFocus |
| תיבת טקסט | צבע ברירת מחדל מילוי SpellCheck TabIndex |
ColorText ערך ColorBackground EnableSpellCheck AcceptsFocus |
| לחצן דו-מצבי | גודל ברירת מחדל TabIndex |
FontSize מסומן AcceptsFocus |