הפניה לגלריית רכיבים של A2UI

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

רכיבי קטלוג חומרים ורכיבי קטלוג בסיסיים

ב-A2UI יש שני קטלוגים נפרדים של רכיבים ליצירת ממשקי משתמש של נציגים: הקטלוג של Material והקטלוג הבסיסי.

הערה: הקטלוג הבסיסי נקרא "קטלוג רגיל" בגרסה 0.8. למידע נוסף, קראו את המסמכים בנושא מודל הרכיבים בגרסה 0.8.

קטלוג החומרים מכיל רכיבים שתוכננו במיוחד כדי לעמוד בהנחיות של Google Material Design, ומציע קבוצה עשירה ומעוצבת יותר של רכיבים בממשק המשתמש שנתמכים בהגדרות של A2UI בגרסה 0.9.

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

רכיבים של קטלוג חומרים

בקטע הזה מפורטים רכיבי Material Design של A2UI, כולל רכיבי פריסה, תצוגה, ניווט וקלט.

הערה: הרכיבים של A2UI Material Catalog נתמכים בהגדרות של A2UI מגרסה v0.9. למידע נוסף על גרסאות A2UI, קראו את הקטע Specification Versions במסמכי התיעוד של A2UI.

מאפיינים נפוצים בקטלוג חומרים

לכל הרכיבים, בלי קשר לסוג הספציפי שלהם, יש קבוצה של מאפיינים משותפים שאפשר להגדיר:

מאפיין (property)	חובה	תיאור
id	כן	מזהה ייחודי של הרכיב בתוך הפלטפורמה הנוכחית.
accessibility	לא	מאפיינים לשיפור הנגישות, כמו תוויות ותפקידים.
weight	לא	ערך שמשמש בפריסות MaterialRow או MaterialColumn כדי לקבוע כמה מקום הרכיב תופס ביחס לרכיבים האחרים, בדומה ל-flex-grow.

רכיבי פריסה של קטלוג חומרים

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

MaterialCard

מאגר כרטיסים של Material Design.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialCard:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
children	כן	-	מגדיר את המזהים של הצאצאים.
appearance	לא	raised	סגנון המראה של הכרטיס. אחת מהאפשרויות הבאות: "outlined",‏ "raised".
align	לא	start	היישור של רכיבי צאצא. אחת מהאפשרויות: "center",‏ "end",‏ "start",‏ "stretch".
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
href	לא	-	כתובת URL אופציונלית שאליה המשתמשים יועברו כשהם ילחצו על הכרטיס. כשמגדירים את האפשרות הזו, הכרטיס הופך לאינטראקטיבי ופותח את כתובת ה-URL בכרטיסייה חדשה.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialCard",
    "appearance": "outlined",
    "children": [
      "card-content"
    ]
  },
  {
    "id": "card-content",
    "component": "MaterialText",
    "text": "Card content"
  }
]

MaterialColumn

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

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialColumn:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
children	כן	-	מגדיר את המזהים של הצאצאים.
justify	לא	start	מגדירה את סידור הצאצאים לאורך הציר הראשי (אנכית). אחד מהערכים הבאים: "start",‏ "center",‏ "end",‏ "spaceBetween",‏ "spaceAround",‏ "spaceEvenly".
align	לא	stretch	יישור אופקי של רכיבי צאצא ("start",‏ "center",‏ "end",‏ "stretch").
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "demo-column-header",
      "demo-column-content",
      "demo-column-footer"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "demo-column-header",
    "component": "MaterialText",
    "text": "Header",
    "usageHint": "h2"
  },
  {
    "id": "demo-column-content",
    "component": "MaterialText",
    "text": "Content goes here",
    "usageHint": "body"
  },
  {
    "id": "demo-column-footer",
    "component": "MaterialText",
    "text": "Footer",
    "usageHint": "caption"
  }
]

MaterialDialog

מאגר של תיבת דו-שיח בתפריט Material Design.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialDialog:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
open	לא	false	אם תיבת הדו-שיח פתוחה. יכול להיות ערך בוליאני מילולי או הפניה לקשירת נתונים.
title	לא	-	השם של תיבת הדו-שיח.
disableClose	לא	false	האם המשתמש יכול לסגור את תיבת הדו-שיח בלחיצה מחוץ לה או בהקשה על Escape.
width	לא	-	רוחב תיבת הדו-שיח (למשל, 500px).
height	לא	-	גובה תיבת הדו-שיח (למשל, "400px").
children	כן	-	מגדיר את המזהים של הצאצאים.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "open-button",
      "confirmation-dialog"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "open-button",
    "component": "MaterialButton",
    "label": "Delete Item",
    "variant": "raised",
    "action": {
      "event": {
        "name": "requestDelete"
      }
    }
  },
  {
    "id": "confirmation-dialog",
    "component": "MaterialDialog",
    "open": {
      "path": "/app/dialogOpen"
    },
    "title": "Delete Confirmation",
    "children": [
      "dialog-layout"
    ]
  },
  {
    "id": "dialog-layout",
    "component": "MaterialColumn",
    "children": [
      "dialog-text",
      "dialog-actions"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "dialog-text",
    "component": "MaterialText",
    "text": "Are you sure you want to permanently delete this item?"
  },
  {
    "id": "dialog-actions",
    "component": "MaterialRow",
    "children": [
      "cancel-button",
      "confirm-button"
    ],
    "justify": "end",
    "align": "center"
  },
  {
    "id": "cancel-button",
    "component": "MaterialButton",
    "label": "Cancel",
    "variant": "basic",
    "action": {
      "event": {
        "name": "closeDialog"
      }
    }
  },
  {
    "id": "confirm-button",
    "component": "MaterialButton",
    "label": "Delete",
    "variant": "raised",
    "action": {
      "event": {
        "name": "confirmDelete"
      }
    }
  }
]

MaterialDivider

קו חלוקה של Material Design.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialDivider:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
inset	לא	false	אם הקו המפריד מוסט פנימה.
vertical	לא	false	אם הקו המפריד הוא אנכי.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "text-above",
      "divider",
      "text-below"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "text-above",
    "component": "MaterialText",
    "text": "This is the content above the divider."
  },
  {
    "id": "divider",
    "component": "MaterialDivider",
    "inset": false,
    "vertical": false
  },
  {
    "id": "text-below",
    "component": "MaterialText",
    "text": "This is the content below the divider."
  }
]

