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 container, nonché le proprietà comuni.

Componenti del catalogo Material e componenti del catalogo di base

A2UI fornisce due cataloghi di componenti distinti per la creazione di interfacce utente dell'agente: il catalogo Material 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, indipendenti dal sistema di progettazione, come layout, azioni e input, supportate nelle configurazioni A2UI v0.9 e v0.8.

Componenti del catalogo Material

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

Proprietà comuni del catalogo dei materiali

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

Proprietà Obbligatorio Descrizione
id Sì Un identificatore univoco del componente all'interno della superficie corrente.
accessibility No Attributi per migliorare l'accessibilità, come etichette e ruoli.
weight No Un valore utilizzato nei layout MaterialRow o MaterialColumn per controllare lo spazio occupato dal componente rispetto ai relativi elementi di pari livello, in modo simile a flex-grow.

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:

Proprietà Obbligatorio Valore predefinito Descrizione
children Sì - Definisce gli ID secondari.
appearance No raised Lo stile di visualizzazione della scheda. Uno tra i seguenti: "outlined", "raised".
align No start Allineamento dei figli. Uno tra i seguenti: "center", "end", "start", "stretch".
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
href No - URL facoltativo a cui indirizzare l'utente quando fa clic sulla scheda. Una volta impostata, la scheda diventa interattiva e apre l'URL in una nuova scheda.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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:

Proprietà Obbligatorio Valore predefinito Descrizione
children Sì - Definisce gli ID secondari.
justify No start Definisce la disposizione degli elementi secondari lungo l'asse principale (verticalmente). Uno tra i seguenti: "start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly".
align No stretch Allineamento orizzontale degli elementi secondari ("start", "center", "end", "stretch").
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 di Material Design.

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

Proprietà Obbligatorio Valore predefinito Descrizione
open No false Indica se la finestra di dialogo è aperta. Può essere un valore booleano letterale o un riferimento di associazione di dati.
title No - Il titolo della finestra di dialogo.
disableClose No false Indica se l'utente può chiudere la finestra di dialogo facendo clic all'esterno o premendo Esc.
width No - La larghezza della finestra di dialogo (ad es. "500 px").
height No - L'altezza della finestra di dialogo (ad es. "400 px").
children Sì - Definisce gli ID secondari.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 di Material Design.

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

Proprietà Obbligatorio Valore predefinito Descrizione
inset No false Indica se il divisore è inserito.
vertical No false Indica se il divisore è verticale.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 di espansione Material Design.

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

Proprietà Obbligatorio Valore predefinito Descrizione
title No - Il titolo visualizzato nell'intestazione del riquadro di espansione.
description No - La descrizione visualizzata nell'intestazione del riquadro di espansione.
expanded No false Indica se il pannello è espanso. Può essere un valore booleano letterale o un riferimento all'associazione di dati.
disabled No false Indica se il pannello di espansione è disattivato.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
children Sì - Definisce gli ID secondari.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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:

Proprietà Obbligatorio Valore predefinito Descrizione
children Sì - Definisce gli ID secondari.
cols No 2 Numero di colonne nell'elenco a griglia. Può essere un numero letterale o un riferimento di associazione di dati.
rowHeight No 1:1 Rapporto altezza riga o altezza fissa (ad es. "100 px"). Può essere una stringa letterale o un riferimento di associazione di dati.
gutterSize No 1px Dimensione della spaziatura della griglia. Può essere una stringa letterale o un riferimento di associazione di dati.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 in orizzontale utilizzando le linee guida di Material.

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

Proprietà Obbligatorio Valore predefinito Descrizione
children Sì - Definisce gli ID secondari.
justify No start Definisce la disposizione degli elementi secondari lungo l'asse principale (orizzontalmente). Uno tra i seguenti: "start", "center", "end", "spaceAround", "spaceBetween", "spaceEvenly".
align No stretch Allineamento verticale dei figli ("start", "center", "end", "stretch").
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 di materiali

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

MaterialBadge

Visualizza un badge Material Design sopra un elemento secondario.

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

