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

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

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

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

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

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

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

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

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

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

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

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

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

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 הפריסה קובעת את סידור הצאצאים לאורך הציר הראשי (אנכית).
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",
    "color": "warn",
    "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",
    "color": "warn",
    "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 Grid List כדי לסדר קומפוננטות צאצא באריחים.

בטבלה הבאה מפורטים המאפיינים שזמינים לרכיב 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 הפריסה קובעת את סידור הצאצאים לאורך הציר הראשי (אופקית).
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"
      }
    }
  }
]

רכיבי התוכן של קטלוג Material

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

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 לא - לוח הצבעים של הסמל (ראשי, משני, אזהרה).
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 לרכיב Progress Bar של Angular Material. יש תמיכה במצבים מסוימים, לא מסוימים, במצב מאגר ובמצב שאילתה.

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

מאפיין (property) חובה ערך ברירת המחדל תיאור
value לא 0 ערך ההתקדמות (0 עד 100) במצבי חישוב ובמצבי מאגר.
mode לא determinate המצב של סרגל ההתקדמות. אחד מהערכים הבאים: determinate,‏ indeterminate,‏ buffer,‏ query.
bufferValue לא 0 ערך המאגר (0 עד 100) במצב מאגר.
color לא - לוח הצבעים של סרגל ההתקדמות (primary,‏ accent,‏ warn).
ariaLabel לא - טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby לא - מציין את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
style לא - סגנונות בתוך השורה שרוצים להחיל על הרכיב.
weight לא - משקל הפריסה של הרכיב כשהוא ממוקם במאגר גמיש. 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

‫wrapper של A2UI לרכיב Angular Material Progress Spinner. התמיכה כוללת מצבים דטרמיניסטיים ולא דטרמיניסטיים, ומאפיינים מותאמים אישית.

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

מאפיין (property) חובה ערך ברירת המחדל תיאור
value לא 0 ערך ההתקדמות (0 עד 100) במצב קבוע.
mode לא determinate מצב הספינר. אחת מהאפשרויות הבאות: determinate,‏ indeterminate.
diameter לא 40 הקוטר של סימן ההתקדמות בפיקסלים.
strokeWidth לא 4 רוחב הקו של הספינר בפיקסלים.
color לא - לוח הצבעים של הסמל של הטעינה ("ראשי", "משני", "אזהרה").
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"
  }
]

רכיבי ניווט בקטלוג Material

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

MaterialButton

לחצן Material Design.

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

מאפיין (property) חובה ערך ברירת המחדל תיאור
label לא - תווית הטקסט שתוצג על הלחצן.
leadingIcon לא - השם של סמל Material שיוצג לפני התווית.
trailingIcon לא - השם של סמל Material שיוצג אחרי התווית.
color לא - לוח הצבעים של הכפתור (ראשי, משני, אזהרה).
variant לא basic הווריאציה של סגנון הכפתור. אחד מהערכים הבאים: raised,‏ flat,‏ stroked,‏ basic.
disabled לא false האם הכפתור מושבת.
action לא - הפעולה בצד הלקוח שמופעלת כשלוחצים על הלחצן.
tooltip לא - טקסט ההסבר הקצר שיוצג כשמעבירים את העכבר מעל הפריט.
ariaLabel לא - טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby לא - מציין את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby לא - מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
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. כולל לחצן הפעלה ופריטים בתפריט הנפתח.

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

מאפיין (property) חובה ערך ברירת המחדל תיאור
label לא - תווית הטקסט שמוצגת על לחצן ההפעלה של התפריט.
icon לא - השם של סמל Material שיוצג על לחצן ההפעלה.
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 האם תיבת הסימון מושבתת.
required לא false האם חובה לסמן את תיבת הסימון.
color לא - לוח הצבעים של תיבת הסימון (primary,‏ accent,‏ warn).
labelPosition לא after המיקום של התווית ביחס לתיבת הסימון (before,‏ after).
ariaLabel לא - טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby לא - מציין את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby לא - מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
tooltip לא - טקסט ההסבר הקצר שיוצג כשמעבירים את העכבר מעל הפריט.
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 לא - מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
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 האם בוחר התאריכים מושבת.
required לא false האם נדרש לבחור תאריך.
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 האם הקלט הוא לקריאה בלבד.
required לא false האם נדרש קלט.
ariaLabel לא - טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby לא - מציין את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby לא - מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
type לא text סוג הקלט. אחת מהאפשרויות הבאות: text,‏ number,‏ password,‏ email,‏ tel,‏ url.
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 לא - לוח הצבעים של לחצן הבחירה (primary,‏ accent,‏ warn).
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 לא - הטקסט שמוצג כ-placeholder כשלא נבחר ערך.
value לא - הערך הנוכחי שנבחר. זה יכול להיות מחרוזת מילולית או הפניה לערך במודל הנתונים.
options כן - רשימת האפשרויות הזמינות לבחירה. יכול להיות מערך של אובייקטים {label, value} או הפניה לקשירת נתונים.
disabled לא false אם רכיב הבחירה מושבת.
required לא false האם צריך לציין ערך.
ariaLabel לא - טקסט מובן לקוראי מסך. מומלץ לשיפור הנגישות כשאין תווית גלויה.
ariaLabelledby לא - מציין את הרכיב (או הרכיבים) שמתייג את הרכיב הנוכחי. משמש לנגישות.
ariaDescribedby לא - מזהה את הרכיב (או הרכיבים) שמתאר את הרכיב הנוכחי. משמש לנגישות.
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 האם בורר השעות מושבת.
required לא false אם נדרשת בחירת שעה.
style לא - סגנונות בתוך השורה שרוצים להחיל על הרכיב.
weight לא - משקל הפריסה של הרכיב כשהוא ממוקם במאגר גמיש. 
[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

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

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

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

מידע נוסף על המאפיינים האלה זמין במאמרים הבאים:

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

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

מאפיין (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"
}

‫v0.8 JSON

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

עמודה

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

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

מאפיין (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": "content",
  "component": "Column",
  "children": ["header", "body", "footer"],
  "justify": "start",
  "align": "stretch"
}

‫v0.8 JSON

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

רשימה

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

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

מאפיין (property) סוג/ערכים תיאור
children ‫v0.9: מערך של מזהי רכיבים או הגדרת תבנית
‫v0.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"
}

‫v0.8 JSON

{
  "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"
}

‫v0.8 JSON

{
  "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"
}

‫v0.8 JSON

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

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

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

כפתור

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

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

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

‫v0.9 JSON

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

‫v0.8 JSON

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

TextField

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

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

מאפיין (property) סוג/ערכים תיאור
label ‫v0.9: מחרוזת
‫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"
}

‫v0.8 JSON

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

CheckBox

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

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

מאפיין (property) סוג/ערכים תיאור
label ‫v0.9: מחרוזת
‫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 (number)
v0.8: BoundValue (number) 		הערך הנוכחי של פס ההזזה או של הנתיב המקביל.
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
}

‫v0.8 JSON

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

ChoicePicker (v0.9) / MultipleChoice (v0.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
}

‫v0.8 JSON

{
  "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" }
  ]
}

‫v0.8 JSON

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

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

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

כיוון המדרון v0.8 v0.9
רכיב 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

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