MaterialExpansionPanel

מאגר של חלונית ההרחבה של Material Design.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialExpansionPanel:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
title	לא	-	הכותרת שמוצגת בכותרת של חלונית ההרחבה.
description	לא	-	התיאור שמוצג בכותרת של חלונית ההרחבה.
expanded	לא	false	אם החלונית מורחבת. יכול להיות ערך בוליאני מילולי או הפניה לקשירת נתונים.
disabled	לא	false	אם חלונית ההרחבה מושבתת.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
children	כן	-	מגדיר את המזהים של הצאצאים.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialExpansionPanel",
    "title": "Advanced Options",
    "description": "Configure advanced settings",
    "expanded": false,
    "children": [
      "panel-content"
    ]
  },
  {
    "id": "panel-content",
    "component": "MaterialText",
    "text": "Advanced settings content goes here"
  }
]

MaterialGridList

רכיב קונטיינר של A2UI לפריסת רשת. משתמש ברשימת רשת של Angular Material כדי לסדר רכיבי צאצא במשבצות.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialGridList:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
children	כן	-	מגדיר את המזהים של הצאצאים.
cols	לא	2	מספר העמודות ברשימת הרשת. הערך יכול להיות מספר מילולי או הפניה לקישור נתונים.
rowHeight	לא	1:1	יחס גובה השורה או גובה קבוע (למשל, "100px"). הערך יכול להיות מחרוזת מילולית או הפניה לקישור נתונים.
gutterSize	לא	1px	גודל המרווח בין העמודות ברשת. הערך יכול להיות מחרוזת מילולית או הפניה לקישור נתונים.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialGridList",
    "cols": 2,
    "rowHeight": "1:1",
    "gutterSize": "8px",
    "children": [
      "card-a",
      "card-b",
      "card-c",
      "card-d"
    ]
  },
  {
    "id": "card-a",
    "component": "MaterialCard",
    "children": [
      "text-a"
    ]
  },
  {
    "id": "text-a",
    "component": "MaterialText",
    "text": "Card A"
  },
  {
    "id": "card-b",
    "component": "MaterialCard",
    "children": [
      "text-b"
    ]
  },
  {
    "id": "text-b",
    "component": "MaterialText",
    "text": "Card B"
  },
  {
    "id": "card-c",
    "component": "MaterialCard",
    "children": [
      "text-c"
    ]
  },
  {
    "id": "text-c",
    "component": "MaterialText",
    "text": "Card C"
  },
  {
    "id": "card-d",
    "component": "MaterialCard",
    "children": [
      "text-d"
    ]
  },
  {
    "id": "text-d",
    "component": "MaterialText",
    "text": "Card D"
  }
]

MaterialRow

קונטיינר פריסה שמסדר פריטים בצורה אופקית לפי ההנחיות של Material.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialRow:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
children	כן	-	מגדיר את המזהים של הצאצאים.
justify	לא	start	מגדירה את סידור הצאצאים לאורך הציר הראשי (אופקית). אחד מהערכים הבאים: "start",‏ "center",‏ "end",‏ "spaceAround",‏ "spaceBetween",‏ "spaceEvenly".
align	לא	stretch	יישור אנכי של רכיבי צאצא ("start",‏ "center",‏ "end",‏ "stretch").
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialRow",
    "children": [
      "item-icon",
      "item-details",
      "item-action"
    ],
    "justify": "spaceBetween",
    "align": "center"
  },
  {
    "id": "item-icon",
    "component": "MaterialIcon",
    "icon": "shopping_bag",
    "color": "primary"
  },
  {
    "id": "item-details",
    "component": "MaterialColumn",
    "children": [
      "item-title",
      "item-subtitle"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "item-title",
    "component": "MaterialText",
    "text": "Premium Wireless Headphones",
    "usageHint": "subtitle1"
  },
  {
    "id": "item-subtitle",
    "component": "MaterialText",
    "text": "$299.99 \u2022 Active Noise Cancelling",
    "usageHint": "caption"
  },
  {
    "id": "item-action",
    "component": "MaterialButton",
    "label": "Buy Now",
    "variant": "raised",
    "action": {
      "event": {
        "name": "buy_clicked"
      }
    }
  }
]

רכיבי תוכן בקטלוג החומרים

רכיבי תצוגה ותוכן משמשים להצגת מידע, מדיה וסטטוס למשתמש.

MaterialBadge

תג Material Design שמוצג מעל רכיב צאצא.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialBadge:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
text	לא	-	תוכן הטקסט שיוצג בתג.
color	לא	-	לוח הצבעים של התג (primary,‏ accent,‏ warn).
position	לא	above after	מיקום התג ביחס למאגר ("above after",‏ "above before",‏ "below after",‏ "below before").
size	לא	medium	גודל התג ("קטן", "בינוני", "גדול").
overlap	לא	true	אם התג צריך לחפוף למאגר שלו.
disabled	לא	false	אם התג מושבת.
hidden	לא	false	אם התג מוסתר.
description	לא	-	תיאור נגיש של התג.
children	כן	-	מגדיר את המזהים של הצאצאים.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

מציג סמל של Material Design.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialIcon:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
icon	כן	-	השם של סמל של material שיוצג.
color	לא	-	לוח הצבעים של הסמל (ראשי, משני, אזהרה).
tooltip	לא	-	הסבר קצר אופציונלי שמוצג כשמעבירים את העכבר מעל או כשמתמקדים.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