Proprietà Obbligatorio Valore predefinito Descrizione
text No - Contenuto testuale da visualizzare nel badge.
color No - Tavolozza dei colori del badge ("primary", "accent", "warn").
position No above after Posizione del badge rispetto al contenitore ("above after", "above before", "below after", "below before").
size No medium Dimensioni del badge ("small", "medium", "large").
overlap No true Indica se il badge deve sovrapporsi al suo contenitore.
disabled No false Indica se il badge è disattivato.
hidden No false Se il badge è nascosto.
description No - Descrizione accessibile del badge.
children Sì - Definisce gli ID secondari.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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:

Proprietà Obbligatorio Valore predefinito Descrizione
icon Sì - Il nome dell'icona Material da visualizzare.
color No - Tavolozza dei colori dell'icona (principale, di contrasto, di avviso).
tooltip No - Testo facoltativo della descrizione comando da visualizzare al passaggio del mouse/quando viene selezionato.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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à degli angoli arrotondati, delle proporzioni e di object-fit.

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

Proprietà Obbligatorio Valore predefinito Descrizione
url Sì - L'URL dell'immagine da visualizzare.
alt No - Testo alternativo accessibile per l'immagine.
fit No - Specifica come ridimensionare l'immagine per adattarla al contenitore. Uno tra i seguenti: "fill", "contain", "cover", "scaleDown", "none".
width No - Larghezza personalizzata dell'immagine (ad es. "100px", "100%").
height No - Altezza personalizzata dell'immagine (ad es. "100px", "100%").
aspectRatio No - Proporzioni personalizzate dell'immagine (ad es. "16/9", "1").
roundedCorners No false Indica se applicare gli angoli arrotondati standard di Material Design.
borderRadius No - Raggio del bordo personalizzato dell'immagine (ad es. "50%", "12px"). Esegue l'override di roundedCorners.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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:

Proprietà Obbligatorio Valore predefinito Descrizione
value No 0 Il valore di avanzamento (da 0 a 100) nelle modalità determinata e buffer.
mode No determinate La modalità della barra di avanzamento. Uno tra i seguenti: "determinate", "indeterminate", "buffer", "query".
bufferValue No 0 Il valore del buffer (da 0 a 100) in modalità buffer.
color No - Tavolozza dei colori della barra di avanzamento ("primary", "accent", "warn").
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

Wrapper A2UI per il componente Angular Material Progress Spinner. Supporta le modalità deterministica e non deterministica e le dimensioni personalizzate.

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

Proprietà Obbligatorio Valore predefinito Descrizione
value No 0 Il valore di avanzamento (da 0 a 100) in modalità determinata.
mode No determinate La modalità dello spinner. Uno dei seguenti valori: "determinate", "indeterminate".
diameter No 40 Il diametro della rotellina di avanzamento in pixel.
strokeWidth No 4 La larghezza del tratto dell'indicatore di rotazione in pixel.
color No - Tavolozza dei colori dello spinner ("primary", "accent", "warn").
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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:

Proprietà Obbligatorio Valore predefinito Descrizione
columns Sì - Un array di definizioni di colonne, ognuna delle quali specifica un oggetto {header, field}.
rows Sì - L'elenco delle righe di dati. Può essere un array di record coppia chiave-valore o un riferimento di associazione di dati.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
caption No - Una didascalia/descrizione accessibile per la tabella.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

Mostra il testo con la tipografia di Material.

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

Proprietà Obbligatorio Valore predefinito Descrizione
text Sì - Il testo da visualizzare. Può essere una stringa letterale o un riferimento a un valore nel modello dei dati.
usageHint No body Un suggerimento per lo stile tipografico. Uno tra i seguenti: "h1", "h2", "h3", "h4", "h5", "subtitle1", "subtitle2", "body1", "body2", "body", "caption".
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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:

