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

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

מאפיינים נפוצים

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

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

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

רכיבי פריסה

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

Row

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

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

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

JSON

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

עמודה

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

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

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

JSON

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

רשימה

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

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

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

JSON

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

רכיבים של מודעות לרשת המדיה

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

טקסט

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

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

מאפיין (property) סוג/ערכים תיאור
text BoundValue תוכן הטקסט שיוצג.
usageHint h1, h2, h3, h4, h5, caption, body רמז לעיצוב הטקסט.

JSON

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

תמונה

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

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

מאפיין (property) סוג/ערכים תיאור
url BoundValue כתובת ה-URL של התמונה שתוצג.
fit String איך התמונה צריכה להתאים לקונטיינר שלה (לדוגמה, cover).
usageHint String רמז לשימוש (למשל, hero).

JSON

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

סמל

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

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

מאפיין (property) סוג/ערכים תיאור
name BoundValue השם של הסמל שיוצג (למשל, check).

JSON

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

קו מפריד

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

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

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

JSON

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

רכיבים אינטראקטיביים

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

Button

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

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

מאפיין (property) סוג/ערכים תיאור
child מזהה הרכיב המזהה של הרכיב שיוצג בתוך הכפתור (לדוגמה, רכיב Text).
primary בוליאני האם זה כפתור ראשי (מודגש).
action אובייקט הפעולה שמופעלת כשלוחצים על הלחצן.

JSON

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

TextField

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

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

מאפיין (property) סוג/ערכים תיאור
label BoundValue התווית של שדה הטקסט.
text BoundValue תוכן הטקסט או הנתיב המאוגד.
textFieldType shortText, longText, number, obscured, date סוג שדה הטקסט.
validationRegexp String ביטוי רגולרי לאימות.

JSON

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

CheckBox

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

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

מאפיין (property) סוג/ערכים תיאור
label BoundValue התווית של תיבת הסימון.
value BoundValue (בוליאני) הערך של תיבת הסימון (true/false) או הנתיב המקשר.

JSON

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

פס הזזה

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

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

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

JSON

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

DateTimeInput

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

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

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

JSON

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

שאלה אמריקאית

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

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

מאפיין (property) סוג/ערכים תיאור
options מערך של אובייקטים רשימת האפשרויות שהמשתמש יכול לבחור. לכל אפשרות צריכים להיות תווית וערך.
selections BoundValue הערכים שנבחרו או הנתיב המקשר.
maxAllowedSelections מספר המספר המקסימלי של בחירות שמותר לבצע.

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 מזהה הרכיב המזהה של הרכיב שיוצג בתוך הכרטיס.

JSON

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

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

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

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

JSON

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

כרטיסיות

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

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

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

JSON

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