Riferimento alla galleria dei componenti A2UI

Questa pagina fornisce un riferimento completo per tutti i componenti A2UI disponibili, inclusi i componenti di layout, visualizzazione, interattivi e contenitore, nonché le proprietà comuni.

Componenti del catalogo dei materiali e componenti di base del catalogo

A2UI fornisce due cataloghi di componenti distinti per la creazione di interfacce utente dell'agente: il catalogo dei materiali e il catalogo di base.

Il catalogo dei materiali contiene componenti progettati specificamente per rispettare le linee guida di Google Material Design, offrendo un insieme più ricco e stilizzato di elementi dell'interfaccia utente supportati nelle configurazioni A2UI v0.9.

Il catalogo di base contiene primitive UI standard e indipendenti dal sistema di progettazione, come layout, azioni e input, supportate nelle configurazioni A2UI v0.9 e v0.8.

Componenti del catalogo dei materiali

Questa sezione fornisce un riferimento per i componenti Material Design A2UI disponibili, inclusi layout, display, navigazione e input.

Proprietà comuni del catalogo dei materiali

Tutti i componenti, indipendentemente dal tipo specifico, condividono un insieme di proprietà comuni che possono essere configurate:

Componenti del layout del catalogo dei materiali

I componenti di layout vengono utilizzati per strutturare e disporre altri componenti all'interno dell'interfaccia utente.

MaterialCard

Contenitore della scheda Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialCard:

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

MaterialColumn

Contenitore di layout che dispone gli elementi verticalmente utilizzando le linee guida di Material.

La tabella seguente descrive le proprietà disponibili per il componente MaterialColumn:

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

Contenitore della finestra di dialogo del menu Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialDialog:

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

Linea di divisione Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialDivider:

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

Contenitore del riquadro espandibile Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialExpansionPanel:

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

Componente contenitore A2UI per il layout a griglia. Utilizza l'elenco a griglia di Angular Material per disporre i componenti secondari in riquadri.

La tabella seguente descrive le proprietà disponibili per il componente MaterialGridList:

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

Contenitore di layout che dispone gli elementi orizzontalmente utilizzando le linee guida di Material.

La tabella seguente descrive le proprietà disponibili per il componente MaterialRow:

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

Componenti dei contenuti del catalogo dei materiali

I componenti di visualizzazione e dei contenuti vengono utilizzati per presentare all'utente informazioni, contenuti multimediali e stato.

MaterialBadge

Mostra un badge di Material Design sopra un elemento secondario.

La tabella seguente descrive le proprietà disponibili per il componente MaterialBadge:

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

MaterialIcon

Mostra un'icona di Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialIcon:

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

MaterialImage

Componente A2UI per il rendering di un'immagine in un contesto Material Design. Supporta le proprietà angoli arrotondati, proporzioni e object-fit.

La tabella seguente descrive le proprietà disponibili per il componente MaterialImage:

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

Wrapper A2UI per il componente barra di avanzamento di Angular Material. Supporta le modalità determinate, indeterminate, buffer e query.

La tabella seguente descrive le proprietà disponibili per il componente MaterialProgressBar:

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

MaterialProgressSpinner

Wrapper A2UI per il componente Rotellina di caricamento di Angular Material. Supporta le modalità determinata e indeterminata e le dimensioni personalizzate.

La tabella seguente descrive le proprietà disponibili per il componente MaterialProgressSpinner:

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

MaterialTable

Wrapper A2UI per il componente Angular Material Table. Esegue il rendering dei dati strutturati in colonne e righe.

La tabella seguente descrive le proprietà disponibili per il componente MaterialTable:

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

MaterialText

Visualizza il testo con la tipografia Material.

La tabella seguente descrive le proprietà disponibili per il componente MaterialText:

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

Componenti di navigazione del catalogo Material

I componenti di navigazione e azione consentono agli utenti di eseguire azioni o spostarsi tra le visualizzazioni.

MaterialButton

Pulsante Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialButton:

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

MaterialIconButton

Pulsante dell'icona Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialIconButton:

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

MaterialMenu

Wrapper A2UI per il componente Menu di Angular Material. Fornisce un pulsante di attivazione e voci di menu a discesa.