Proprietà Obbligatorio Valore predefinito Descrizione
label No - L'etichetta di testo da visualizzare sul pulsante.
leadingIcon No - Il nome dell'icona Material da visualizzare prima dell'etichetta.
trailingIcon No - Il nome dell'icona Material da visualizzare dopo l'etichetta.
variant No basic La variante dello stile del pulsante. Uno tra i seguenti: "raised", "flat", "stroked", "icon", "fab", "mini-fab", "basic".
appearance No - L'aspetto visivo del pulsante. Uno tra i seguenti: "text", "filled", "elevated", "outlined", "tonal".
disabled No false Indica se il pulsante è disattivato.
action No - L'azione da inviare quando viene fatto clic sul pulsante.
tooltip No - Testo della descrizione comando da visualizzare al passaggio del mouse.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
disableRipple No false Indica se l'effetto ripple al clic è disattivato.
extended No false Indica se il pulsante è esteso con un'etichetta o uno spazio per l'icona aggiuntivi.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Pulsante icona Material Design.

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

Proprietà Obbligatorio Valore predefinito Descrizione
icon Sì - Il nome dell'icona Material da visualizzare.
action Sì - L'azione lato client da inviare quando viene fatto clic sul pulsante dell'icona.
ariaLabel Sì - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità, poiché il pulsante contiene solo un'icona.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
color No - La tavolozza dei colori del pulsante (principale, di contrasto, di avviso).
disabled No false Indica se il pulsante è disattivato.
tooltip No - Testo della descrizione comando da visualizzare al passaggio del mouse.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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:

Proprietà Obbligatorio Valore predefinito Descrizione
label No - L'etichetta di testo visualizzata sul pulsante di attivazione del menu.
icon No - Il nome dell'icona Material da visualizzare sul pulsante di attivazione.
disabled No false Indica se il pulsante di attivazione del menu è disattivato.
value No - Il valore attualmente selezionato. Può essere una stringa letterale o un riferimento di associazione di dati.
options Sì - L'elenco delle opzioni di menu disponibili. Può essere un array di oggetti {label, value} o un riferimento di associazione di dati.
action No - L'azione lato client da inviare quando viene selezionato un elemento di menu.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 Angular Material Tabs. 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:

Proprietà Obbligatorio Valore predefinito Descrizione
tabs Sì - Un array di definizioni di schede, ognuna delle quali specifica un oggetto {label, content}.
activeTab No 0 L'indice a base 0 della scheda attualmente attiva. Può essere un numero letterale o un riferimento di associazione di dati.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 opzioni.

MaterialButtonToggle

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

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

Proprietà Obbligatorio Valore predefinito Descrizione
value No - Il valore attualmente selezionato. Può essere una stringa letterale o un riferimento a un valore nel modello dei dati.
options Sì - L'elenco delle opzioni disponibili per la selezione. Può essere un array di oggetti {label, value} o un riferimento di associazione di dati.
disabled No false Indica se il gruppo di pulsanti di attivazione/disattivazione è disattivato.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
appearance No standard Lo stile di aspetto del gruppo di pulsanti di attivazione/disattivazione. Uno tra i seguenti: "legacy", "standard".
vertical No false Indica se il gruppo di pulsanti di attivazione/disattivazione è disposto verticalmente.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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:

Proprietà Obbligatorio Valore predefinito Descrizione
label No - L'etichetta di testo visualizzata accanto alla casella di controllo.
checked No false Indica se la casella di controllo è selezionata. Può essere un valore booleano letterale o un riferimento a un valore nel modello dei dati.
disabled No false Indica se la casella di controllo è disattivata.
color No - La tavolozza dei colori della casella di controllo ("primary", "accent", "warn").
labelPosition No after Posizione dell'etichetta rispetto alla casella di controllo ("before", "after").
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
tooltip No - Testo della descrizione comando da visualizzare al passaggio del mouse.
checks No - Un array di regole di convalida (ognuna contenente una condizione booleana dinamica e un messaggio di errore) che vengono valutate in modo reattivo per determinare la validità dell'input.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 icone Material Design per la selezione singola.

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

Proprietà Obbligatorio Valore predefinito Descrizione
value No - Il valore attualmente selezionato. Può essere una stringa letterale o un riferimento a un valore nel modello dei dati.
options Sì - L'elenco delle opzioni di chip. Può essere un array di oggetti {label, value} o un riferimento di associazione di dati.
disabled No false Indica se la casella di riepilogo dei chip è disattivata.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
action No - L'azione da inviare quando viene selezionato un chip.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 del selettore data di Material Design.

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