רכיב A2UI לעיבוד תמונה בהקשר של Material Design. תמיכה בפינות מעוגלות, ביחס גובה-רוחב ובמאפייני התאמה של אובייקט.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialImage:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
url	כן	-	כתובת ה-URL של התמונה שרוצים להציג.
alt	לא	-	טקסט חלופי נגיש לתמונה.
fit	לא	-	מציין איך לשנות את גודל התמונה כדי שתתאים למאגר שלה. אחת מהאפשרויות הבאות: "fill",‏ "contain",‏ "cover",‏ "scaleDown",‏ "none".
width	לא	-	רוחב מותאם אישית של התמונה (לדוגמה, "100px",‏ "100%").
height	לא	-	גובה מותאם אישית של התמונה (למשל, "100px",‏ "100%").
aspectRatio	לא	-	יחס גובה-רוחב מותאם אישית של התמונה (לדוגמה, '16/9', ‏'1').
roundedCorners	לא	false	אם להחיל פינות מעוגלות סטנדרטיות של Material Design.
borderRadius	לא	-	רדיוס מותאם אישית של גבול התמונה (למשל, ‎50% או ‎12px). מבטל את roundedCorners.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialImage",
    "url": "https://www.gstatic.com/marketing-cms/assets/images/c5/3a/200414104c669203c62270f7884f/google-wordmarks-2x.webp=n-w100-h32-fcrop64=1,00000000ffffffff-rw",
    "width": "100px",
    "height": "32px",
    "fit": "scaleDown",
    "roundedCorners": true,
    "alt": "Google Wordmark"
  }
]

MaterialProgressBar

‫A2UI wrapper לרכיב Angular Material סרגל התקדמות. תומך במצבים: מוגדר, לא מוגדר, מאגר נתונים ושאילתה.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialProgressBar:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
value	לא	0	ערך ההתקדמות (0 עד 100) במצבי determinate ו-buffer.
mode	לא	determinate	מצב סרגל ההתקדמות. אחד מהערכים הבאים: "determinate",‏ "indeterminate",‏ "buffer",‏ "query".
bufferValue	לא	0	ערך המאגר (0 עד 100) במצב מאגר.
color	לא	-	לוח הצבעים של סרגל ההתקדמות ("ראשי", "הדגשה", "אזהרה").
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

‫A2UI wrapper לרכיב Angular Material Progress Spinner. תומך במצבים מוגדרים ובלתי מוגדרים, ובממדים מותאמים אישית.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialProgressSpinner:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
value	לא	0	ערך ההתקדמות (0 עד 100) במצב קבוע.
mode	לא	determinate	המצב של הספינר. אחד מהבאים: "determinate",‏ "indeterminate".
diameter	לא	40	הקוטר של הסימן הגרפי בפיקסלים.
strokeWidth	לא	4	רוחב הקו של הספינר בפיקסלים.
color	לא	-	לוח הצבעים של הספינר (primary,‏ accent,‏ warn).
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

‫wrapper של A2UI לרכיב Angular Material Table. הצגת נתונים מובְנים בעמודות ובשורות.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialTable:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
columns	כן	-	מערך של הגדרות עמודות, שכל אחת מהן מציינת אובייקט {header, field}.
rows	כן	-	רשימת שורות הנתונים. יכול להיות מערך של רשומות מפתח/ערך או הפניה לקישור נתונים.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
caption	לא	-	כיתוב או תיאור נגיש של הטבלה.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

הצגת טקסט עם טיפוגרפיה של Material.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialText:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
text	כן	-	הטקסט שיוצג. זה יכול להיות מחרוזת מילולית או הפניה לערך במודל הנתונים.
usageHint	לא	body	רמז לגבי סגנון הטיפוגרפיה. אחת מהאפשרויות: "h1",‏ "h2",‏ "h3",‏ "h4",‏ "h5",‏ "subtitle1",‏ "subtitle2",‏ "body1",‏ "body2",‏ "body",‏ "caption".
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

רכיבי ניווט בקטלוג החומרים

רכיבי הניווט והפעולה מאפשרים למשתמשים לבצע פעולות או לנווט בין תצוגות.

MaterialButton

כפתור Material Design.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialButton:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
label	לא	-	תווית הטקסט שתוצג על הכפתור.
leadingIcon	לא	-	השם של סמל של material שיוצג לפני התווית.
trailingIcon	לא	-	השם של סמל של material שיוצג אחרי התווית.
variant	לא	basic	הווריאציה של סגנון הכפתור. אחד מהבאים: "raised",‏ "flat",‏ "stroked",‏ "icon",‏ "fab",‏ "mini-fab",‏ "basic".
appearance	לא	-	המראה החזותי של הכפתור. אחת מהאפשרויות הבאות: text,‏ filled,‏ elevated,‏ outlined,‏ tonal.
disabled	לא	false	אם הכפתור מושבת.
action	לא	-	הפעולה שתתבצע כשלוחצים על הכפתור.
tooltip	לא	-	טקסט של הסבר קצר שמוצג כשמציבים את הסמן מעל אלמנט.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
disableRipple	לא	false	האם אפקט האדווה בלחיצה מושבת.
extended	לא	false	האם הכפתור מורחב עם תווית נוספת או עם מקום לסמל.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

כפתור בצורת סמל של Material Design.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialIconButton:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
icon	כן	-	השם של סמל של material שיוצג.
action	כן	-	הפעולה בצד הלקוח שמופעלת כשלוחצים על כפתור הסמל.
ariaLabel	כן	-	טקסט מובן לקוראי מסך. מומלץ להשתמש בזה כדי לשפר את הנגישות, כי הלחצן מכיל רק סמל.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
color	לא	-	לוח הצבעים של הכפתור (ראשי, משני, אזהרה).
disabled	לא	false	אם הכפתור מושבת.
tooltip	לא	-	טקסט של הסבר קצר שמוצג כשמציבים את הסמן מעל אלמנט.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

‫wrapper של A2UI לרכיב Angular Material Menu. מספק כפתור טריגר ופריטים בתפריט נפתח.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialMenu:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
label	לא	-	תווית הטקסט שמוצגת בלחצן להפעלת התפריט.
icon	לא	-	שם הסמל של Material Design שיוצג בלחצן ההפעלה.
disabled	לא	false	אם כפתור ההפעלה של התפריט מושבת.
value	לא	-	הערך שנבחר כרגע. יכול להיות מחרוזת מילולית או הפניה לקשירת נתונים.
options	כן	-	רשימת האפשרויות בתפריט. יכול להיות מערך של אובייקטים מסוג {label, value} או הפניה לקישור נתונים.
action	לא	-	הפעולה בצד הלקוח שתופעל כשבוחרים פריט בתפריט.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialMenu",
    "label": "Options",
    "icon": "more_vert",
    "value": {
      "path": "/menu/selectedOption"
    },
    "options": [
      {
        "label": "Settings",
        "value": "settings"
      },
      {
        "label": "Help",
        "value": "help"
      },
      {
        "label": "Logout",
        "value": "logout"
      }
    ],
    "action": {
      "event": {
        "name": "menuSelection"
      }
    }
  }
]

