Referência da galeria de componentes da A2UI

Esta página oferece uma referência abrangente para todos os componentes A2UI disponíveis, incluindo layout, exibição, interativos e de contêiner, além de propriedades comuns.

Propriedades comuns

Todos os componentes, independente do tipo específico, compartilham um conjunto de propriedades comuns que podem ser configuradas:

Propriedade Obrigatório Descrição
id Sim Um identificador exclusivo do componente na superfície atual.
accessibility Não Atributos para melhorar a acessibilidade, como rótulos e funções.
weight Não Um valor usado em layouts Row ou Column para controlar o espaço que o componente ocupa em relação aos elementos irmãos, semelhante a flex-grow.

Para uma especificação completa de todas as propriedades, incluindo as comuns e específicas do componente, consulte a Definição de catálogo padrão (esquema JSON).

Componentes de layout

Os componentes de layout são usados para estruturar e organizar outros componentes na interface do usuário. Os seguintes componentes de layout estão disponíveis:

Linha

Um Row é um componente de layout usado para organizar os componentes filhos na horizontal, da esquerda para a direita. Ele funciona como um contêiner em que é possível colocar vários componentes lado a lado. O espaçamento e o posicionamento exatos dos elementos filhos na linha podem ser controlados usando as propriedades distribution e alignment.

A tabela a seguir descreve as propriedades disponíveis para o componente Row:

Propriedade Tipo/valores Descrição
children explicitList ou template Os componentes filhos a serem organizados horizontalmente dentro da Row.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Controla como os componentes filhos são distribuídos ao longo do eixo horizontal.
alignment start, center, end, stretch Controla como os componentes filhos são alinhados no eixo vertical.

JSON

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

Coluna

Um Column é um componente de layout usado para organizar os componentes filhos verticalmente, de cima para baixo. Ele funciona como um contêiner em que você pode colocar vários componentes um abaixo do outro. O espaçamento e o posicionamento exatos dos elementos filhos na coluna podem ser controlados usando as propriedades distribution e alignment.

A tabela a seguir descreve as propriedades disponíveis para o componente Column:

Propriedade Tipo/valores Descrição
children explicitList ou template Os componentes filhos a serem organizados verticalmente na coluna.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Controla como os componentes filhos são distribuídos ao longo do eixo vertical.
alignment start, center, end, stretch Controla como os componentes filhos são alinhados no eixo horizontal.

JSON

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

Lista

Um List é um componente de layout que mostra uma lista rolável de itens. Ele aceita filhos estáticos e modelos dinâmicos para gerar itens com base em dados. A direção do rolamento pode ser vertical ou horizontal.

A tabela a seguir descreve as propriedades disponíveis para o componente List:

Propriedade Tipo/valores Descrição
children explicitList ou template Os itens a serem mostrados na lista.
direction vertical, horizontal A direção de rolagem da lista.
alignment start, center, end, stretch Controla como os itens da lista são alinhados no eixo cruzado.

JSON

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

Componentes de display

Os componentes de exibição são usados para apresentar informações ao usuário. Os seguintes componentes de exibição estão disponíveis:

Texto

O componente Text mostra conteúdo de texto e aceita várias dicas de estilo, como títulos, legendas e corpo de texto.

A tabela a seguir descreve as propriedades disponíveis para o componente Text:

Propriedade Tipo/valores Descrição
text BoundValue O conteúdo de texto a ser exibido.
usageHint h1, h2, h3, h4, h5, caption, body Dica de estilo para o texto.

JSON

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

Imagem

Um componente Image mostra imagens de um URL especificado e oferece opções para controlar como a imagem se ajusta ao contêiner.

A tabela a seguir descreve as propriedades disponíveis para o componente Image:

Propriedade Tipo/valores Descrição
url BoundValue O URL da imagem a ser exibida.
fit String Como a imagem deve se ajustar ao contêiner (por exemplo, "cover").
usageHint String Dica de uso (por exemplo, "principal").

JSON

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

Ícone

O componente Icon mostra ícones de um repositório curricular definido no catálogo.

A tabela a seguir descreve as propriedades disponíveis para o componente Icon:

Propriedade Tipo/valores Descrição
name BoundValue O nome do ícone a ser mostrado (por exemplo, "check").

JSON

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

Divisor