Proprietà Obbligatorio Valore predefinito Descrizione
label No - L'etichetta per il campo del selettore della data.
placeholder No - Il testo segnaposto.
value No - La data attualmente selezionata in formato ISO.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
disabled No false Indica se il selettore della data è disattivato.
checks No - Un array di regole di convalida (ognuna contenente una condizione booleana dinamica e un messaggio di errore) che vengono valutate in modo reattivo per determinare la validità dell'input.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

Campo di immissione testo di Material Design.

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

Proprietà Obbligatorio Valore predefinito Descrizione
label No - L'etichetta del campo di immissione.
placeholder No - Il testo segnaposto.
value No - Il valore attuale dell'input. Può trattarsi di una stringa letterale o di un riferimento a un valore nel modello dei dati.
disabled No false Indica se l'input è disattivato.
name No - Il nome dell'elemento di input.
readonly No false Se l'input è di sola lettura.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
type No text Il tipo di controllo di immissione da visualizzare. Uno tra i seguenti: "text", "number", "email", "tel", "date". "password" non è consentito.
validationRegexp No - Espressione regolare per la convalida dell'input.
checks No - Un array di regole di convalida (ognuna contenente una condizione booleana dinamica e un messaggio di errore) che vengono valutate in modo reattivo per determinare la validità dell'input.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

Wrapper A2UI per il componente del 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:

Proprietà Obbligatorio Valore predefinito Descrizione
value No - Il valore attualmente selezionato. Può essere una stringa letterale o un riferimento di associazione di dati.
options Sì - L'elenco delle opzioni radio disponibili. Può essere un array di oggetti {label, value} o un riferimento di associazione di dati.
disabled No false Indica se il gruppo di pulsanti di opzione è disabilitato.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
color No - Tavolozza dei colori del pulsante di opzione ("primary", "accent", "warn").
labelPosition No after Posizione dell'etichetta rispetto al pulsante di opzione. Uno tra i seguenti: "before", "after".
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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) di 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:

Proprietà Obbligatorio Valore predefinito Descrizione
label No - L'etichetta del campo di selezione.
placeholder No - Il testo segnaposto mostrato quando non è selezionato alcun valore.
value No - Il valore attualmente selezionato. Può trattarsi di una stringa letterale o di un riferimento a un valore nel modello dei dati.
options Sì - L'elenco delle opzioni disponibili per la selezione. Può essere un array di oggetti {label, value} o un riferimento di associazione di dati.
disabled No false Indica se il componente di selezione è disattivato.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
checks No - Un array di regole di convalida (ognuna contenente una condizione booleana dinamica e un messaggio di errore) che vengono valutate in modo reattivo per determinare la validità dell'input.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 Pulsante di attivazione/disattivazione di Angular Material. Supporta i binding di attivazione/disattivazione booleani e gli attributi di accessibilità personalizzati.

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

Proprietà Obbligatorio Valore predefinito Descrizione
label No - L'etichetta di testo visualizzata accanto al pulsante di attivazione/disattivazione.
checked No false Se il cursore è selezionato. Può essere un valore booleano letterale o un riferimento di associazione di dati.
disabled No false Indica se l'opzione di attivazione/disattivazione della slide è disattivata.
required No false Indica se l'interruttore è obbligatorio.
color No - Tavolozza di colori del pulsante di attivazione/disattivazione ("primary", "accent", "warn").
labelPosition No after Posizione dell'etichetta rispetto al pulsante di attivazione/disattivazione ("before", "after").
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
tooltip No - Testo della descrizione comando da visualizzare al passaggio del mouse.
style No - Stili in linea da applicare all'elemento.
weight No - Peso del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 Angular Material Slider. Supporta la selezione di valori numerici e i vincoli di intervallo.

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