MaterialTabs

‫wrapper של A2UI לרכיב Angular Material Tabs. הקומפוננטה הזו מציגה ניווט בכרטיסיות ומנהלת את הבחירה של הכרטיסייה הפעילה.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialTabs:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
tabs	כן	-	מערך של הגדרות כרטיסיות, שכל אחת מהן מציינת אובייקט {label, content}.
activeTab	לא	0	האינדקס של הכרטיסייה הפעילה הנוכחית, שמתחיל מאפס. יכול להיות מספר מילולי או הפניה לקשירת נתונים.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialTabs",
    "activeTab": {
      "path": "/app/selectedTab"
    },
    "tabs": [
      {
        "label": "Overview",
        "content": "Overview content"
      },
      {
        "label": "Details",
        "content": "Details content"
      },
      {
        "label": "Reviews",
        "content": "Reviews content"
      }
    ]
  }
]

רכיבי קלט של קטלוג חומרים

רכיבי קלט וטפסים מאפשרים למשתמשים להזין טקסט, לבחור אפשרויות ולהפעיל או להשבית אפשרויות.

MaterialButtonToggle

קבוצת מתגים של Material Design לבחירה יחידה.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialButtonToggle:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
value	לא	-	הערך שנבחר כרגע. זה יכול להיות מחרוזת מילולית או הפניה לערך במודל הנתונים.
options	כן	-	רשימת האפשרויות שאפשר לבחור. יכול להיות מערך של אובייקטים מסוג {label, value} או הפניה לקישור נתונים.
disabled	לא	false	אם קבוצת המתגים מושבתת.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
appearance	לא	standard	סגנון המראה של קבוצת המתגים. אחת מהאפשרויות: "legacy",‏ "standard".
vertical	לא	false	אם קבוצת המתגים מסודרת אנכית.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialButtonToggle",
    "ariaLabel": "Text alignment",
    "value": {
      "path": "/user/alignment"
    },
    "options": [
      {
        "label": "Left",
        "value": "left"
      },
      {
        "label": "Center",
        "value": "center"
      },
      {
        "label": "Right",
        "value": "right"
      }
    ]
  }
]

MaterialCheckbox

רכיב תיבת סימון של Material Design למצב בוליאני. כדי להבטיח נגישות אופטימלית, צריך לספק תווית תיאורית או להשתמש ב-ariaLabel לטכנולוגיות מסייעות.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialCheckbox:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
label	לא	-	תווית הטקסט שמוצגת לצד תיבת הסימון.
checked	לא	false	אם תיבת הסימון מסומנת. הערך יכול להיות ערך בוליאני מילולי או הפניה לערך במודל הנתונים.
disabled	לא	false	אם תיבת הסימון מושבתת.
color	לא	-	לוח הצבעים של תיבת הסימון (primary,‏ accent,‏ warn).
labelPosition	לא	after	המיקום של התווית ביחס לתיבת הסימון (before,‏ after).
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
tooltip	לא	-	טקסט של הסבר קצר שמוצג כשמציבים את הסמן מעל אלמנט.
checks	לא	-	מערך של כללי אימות (כל אחד מכיל תנאי בוליאני דינמי והודעת שגיאה) שמוערכים באופן ריאקטיבי כדי לקבוע את תקינות הקלט.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialCheckbox",
    "label": "Agree to Terms and Conditions",
    "ariaLabel": "Agree to Terms and Conditions",
    "checked": {
      "path": "/user/agreedToTerms"
    },
    "color": "primary"
  }
]

MaterialChips

רכיב תיבת רשימה של צ'יפים ב-Material Design לבחירה אחת.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialChips:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
value	לא	-	הערך שנבחר כרגע. זה יכול להיות מחרוזת מילולית או הפניה לערך במודל הנתונים.
options	כן	-	רשימת אפשרויות הצ'יפים. יכול להיות מערך של אובייקטים {label, value} או הפניה לקשירת נתונים.
disabled	לא	false	אם תיבת הרשימה של הצ'יפים מושבתת.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
action	לא	-	הפעולה שצריך לשלוח כשבוחרים צ'יפ.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialChips",
    "ariaLabel": "Filter by status",
    "value": {
      "path": "/user/status"
    },
    "options": [
      {
        "label": "All",
        "value": "all"
      },
      {
        "label": "Active",
        "value": "active"
      },
      {
        "label": "Completed",
        "value": "completed"
      }
    ]
  }
]

MaterialDatepicker

רכיב לבחירת תאריך ב-Material Design.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialDatepicker:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
label	לא	-	התווית של שדה בחירת התאריך.
placeholder	לא	-	הטקסט לדוגמה.
value	לא	-	התאריך הנוכחי שנבחר בפורמט ISO.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
disabled	לא	false	אם בורר התאריכים מושבת.
checks	לא	-	מערך של כללי אימות (כל אחד מכיל תנאי בוליאני דינמי והודעת שגיאה) שמוערכים באופן ריאקטיבי כדי לקבוע את תקינות הקלט.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

שדה להזנת קלט בטקסט ב-Material Design.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialInput:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
label	לא	-	התווית של השדה להזנת קלט.
placeholder	לא	-	הטקסט לדוגמה.
value	לא	-	הערך הנוכחי של הקלט. זה יכול להיות מחרוזת מילולית או הפניה לערך במודל הנתונים.
disabled	לא	false	אם הקלט מושבת.
name	לא	-	השם של רכיב הקלט.
readonly	לא	false	האם הקלט הוא לקריאה בלבד.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
type	לא	text	סוג אמצעי הבקרה לקלט שיוצג. אחת מהאפשרויות: text,‏ number,‏ email,‏ tel,‏ date. "סיסמה" אסורה.
validationRegexp	לא	-	ביטוי רגולרי לאימות קלט.
checks	לא	-	מערך של כללי אימות (כל אחד מכיל תנאי בוליאני דינמי והודעת שגיאה) שמוערכים באופן ריאקטיבי כדי לקבוע את תקינות הקלט.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