O componente Divider mostra uma linha separadora visual, que pode ser horizontal ou vertical.

A tabela a seguir descreve as propriedades disponíveis para o componente Divider:

Propriedade Tipo/valores Descrição
axis horizontal, vertical A orientação da linha divisória.

JSON

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

Componentes interativos

Os componentes interativos permitem que você interaja com o aplicativo, como fornecer entrada ou acionar ações. Os seguintes componentes interativos estão disponíveis:

Botão

O componente Button é um elemento clicável que aciona uma ação ou evento específico no aplicativo.

A tabela a seguir descreve as propriedades disponíveis para o componente Button:

Propriedade Tipo/valores Descrição
child ID do componente O ID do componente a ser mostrado dentro do botão (por exemplo, um componente de texto).
primary Booleano Se este é um botão principal (destacado).
action Objeto A ação a ser acionada quando o botão for clicado.

JSON

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

TextField

O TextField é um componente interativo que permite inserir texto. Ela também aceita validação opcional.

A tabela a seguir descreve as propriedades disponíveis para o componente TextField:

Propriedade Tipo/valores Descrição
label BoundValue O rótulo do campo de texto.
text BoundValue O conteúdo do texto ou o caminho vinculado.
textFieldType shortText, longText, number, obscured, date O tipo de campo de texto.
validationRegexp String Expressão regular para validação.

JSON

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

CheckBox

O componente CheckBox é uma alternância booleana que permite ativar ou desativar uma configuração.

A tabela a seguir descreve as propriedades disponíveis para o componente CheckBox:

Propriedade Tipo/valores Descrição
label BoundValue O rótulo da caixa de seleção.
value BoundValue (booleano) O valor da caixa de seleção (verdadeiro/falso) ou o caminho vinculado.

JSON

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

Controle deslizante

O componente Slider permite selecionar um valor numérico em um intervalo específico.

A tabela a seguir descreve as propriedades disponíveis para o componente Slider:

Propriedade Tipo/valores Descrição
value BoundValue (número) O valor atual do controle deslizante ou do caminho vinculado.
minValue Número O valor mínimo do intervalo.
maxValue Número O valor máximo do intervalo.

JSON

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

DateTimeInput

O componente DateTimeInput permite escolher uma data e uma hora.

A tabela a seguir descreve as propriedades disponíveis para o componente DateTimeInput:

Propriedade Tipo/valores Descrição
value BoundValue O valor de data/hora ou o caminho de vinculação selecionado.
enableDate Booleano Define se a seleção de data será ativada.
enableTime Booleano Define se a seleção de horário será ativada.

JSON

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

Múltipla escolha

O componente MultipleChoice permite selecionar uma ou mais opções em uma lista.

A tabela a seguir descreve as propriedades disponíveis para o componente MultipleChoice:

Propriedade Tipo/valores Descrição
options Matriz de objetos A lista de opções selecionáveis pelo usuário. Cada opção precisa ter um rótulo e um valor.
selections BoundValue Os valores selecionados ou o caminho vinculado.
maxAllowedSelections Número O número máximo de seleções permitidas.

JSON

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

Componentes de contêiner

Os componentes de contêiner são usados para agrupar e organizar outros componentes. Os seguintes componentes de contêiner estão disponíveis:

Cartão

Um componente Card é um contêiner com elevação, uma borda e padding que agrupa conteúdo relacionado.

A tabela a seguir descreve as propriedades disponíveis para o componente Card:

Propriedade Tipo/valores Descrição
child ID do componente O ID do componente a ser mostrado no card.

JSON

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

Um componente Modal é uma caixa de diálogo de sobreposição acionada por um componente de ponto de entrada.

A tabela a seguir descreve as propriedades disponíveis para o componente Modal:

Propriedade Tipo/valores Descrição
entryPointChild ID do componente O ID do componente que aciona o modal (por exemplo, um botão).
contentChild ID do componente O ID do componente a ser mostrado como conteúdo do modal.

JSON

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

Guias

Um componente Tabs fornece uma interface com guias para organizar o conteúdo em painéis alternáveis.

A tabela a seguir descreve as propriedades disponíveis para o componente Tabs:

Propriedade Tipo/valores Descrição
tabItems Matriz de objetos A lista de guias. Cada item precisa ter um title e um child (ID do componente).

JSON

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