Proprietà Obbligatorio Valore predefinito Descrizione
value No 0 Il valore attuale del cursore. Può essere un numero letterale o un riferimento all'associazione di dati.
min No 0 Il valore minimo del cursore.
max No 100 Il valore massimo del cursore.
step No 1 L'incremento del cursore.
disabled No false Indica se il cursore è disattivato.
color No - Tavolozza di colori del cursore ("primary", "accent", "warn").
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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 Angular Material Timepicker. Supporta la selezione dell'ora e l'integrazione dei campi del modulo.

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

Proprietà Obbligatorio Valore predefinito Descrizione
label No - L'etichetta di testo per il campo del selettore dell'ora.
placeholder No - Il testo segnaposto.
value No - L'ora attualmente selezionata in formato ISO. Può essere una stringa letterale o un riferimento all'associazione di dati.
ariaLabel No - Testo distinguibile per gli screen reader. Consigliato per l'accessibilità quando non è presente un'etichetta visibile.
ariaLabelledby No - Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente. Utilizzato per l'accessibilità.
ariaDescribedby No - Identifica l'elemento (o gli elementi) che descrive l'elemento corrente. Utilizzato per l'accessibilità.
disabled No false Indica se il selettore dell'ora è disattivato.
checks No - Un array di regole di convalida (ognuna contenente una condizione booleana dinamica e un messaggio di errore) che vengono valutate in modo reattivo per determinare la validità dell'input.
style No - Stili in linea da applicare all'elemento.
weight No - Ponderazione del layout per l'elemento quando viene inserito in un contenitore flessibile. 
[
  {
    "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à, consulta:

Proprietà comuni del catalogo di base

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

Proprietà Obbligatorio Descrizione
id Sì Un identificatore univoco del componente all'interno della superficie corrente.
accessibility No Attributi per migliorare l'accessibilità, come etichette e ruoli.
weight No Un valore utilizzato nei layout Row o Column per controllare la quantità di spazio occupata dal componente rispetto ai relativi elementi di pari livello, simile a flex-grow.

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 componenti secondari in orizzontale, 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:

Proprietà Tipo/Valori Descrizione
children v0.9: array di ID componente o definizione del modello
v0.8: explicitList o template 		I componenti secondari da disporre orizzontalmente all'interno della riga.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Controlla il modo in cui i componenti secondari vengono distribuiti lungo l'asse orizzontale.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controlla l'allineamento dei componenti secondari sull'asse verticale.

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

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 elementi secondari 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:

Proprietà Tipo/Valori Descrizione
children v0.9: array di ID componente o definizione del modello
v0.8: explicitList o template 		I componenti secondari da disporre verticalmente all'interno della colonna.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Controlla la distribuzione dei componenti secondari lungo l'asse verticale.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controlla l'allineamento dei componenti secondari sull'asse orizzontale.

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

Elenco

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

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

Proprietà Tipo/Valori Descrizione
children v0.9: array di ID componente o definizione del modello
v0.8: explicitList o template 		Gli elementi da visualizzare nell'elenco.
direction vertical, horizontal La direzione di scorrimento dell'elenco.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controlla l'allineamento degli elementi dell'elenco sull'asse trasversale.

v0.9 JSON

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

JSON v0.8

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

Componenti di visualizzazione del catalogo di base

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

Testo

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

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

Proprietà Tipo/Valori Descrizione
text v0.9: stringa o DataBinding
v0.8: BoundValue 		Il contenuto testuale da visualizzare.
variant (v0.9)
usageHint (v0.8) 		h1, h2, h3, h4, h5, caption, body Suggerimento di stile per il testo.

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

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:

Proprietà Tipo/Valori Descrizione
url v0.9: stringa o DataBinding
v0.8: BoundValue 		L'URL dell'immagine da visualizzare.
fit Stringa Come deve adattarsi l'immagine al contenitore (ad es. "cover").
variant (v0.9)
usageHint (v0.8) 		Stringa Suggerimento per varianti di utilizzo o stile (ad es. "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"
    }
  }
}

Icona

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

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

Proprietà Tipo/Valori Descrizione
name v0.9: stringa o DataBinding
v0.8: BoundValue 		Il nome dell'icona da visualizzare (ad es. "check").

v0.9 JSON

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

JSON v0.8

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

Divisore

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

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

Proprietà Tipo/Valori Descrizione
axis horizontal, vertical L'orientamento della linea di divisione.

