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.

Proprietà comuni

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 per il 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 lo spazio occupato dal componente rispetto ai relativi elementi di pari livello, in modo simile a flex-grow.

Per una specifica completa di tutte le proprietà, incluse quelle comuni e quelle specifiche dei componenti, consulta la definizione del catalogo standard (schema JSON).

Componenti di layout

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à distribution e alignment.

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

Proprietà Tipo/Valori Descrizione
children explicitList o template I componenti secondari da disporre orizzontalmente all'interno della riga.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Controlla la distribuzione dei componenti secondari lungo l'asse orizzontale.
alignment start, center, end, stretch Controlla l'allineamento dei componenti secondari sull'asse verticale.

JSON

{
  "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. Funziona come un contenitore in cui puoi posizionare più componenti uno sotto l'altro. La spaziatura e il posizionamento esatti degli elementi secondari all'interno della colonna possono essere controllati utilizzando le proprietà distribution e alignment.

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

Proprietà Tipo/Valori Descrizione
children explicitList o template I componenti secondari da disporre verticalmente all'interno della colonna.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Controlla la distribuzione dei componenti secondari lungo l'asse verticale.
alignment start, center, end, stretch Controlla l'allineamento dei componenti secondari sull'asse orizzontale.

JSON

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

Proprietà Tipo/Valori Descrizione
children explicitList o template Gli elementi da visualizzare nell'elenco.
direction vertical, horizontal La direzione di scorrimento dell'elenco.
alignment start, center, end, stretch Controlla l'allineamento degli elementi di elenco sull'asse trasversale.

JSON

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

Componenti display

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:

Proprietà Tipo/Valori Descrizione
text BoundValue Il contenuto testuale da visualizzare.
usageHint h1, h2, h3, h4, h5, caption, body Suggerimento di stile per il testo.

JSON

{
  "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 BoundValue L'URL dell'immagine da visualizzare.
fit Stringa Indica come l'immagine deve adattarsi al contenitore (ad es. "cover").
usageHint Stringa Suggerimento per l'utilizzo (ad es. "principale").

JSON

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

Icona

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

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

Proprietà Tipo/Valori Descrizione
name BoundValue Il nome dell'icona da visualizzare (ad es. "check").

JSON

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

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

JSON

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

Componenti interattivi

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:

Proprietà Tipo/Valori Descrizione
child ID componente L'ID del componente da visualizzare all'interno del pulsante (ad es. un componente Testo).
primary Booleano Indica se si tratta di un pulsante principale (in evidenza).
action Oggetto L'azione da attivare quando viene fatto clic sul pulsante.

JSON

{
  "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 BoundValue L'etichetta del campo di testo.
text BoundValue Il contenuto testuale o il percorso associato.
textFieldType shortText, longText, number, obscured, date Il tipo di campo di testo.
validationRegexp Stringa Espressione regolare per la convalida.

JSON

{
  "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 BoundValue L'etichetta della casella di controllo.
value BoundValue (booleano) Il valore della casella di controllo (true/false) o il percorso associato.

JSON

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

JSON

{
  "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 BoundValue Il valore di data/ora o il percorso limite selezionato.
enableDate Booleano Se abilitare la selezione della data.
enableTime Booleano Se attivare la selezione dell'ora.

JSON

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

Scelta multipla

Il componente MultipleChoice consente di selezionare una o più opzioni da un elenco.

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

Proprietà Tipo/Valori Descrizione
options Array di oggetti L'elenco di opzioni selezionabili dall'utente. Ogni opzione deve avere un'etichetta e un valore.
selections BoundValue I valori selezionati o il percorso associato.
maxAllowedSelections Numero Il numero massimo di selezioni consentito.

JSON

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

Componenti del contenitore

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:

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

JSON

{
  "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 del modale.

JSON

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

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

JSON

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

Passaggi successivi