‫wrapper של A2UI לרכיב כפתור הבחירה של Angular Material. תומך בבחירה יחידה מתוך רשימת אפשרויות בקבוצת לחצני בחירה.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialRadioButton:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
value	לא	-	הערך שנבחר כרגע. יכול להיות מחרוזת מילולית או הפניה לקשירת נתונים.
options	כן	-	רשימת אפשרויות הרדיו הזמינות. יכול להיות מערך של אובייקטים {label, value} או הפניה לקשירת נתונים.
disabled	לא	false	אם קבוצת כפתורי הבחירה מושבתת.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
color	לא	-	לוח הצבעים של כפתור הבחירה ("ראשי", "הדגשה", "אזהרה").
labelPosition	לא	after	המיקום של התווית ביחס לכפתור הבחירה. אחת מהאפשרויות: "before",‏ "after".
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialRadioButton",
    "ariaLabel": "Delivery options",
    "value": {
      "path": "/order/deliverySpeed"
    },
    "options": [
      {
        "label": "Standard",
        "value": "standard"
      },
      {
        "label": "Express",
        "value": "express"
      },
      {
        "label": "Next Day",
        "value": "nextDay"
      }
    ],
    "color": "primary",
    "labelPosition": "after"
  }
]

MaterialSelect

רכיב בחירה (תפריט נפתח) של Material Design לבחירה של פריט אחד. כדי להבטיח נגישות אופטימלית, תמיד צריך לספק תווית תיאורית או להשתמש ב-aria-label לטכנולוגיות מסייעות.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialSelect:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
label	לא	-	התווית של שדה הבחירה.
placeholder	לא	-	הטקסט לדוגמה שמוצג כשלא נבחר ערך.
value	לא	-	הערך שנבחר כרגע. זה יכול להיות מחרוזת מילולית או הפניה לערך במודל הנתונים.
options	כן	-	רשימת האפשרויות שאפשר לבחור. יכול להיות מערך של אובייקטים מסוג {label, value} או הפניה לקישור נתונים.
disabled	לא	false	אם רכיב הבחירה מושבת.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
checks	לא	-	מערך של כללי אימות (כל אחד מכיל תנאי בוליאני דינמי והודעת שגיאה) שמוערכים באופן ריאקטיבי כדי לקבוע את תקינות הקלט.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialSelect",
    "label": "Favorite Color",
    "placeholder": "Choose a color",
    "ariaLabel": "Select your favorite color",
    "value": {
      "path": "/user/favoriteColor"
    },
    "options": [
      {
        "label": "Red",
        "value": "red"
      },
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ]
  }
]

MaterialSlideToggle

‫wrapper של A2UI לרכיב Angular Material Slide Toggle. תמיכה בקישור מתגים בוליאניים ובמאפייני נגישות בהתאמה אישית.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב MaterialSlideToggle:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
label	לא	-	תווית הטקסט שמוצגת לצד מתג ההחלקה.
checked	לא	false	האם המתג במצב מופעל. יכול להיות ערך בוליאני מילולי או הפניה לקישור נתונים.
disabled	לא	false	אם המתג מושבת.
required	לא	false	האם נדרש שימוש במתג.
color	לא	-	לוח הצבעים של המתג (primary,‏ accent,‏ warn).
labelPosition	לא	after	מיקום התווית ביחס למתג ("לפני", "אחרי").
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
tooltip	לא	-	טקסט של הסבר קצר שמוצג כשמציבים את הסמן מעל אלמנט.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

‫wrapper של A2UI לרכיב Angular Material Slider. תומך בבחירת ערך מספרי ובמגבלות טווח.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialSlider:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
value	לא	0	הערך הנוכחי של פס ההזזה. יכול להיות מספר מילולי או הפניה לקשירת נתונים.
min	לא	0	הערך המינימלי של פס ההזזה.
max	לא	100	הערך המקסימלי של פס ההזזה.
step	לא	1	הערך של כל שלב בפס ההזזה.
disabled	לא	false	האם פס ההזזה מושבת.
color	לא	-	לוח הצבעים של פס ההזזה (primary,‏ accent,‏ warn).
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialSlider",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": {
      "path": "/audio/volume"
    },
    "color": "primary",
    "ariaLabel": "Volume adjustment"
  }
]

MaterialTimepicker

‫A2UI wrapper לרכיב Angular Material Timepicker. תומך בבחירת זמן ובשילוב שדות בטופס.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב MaterialTimepicker:

מאפיין (property)	חובה	ערך ברירת המחדל	תיאור
label	לא	-	תווית הטקסט של השדה לבחירת השעה.
placeholder	לא	-	הטקסט לדוגמה.
value	לא	-	השעה שנבחרה בפורמט ISO. הערך יכול להיות מחרוזת מילולית או הפניה לקישור נתונים.
ariaLabel	לא	-	טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby	לא	-	מזהה את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby	לא	-	מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
disabled	לא	false	האם הכלי לבחירת שעה מושבת.
checks	לא	-	מערך של כללי אימות (כל אחד מכיל תנאי בוליאני דינמי והודעת שגיאה) שמוערכים באופן ריאקטיבי כדי לקבוע את תקינות הקלט.
style	לא	-	סגנונות בתוך השורה שיוחלו על הרכיב.
weight	לא	-	משקל הפריסה של הרכיב כשהוא ממוקם בקונטיינר גמיש.