v0.9 JSON

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

JSON v0.8

{
  "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 su cui è possibile fare clic che attiva un'azione o un evento specifico all'interno dell'applicazione.

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

Proprietà Tipo/Valori Descrizione
child ID componente L'ID del componente da visualizzare all'interno del pulsante (ad esempio un componente Testo).
variant (v0.9)
primary (v0.8) 		v0.9: stringa (ad es. "primary")
v0.8: booleano 		Il tipo di stile o enfasi applicato al pulsante.
action v0.9: oggetto Event (ad es. digitando "event")
v0.8: oggetto Action (ad es. digitando "name") 		L'azione da attivare quando si fa clic sul pulsante.

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 è 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:

Proprietà Tipo/Valori Descrizione
label v0.9: String
v0.8: BoundValue 		L'etichetta del campo di testo.
value (v0.9)
text (v0.8) 		v0.9: stringa o DataBinding
v0.8: BoundValue 		Il contenuto di testo o il percorso associato.
textFieldType shortText, longText, number, obscured, date Il tipo di campo di testo.
validationRegexp Stringa Espressione regolare per la convalida.

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

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:

Proprietà Tipo/Valori Descrizione
label v0.9: String
v0.8: BoundValue 		L'etichetta della casella di controllo.
value v0.9: DataBinding (booleano)
v0.8: BoundValue (booleano) 		Il valore della casella di controllo (true/false) o il percorso associato.

v0.9 JSON

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

JSON v0.8

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

Proprietà Tipo/Valori Descrizione
value v0.9: DataBinding (numero)
v0.8: BoundValue (numero) 		Il valore attuale del cursore o del percorso associato.
minValue Numero Il valore minimo dell'intervallo.
maxValue Numero Il valore massimo dell'intervallo.

v0.9 JSON

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

JSON v0.8

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

Proprietà Tipo/Valori Descrizione
value v0.9: DataBinding
v0.8: BoundValue 		Il valore di data/ora selezionato o il percorso associato.
enableDate Booleano Indica se attivare la selezione della data.
enableTime Booleano Indica se attivare la selezione dell'ora.

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

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

La tabella seguente descrive le proprietà disponibili:

Proprietà Tipo/Valori Descrizione
options Array di oggetti L'elenco di opzioni selezionabili dall'utente. Ogni opzione deve avere un'etichetta (stringa nella versione 0.9, BoundValue nella versione 0.8) e un valore.
selections v0.9: DataBinding
v0.8: BoundValue 		I valori selezionati o il percorso associato.
maxAllowedSelections Numero Il numero massimo di selezioni consentito.

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

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 container con elevazione, bordo e spaziatura interna che raggruppa i contenuti correlati.

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

Proprietà Tipo/Valori Descrizione
child ID componente L'ID del componente da visualizzare all'interno della scheda.

v0.9 JSON

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

JSON v0.8

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

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:

Proprietà Tipo/Valori Descrizione
entryPointChild ID componente L'ID del componente che attiva la finestra modale (ad es. un pulsante).
contentChild ID componente L'ID del componente da visualizzare come contenuto della finestra modale.

v0.9 JSON

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

JSON v0.8

{
  "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 intercambiabili.

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

Proprietà Tipo/Valori Descrizione
tabItems Array di oggetti L'elenco delle schede. Ogni elemento deve avere un title (stringa nella versione 0.9, BoundValue nella versione 0.8) e un child (ID componente).

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

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:

Aspetto v0.8 v0.9
Wrapper del componente "component": { "Text": { ... } } "component": "Text", ...props
Valori stringa { "literalString": "Hello" } "Hello"
Bambini { "explicitList": ["a", "b"] } ["a", "b"]
Data binding { "path": "/data" } { "path": "/data" } (stesso)
Stile del testo/dell'immagine usageHint variant
Stile pulsante primary: true variant: "primary"
Formato dell'azione { "name": "..." } { "event": { "name": "..." } }
Componente Scelta MultipleChoice ChoicePicker
Allineamento del layout distribution, alignment justify, align
Valore TextField text value

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