La tabella seguente descrive le proprietà disponibili per il componente MaterialMenu:

[
  {
    "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 per il componente Schede di Angular Material. Esegue il rendering della navigazione a schede e gestisce la selezione della scheda attiva.

La tabella seguente descrive le proprietà disponibili per il componente MaterialTabs:

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

Componenti di input del catalogo dei materiali

I componenti di input e modulo consentono agli utenti di inserire testo, effettuare selezioni e attivare/disattivare le opzioni.

MaterialButtonToggle

Gruppo di pulsanti di attivazione/disattivazione Material Design per la selezione singola.

La tabella seguente descrive le proprietà disponibili per il componente MaterialButtonToggle:

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

Componente casella di controllo Material Design per lo stato booleano. Per un'accessibilità ottimale, fornisci un'etichetta descrittiva o utilizza ariaLabel per le tecnologie per la disabilità.

La tabella seguente descrive le proprietà disponibili per il componente MaterialCheckbox:

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

MaterialChips

Componente casella di riepilogo con chip Material Design per la selezione singola.

La tabella seguente descrive le proprietà disponibili per il componente MaterialChips:

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

Componente selettore della data di Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialDatepicker:

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

MaterialInput

Campo di immissione testo Material Design.

La tabella seguente descrive le proprietà disponibili per il componente MaterialInput:

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

MaterialRadioButton

Wrapper A2UI per il componente Pulsante di opzione Angular Material. Supporta la selezione singola da un elenco di opzioni all'interno di un gruppo di pulsanti di opzione.

La tabella seguente descrive le proprietà disponibili per il componente MaterialRadioButton:

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

Componente di selezione (menu a discesa) Material Design per la selezione singola. Per un'accessibilità ottimale, fornisci sempre un'etichetta descrittiva o utilizza aria-label per le tecnologie per la disabilità.

La tabella seguente descrive le proprietà disponibili per il componente MaterialSelect:

[
  {
    "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 per il componente Angular Material Slide Toggle. Supporta i binding di attivazione/disattivazione booleana e gli attributi di accessibilità personalizzati.

La tabella seguente descrive le proprietà disponibili per il componente MaterialSlideToggle:

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

MaterialSlider

Wrapper A2UI per il componente Dispositivo di scorrimento di Angular Material. Supporta la selezione di valori numerici e i vincoli di intervallo.

La tabella seguente descrive le proprietà disponibili per il componente MaterialSlider:

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

MaterialTimepicker

Wrapper A2UI per il componente Timepicker di Angular Material. Supporta la selezione dell'ora e l'integrazione dei campi del modulo.

La tabella seguente descrive le proprietà disponibili per il componente MaterialTimepicker:

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

Componenti di base del catalogo

Questa sezione fornisce un riferimento per i componenti di base del catalogo A2UI disponibili.

File di schema del catalogo di base

Per ulteriori informazioni su queste proprietà, vedi:

• v0.9 Definizione di base del catalogo (schema JSON)
• v0.8

Proprietà comuni di base del catalogo

Tutti i componenti, indipendentemente dal tipo specifico, condividono un insieme di proprietà comuni che possono essere configurate:

Componenti di base del layout del catalogo

I componenti di layout vengono utilizzati per strutturare e disporre altri componenti all'interno dell'interfaccia utente. Sono disponibili i seguenti componenti del layout:

Riga

Un Row è un componente di layout utilizzato per disporre i relativi componenti secondari orizzontalmente, da sinistra a destra. Funge da contenitore in cui puoi posizionare più componenti uno accanto all'altro. La spaziatura e il posizionamento esatti degli elementi secondari all'interno della riga possono essere controllati utilizzando le proprietà justify/distribution e align/alignment.

La tabella seguente descrive le proprietà disponibili per il componente Row:

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

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

Colonna

Un Column è un componente di layout utilizzato per disporre i relativi componenti secondari verticalmente, dall'alto verso il basso. Funge da contenitore in cui puoi posizionare più componenti uno sotto l'altro. La spaziatura e il posizionamento esatti dei figli all'interno della colonna possono essere controllati utilizzando le proprietà justify/distribution e align/alignment.

La tabella seguente descrive le proprietà disponibili per il componente Column:

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

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

Elenco

Un List è un componente di layout che mostra un elenco scorrevole di elementi. Supporta elementi secondari statici e modelli dinamici per generare elementi dai dati. La direzione di scorrimento può essere verticale o orizzontale.

La tabella seguente descrive le proprietà disponibili per il componente List:

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

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

Componenti di base della visualizzazione del catalogo

I componenti di visualizzazione vengono utilizzati per presentare le informazioni all'utente. Sono disponibili i seguenti componenti di visualizzazione:

Testo

Il componente Text mostra contenuti di testo e supporta vari suggerimenti di stile, come intestazioni, sottotitoli codificati e testo del corpo.

La tabella seguente descrive le proprietà disponibili per il componente Text:

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

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

Immagine

Un componente Image mostra le immagini di un URL specificato e fornisce opzioni per controllare il modo in cui l'immagine si adatta al contenitore.

La tabella seguente descrive le proprietà disponibili per il componente Image:

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

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

Icona

Il componente Icon mostra le icone di un set di standard definito nel catalogo.

La tabella seguente descrive le proprietà disponibili per il componente Icon:

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

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

Divisore

Il componente Divider visualizza una linea di separazione visiva, che può essere orizzontale o verticale.

La tabella seguente descrive le proprietà disponibili per il componente Divider:

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

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

Componenti interattivi di base del catalogo

I componenti interattivi ti consentono di interagire con l'applicazione, ad esempio fornendo input o attivando azioni. Sono disponibili i seguenti componenti interattivi:

Pulsante

Il componente Button è un elemento selezionabile che attiva un'azione o un evento specifico all'interno dell'applicazione.

La tabella seguente descrive le proprietà disponibili per il componente Button:

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

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

TextField

TextField è un componente interattivo che ti consente di inserire testo. Supporta anche la convalida facoltativa.

La tabella seguente descrive le proprietà disponibili per il componente TextField:

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

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

CheckBox

Il componente CheckBox è un pulsante di attivazione/disattivazione booleano che ti consente di attivare o disattivare un'impostazione.

La tabella seguente descrive le proprietà disponibili per il componente CheckBox:

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

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

Dispositivo di scorrimento

Il componente Slider ti consente di selezionare un valore numerico da un intervallo specifico.

La tabella seguente descrive le proprietà disponibili per il componente Slider:

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

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

DateTimeInput

Il componente DateTimeInput ti consente di scegliere una data e un'ora.

La tabella seguente descrive le proprietà disponibili per il componente DateTimeInput:

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

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

ChoicePicker (v0.9) / MultipleChoice (v0.8)

Seleziona una o più opzioni da un elenco. Tieni presente che questo componente è stato rinominato in ChoicePicker nella versione 0.9 da MultipleChoice nella versione 0.8.

La tabella seguente descrive le proprietà disponibili:

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

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

Componenti di base del contenitore del catalogo

I componenti contenitore vengono utilizzati per raggruppare e organizzare altri componenti. Sono disponibili i seguenti componenti del contenitore:

Carte

Un componente Card è un contenitore con elevazione, un bordo e un riempimento che raggruppa i contenuti correlati.

La tabella seguente descrive le proprietà disponibili per il componente Card:

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

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

Modale

Un componente Modal è una finestra di dialogo di overlay attivata da un componente punto di ingresso.

La tabella seguente descrive le proprietà disponibili per il componente Modal:

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

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

Schede

Un componente Tabs fornisce un'interfaccia a schede per organizzare i contenuti in pannelli commutabili.

La tabella seguente descrive le proprietà disponibili per il componente Tabs:

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

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

Riepilogo delle differenze tra le versioni

I nomi e le proprietà dei componenti sono in gran parte gli stessi nelle varie versioni. Le differenze strutturali sono:

Guida all'evoluzione

Per informazioni sul passaggio dalla versione 0.8 alla 0.9, consulta la guida all'evoluzione dalla versione 0.8 alla 0.9.

Esempi live

Per vedere tutti i componenti in azione:

cd samples/client/angular
yarn start gallery

Passaggi successivi

• Definizione del tuo catalogo: crea i tuoi componenti
• Guida ai temi: personalizza lo stile dei componenti in modo che corrispondano al tuo brand