[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

רכיבי קטלוג בסיסיים

בקטע הזה מפורטים רכיבים בסיסיים של קטלוג A2UI.

הערה: ב-Gemini Enterprise יש תמיכה בגרסאות v0.9 ו-v0.8 של A2UI. למידע נוסף על גרסאות A2UI, קראו את המאמר גרסאות מפרט במסמכי התיעוד של A2UI.

הערה: הקטלוג הבסיסי נקרא "קטלוג רגיל" בגרסה 0.8. מידע נוסף זמין במאמר בנושא מודל רכיבים בגרסה 0.8.

קובצי סכימה בסיסיים של קטלוגים

למידע נוסף על המאפיינים האלה, ראו:

• הגדרה בסיסית של קטלוג v0.9 (סכימת JSON)
• v0.8 (סכימת JSON)

מאפיינים נפוצים של קטלוג בסיסי

לכל הרכיבים, בלי קשר לסוג הספציפי שלהם, יש קבוצה של מאפיינים משותפים שאפשר להגדיר:

מאפיין (property)	חובה	תיאור
id	כן	מזהה ייחודי של הרכיב בתוך הפלטפורמה הנוכחית.
accessibility	לא	מאפיינים לשיפור הנגישות, כמו תוויות ותפקידים.
weight	לא	ערך שמשמש בפריסות Row או Column כדי לקבוע את נפח השטח שהרכיב תופס ביחס לרכיבים באותה רמה, בדומה ל-flex-grow.

רכיבי פריסה בסיסיים של קטלוג

רכיבי פריסה משמשים כדי לבנות ולארגן רכיבים אחרים בממשק המשתמש. אלה רכיבי הפריסה שזמינים:

Row

‫Row הוא רכיב פריסה שמשמש לסידור רכיבי הצאצא שלו בצורה אופקית, משמאל לימין. הוא פועל כמאגר שבו אפשר להציב כמה רכיבים זה לצד זה. אפשר לשלוט במיקום ובמרווחים המדויקים של הצאצאים בשורה באמצעות המאפיינים justify/distribution ו-align/alignment.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב Row:

מאפיין (property)	סוג/ערכים	תיאור
children	‫v0.9: מערך של מזהי רכיבים או הגדרת תבנית ‫v0.8: explicitList או template	הרכיבים הצאצאים שצריך לסדר אופקית בתוך השורה.
‫justify (גרסה 0.9) distribution (גרסה 0.8)	start, center, end, spaceBetween, spaceAround, spaceEvenly	קובע איך רכיבי הצאצא מופצים לאורך הציר האופקי.
‫align (גרסה 0.9) alignment (גרסה 0.8)	start,‏ center,‏ end,‏ stretch	קובעת את האופן שבו רכיבי הצאצא מיושרים בציר האנכי.

‫v0.9 JSON

{
  "id": "toolbar",
  "component": "Row",
  "children": ["btn1", "btn2", "btn3"],
  "justify": "spaceBetween",
  "align": "center"
}

‫JSON בגרסה v0.8

{
  "id": "toolbar",
  "component": {
    "Row": {
      "children": { "explicitList": ["btn1", "btn2", "btn3"] },
      "distribution": "spaceBetween",
      "alignment": "center"
    }
  }
}

עמודה

‫Column הוא רכיב פריסה שמשמש לסידור רכיבי הצאצא שלו בצורה אנכית, מלמעלה למטה. הוא פועל כמאגר שבו אפשר להציב כמה רכיבים אחד מתחת לשני. אפשר לשלוט על המיקום והריווח המדויקים של רכיבי ה-children בעמודה באמצעות המאפיינים justify/distribution ו-align/alignment.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב Column:

מאפיין (property)	סוג/ערכים	תיאור
children	גרסה 0.9: מערך של מזהי רכיבים או הגדרת תבנית גרסה 0.8: explicitList או template	רכיבי הצאצא שיוצבו אנכית בתוך העמודה.
‫justify (גרסה 0.9) distribution (גרסה 0.8)	start, ‏ center, ‏ end, ‏ spaceBetween, ‏ spaceAround, ‏ spaceEvenly	קובע איך רכיבי הצאצא מופצים לאורך הציר האנכי.
‫align (גרסה 0.9) alignment (גרסה 0.8)	start,‏ center,‏ end,‏ stretch	קובע את היישור של רכיבי הצאצא בציר האופקי.

‫v0.9 JSON

{
  "id": "content",
  "component": "Column",
  "children": ["header", "body", "footer"],
  "justify": "start",
  "align": "stretch"
}

‫JSON בגרסה v0.8

{
  "id": "content",
  "component": {
    "Column": {
      "children": { "explicitList": ["header", "body", "footer"] },
      "distribution": "start",
      "alignment": "stretch"
    }
  }
}

רשימה

‫List הוא רכיב פריסה שמציג רשימה של פריטים שאפשר לגלול בהם. הוא תומך בפריטים סטטיים ובפריטים דינמיים שנוצרים מנתונים. כיוון הגלילה יכול להיות אנכי או אופקי.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב List:

מאפיין (property)	סוג/ערכים	תיאור
children	גרסה 0.9: מערך של מזהי רכיבים או הגדרת תבנית גרסה 0.8: explicitList או template	הפריטים שיוצגו ברשימה.
direction	vertical, horizontal	כיוון הגלילה של הרשימה.
‫align (גרסה 0.9) alignment (גרסה 0.8)	start,‏ center,‏ end,‏ stretch	קובעת את היישור של פריטים ברשימה בציר הנגדי.

v0.9 JSON

{
  "id": "message-list",
  "component": "List",
  "children": {
    "componentId": "message-item",
    "path": "/messages"
  },
  "direction": "vertical"
}

v0.8 JSON

{
  "id": "message-list",
  "component": {
    "List": {
      "children": {
        "template": {
          "dataBinding": "/messages",
          "componentId": "message-item"
        }
      },
      "direction": "vertical"
    }
  }
}

רכיבים בסיסיים להצגת קטלוג

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

טקסט

הרכיב Text מציג תוכן טקסט ותומך ברמזים שונים לעיצוב, כמו כותרות, כיתובים וגוף הטקסט.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב Text:

מאפיין (property)	סוג/ערכים	תיאור
text	v0.9: מחרוזת או DataBinding v0.8: BoundValue	תוכן הטקסט שיוצג.
‫variant (גרסה 0.9) usageHint (גרסה 0.8)	‫h1, h2, h3, h4, h5, caption, body	הנחיית סגנון לטקסט.

v0.9 JSON

{
  "id": "title",
  "component": "Text",
  "text": "Welcome to A2UI",
  "variant": "h1"
}

‫JSON בגרסה v0.8

{
  "id": "title",
  "component": {
    "Text": {
      "text": { "literalString": "Welcome to A2UI" },
      "usageHint": "h1"
    }
  }
}

תמונה

רכיב Image מציג תמונות מכתובת URL מסוימת ומספק אפשרויות לשליטה באופן שבו התמונה מתאימה למאגר שלה.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב Image:

מאפיין (property)	סוג/ערכים	תיאור
url	v0.9: מחרוזת או DataBinding v0.8: BoundValue	כתובת ה-URL של התמונה שרוצים להציג.
fit	String	איך התמונה צריכה להתאים לקונטיינר שלה (לדוגמה, cover).
‫variant (גרסה 0.9) usageHint (גרסה 0.8)	String	רמז לשימוש או וריאציות של סגנון (למשל, "hero").

v0.9 JSON

{
  "id": "hero",
  "component": "Image",
  "url": "https://example.com/hero.png",
  "fit": "cover",
  "variant": "hero"
}

‫JSON בגרסה v0.8

{
  "id": "hero",
  "component": {
    "Image": {
      "url": { "literalString": "https://example.com/hero.png" },
      "fit": "cover",
      "usageHint": "hero"
    }
  }
}

סמל

הרכיב Icon מציג סמלים מקבוצה סטנדרטית שמוגדרת בקטלוג.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב Icon:

מאפיין (property)	סוג/ערכים	תיאור
name	v0.9: מחרוזת או DataBinding v0.8: BoundValue	שם הסמל שיוצג (למשל, "check").

‫v0.9 JSON

{
  "id": "check-icon",
  "component": "Icon",
  "name": "check"
}

v0.8 JSON

{
  "id": "check-icon",
  "component": {
    "Icon": {
      "name": { "literalString": "check" }
    }
  }
}

קו מפריד

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

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב Divider:

מאפיין (property)	סוג/ערכים	תיאור
axis	horizontal, vertical	הכיוון של קו המפריד.

‫v0.9 JSON

{
  "id": "separator",
  "component": "Divider",
  "axis": "horizontal"
}

‫JSON בגרסה v0.8

{
  "id": "separator",
  "component": {
    "Divider": {
      "axis": "horizontal"
    }
  }
}

רכיבים אינטראקטיביים בקטלוג בסיסי

רכיבים אינטראקטיביים מאפשרים לכם לבצע פעולות באפליקציה, כמו להזין קלט או להפעיל פעולות. אלה הרכיבים האינטראקטיביים שזמינים:

כפתור

רכיב Button הוא רכיב שאפשר ללחוץ עליו כדי להפעיל פעולה או אירוע ספציפיים באפליקציה.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב Button:

מאפיין (property)	סוג/ערכים	תיאור
child	מזהה הרכיב	המזהה של הרכיב שיוצג בתוך הכפתור (למשל, רכיב טקסט).
‫variant (גרסה 0.9) primary (גרסה 0.8)	v0.9: מחרוזת (למשל, "primary") v0.8: ערך בוליאני	סוג העיצוב או ההדגשה שמוחלים על הלחצן.
action	גרסה 0.9: אובייקט אירוע (למשל, הקלדת "event") גרסה 0.8: אובייקט פעולה (למשל, הקלדת "name")	הפעולה שמופעלת כשלוחצים על הכפתור.

‫v0.9 JSON

{
  "id": "submit-btn",
  "component": "Button",
  "child": "submit-text",
  "variant": "primary",
  "action": {
    "event": {
      "name": "submit_form"
    }
  }
}

‫JSON בגרסה v0.8

{
  "id": "submit-btn",
  "component": {
    "Button": {
      "child": "submit-text",
      "primary": true,
      "action": {
        "name": "submit_form"
      }
    }
  }
}

TextField

‫TextField הוא רכיב אינטראקטיבי שמאפשר להזין טקסט. הוא גם תומך באימות אופציונלי.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב TextField:

מאפיין (property)	סוג/ערכים	תיאור
label	v0.9: String v0.8: BoundValue	התווית של שדה הטקסט.
‫value (גרסה 0.9) text (גרסה 0.8)	v0.9: מחרוזת או DataBinding v0.8: BoundValue	תוכן הטקסט או הנתיב המקושר.
textFieldType	shortText, longText, number, obscured, date	סוג שדה הטקסט.
validationRegexp	String	ביטוי רגולרי לאימות.

v0.9 JSON

{
  "id": "email-input",
  "component": "TextField",
  "label": "Email Address",
  "value": { "path": "/user/email" },
  "textFieldType": "shortText"
}

‫JSON בגרסה v0.8

{
  "id": "email-input",
  "component": {
    "TextField": {
      "label": { "literalString": "Email Address" },
      "text": { "path": "/user/email" },
      "textFieldType": "shortText"
    }
  }
}

CheckBox

הרכיב CheckBox הוא מתג בוליאני שמאפשר להפעיל או להשבית הגדרה.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב CheckBox:

מאפיין (property)	סוג/ערכים	תיאור
label	v0.9: String v0.8: BoundValue	התווית של תיבת הסימון.
value	‫v0.9: DataBinding (boolean) ‫v0.8: BoundValue (boolean)	הערך של תיבת הסימון (true/false) או הנתיב המקשר.

v0.9 JSON

{
  "id": "terms-checkbox",
  "component": "CheckBox",
  "label": "I agree to the terms",
  "value": { "path": "/form/agreedToTerms" }
}

v0.8 JSON

{
  "id": "terms-checkbox",
  "component": {
    "CheckBox": {
      "label": { "literalString": "I agree to the terms" },
      "value": { "path": "/form/agreedToTerms" }
    }
  }
}

פס ההזזה

הרכיב Slider מאפשר לבחור ערך מספרי מטווח ספציפי.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב Slider:

מאפיין (property)	סוג/ערכים	תיאור
value	‫v0.9: DataBinding (מספר) v0.8: BoundValue (מספר)	הערך הנוכחי של פס ההזזה או הנתיב המקושר.
minValue	מספר	הערך המינימלי של הטווח.
maxValue	מספר	הערך המקסימלי בטווח.

‫v0.9 JSON

{
  "id": "volume",
  "component": "Slider",
  "value": { "path": "/settings/volume" },
  "minValue": 0,
  "maxValue": 100
}

v0.8 JSON

{
  "id": "volume",
  "component": {
    "Slider": {
      "value": { "path": "/settings/volume" },
      "minValue": 0,
      "maxValue": 100
    }
  }
}

DateTimeInput

הרכיב DateTimeInput מאפשר לבחור תאריך ושעה.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב DateTimeInput:

מאפיין (property)	סוג/ערכים	תיאור
value	‫v0.9: DataBinding v0.8: BoundValue	הערך של התאריך או השעה שנבחרו, או נתיב מאוגד.
enableDate	בוליאני	אם להפעיל את בחירת התאריך.
enableTime	בוליאני	האם להפעיל את האפשרות לבחירת שעה.

v0.9 JSON

{
  "id": "date-picker",
  "component": "DateTimeInput",
  "value": { "path": "/booking/date" },
  "enableDate": true,
  "enableTime": false
}

‫JSON בגרסה v0.8

{
  "id": "date-picker",
  "component": {
    "DateTimeInput": {
      "value": { "path": "/booking/date" },
      "enableDate": true,
      "enableTime": false
    }
  }
}

ChoicePicker (גרסה 0.9) / MultipleChoice (גרסה 0.8)

לבחור אפשרות אחת או יותר מתוך רשימה. שימו לב שהשם של הרכיב הזה שונה מ-MultipleChoice בגרסה 0.8 ל-ChoicePicker בגרסה 0.9.

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

מאפיין (property)	סוג/ערכים	תיאור
options	מערך של אובייקטים	רשימת האפשרויות שהמשתמש יכול לבחור. לכל אפשרות צריכה להיות תווית (מחרוזת בגרסה 0.9, BoundValue בגרסה 0.8) וערך.
selections	‫v0.9: DataBinding v0.8: BoundValue	הערכים שנבחרו או הנתיב המקשר.
maxAllowedSelections	מספר	המספר המקסימלי של בחירות שאפשר לבצע.

v0.9 JSON

{
  "id": "country-select",
  "component": "ChoicePicker",
  "options": [
    { "label": "USA", "value": "us" },
    { "label": "Canada", "value": "ca" }
  ],
  "selections": { "path": "/form/country" },
  "maxAllowedSelections": 1
}

‫JSON בגרסה v0.8

{
  "id": "country-select",
  "component": {
    "MultipleChoice": {
      "options": [
        { "label": { "literalString": "USA" }, "value": "us" },
        { "label": { "literalString": "Canada" }, "value": "ca" }
      ],
      "selections": { "path": "/form/country" },
      "maxAllowedSelections": 1
    }
  }
}

רכיבים בסיסיים של קונטיינר קטלוג

רכיבי מאגר משמשים לקיבוץ ולארגון של רכיבים אחרים. אלה רכיבי הקונטיינר שזמינים:

קלפים

רכיב Card הוא מאגר עם גובה, גבול וריווח פנימי שמקבץ תוכן קשור.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב Card:

מאפיין (property)	סוג/ערכים	תיאור
child	מזהה הרכיב	המזהה של הרכיב שיוצג בתוך הכרטיס.

‫v0.9 JSON

{
  "id": "info-card",
  "component": "Card",
  "child": "card-content"
}

v0.8 JSON

{
  "id": "info-card",
  "component": {
    "Card": {
      "child": "card-content"
    }
  }
}

מודאל

רכיב Modal הוא תיבת דו-שיח של שכבת-על שמופעלת על ידי רכיב של נקודת כניסה.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב Modal:

מאפיין (property)	סוג/ערכים	תיאור
entryPointChild	מזהה הרכיב	המזהה של הרכיב שמפעיל את החלון הקופץ (למשל, Button).
contentChild	מזהה הרכיב	המזהה של הרכיב שיוצג כתוכן של המודל.

‫v0.9 JSON

{
  "id": "confirmation-modal",
  "component": "Modal",
  "entryPointChild": "open-modal-btn",
  "contentChild": "modal-content"
}

v0.8 JSON

{
  "id": "confirmation-modal",
  "component": {
    "Modal": {
      "entryPointChild": "open-modal-btn",
      "contentChild": "modal-content"
    }
  }
}

כרטיסיות

רכיב Tabs מספק ממשק עם כרטיסיות לארגון התוכן בחלוניות שניתן להחליף ביניהן.

בטבלה הבאה מפורטים המאפיינים הזמינים לרכיב Tabs:

מאפיין (property)	סוג/ערכים	תיאור
tabItems	מערך של אובייקטים	רשימת הכרטיסיות. לכל פריט צריך להיות title (מחרוזת בגרסה 0.9, BoundValue בגרסה 0.8) וchild (מזהה רכיב).

v0.9 JSON

{
  "id": "settings-tabs",
  "component": "Tabs",
  "tabItems": [
    { "title": "General", "child": "general-tab" },
    { "title": "Privacy", "child": "privacy-tab" }
  ]
}

‫JSON בגרסה v0.8

{
  "id": "settings-tabs",
  "component": {
    "Tabs": {
      "tabItems": [
        { "title": { "literalString": "General" }, "child": "general-tab" },
        { "title": { "literalString": "Privacy" }, "child": "privacy-tab" }
      ]
    }
  }
}

סיכום ההבדלים בין הגרסאות

השמות והמאפיינים של הרכיבים זהים ברוב המקרים בכל הגרסאות. ההבדלים המבניים הם:

כיוון המדרון	v0.8	v0.9
Component wrapper	"component": { "Text": { ... } }	"component": "Text", ...props
ערכי מחרוזת	{ "literalString": "Hello" }	"Hello"
ילדים	{ "explicitList": ["a", "b"] }	["a", "b"]
קישור נתונים	{ "path": "/data" }	{ "path": "/data" } (אותו דבר)
עיצוב טקסט/תמונה	usageHint	variant
עיצוב כפתורים	primary: true	variant: "primary"
פורמט הפעולה	{ "name": "..." }	{ "event": { "name": "..." } }
רכיב בחירה	MultipleChoice	ChoicePicker
יישור הפריסה	distribution, alignment	justify, align
הערך של TextField	text	value

מדריך אבולוציה

מידע על המעבר מגרסה 0.8 לגרסה 0.9 זמין במדריך למעבר מגרסה 0.8 לגרסה 0.9.

דוגמאות חיות

כדי לראות את כל הרכיבים בפעולה:

cd samples/client/angular
yarn start gallery

הערה: שימוש במנהל החבילות: כדי להריץ את האפליקציות המובנות לדוגמה במאגר A2UI, צריך את Yarn (yarn start gallery) כפי שהוגדר על ידי סביבות העבודה של Corepack. לשימוש רגיל ולפרויקטים עצמאיים מחוץ למאגר הזה, השתמשו במנהל החבילות לבחירתכם (למשל npm, ‏ pnpm).

המאמרים הבאים

• הגדרה של קטלוג משלכם: יצירת רכיבים משלכם
• מדריך לעיצוב: עיצוב רכיבים בהתאם למותג