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.

Componentes do catálogo do Material Design e componentes básicos do catálogo

A A2UI oferece dois catálogos de componentes distintos para criar interfaces de usuário de agentes: o catálogo de materiais e o catálogo básico.

O catálogo de materiais contém componentes projetados especificamente para aderir às diretrizes do Google Material Design, oferecendo um conjunto mais rico e estilizado de elementos da UI que são compatíveis com as configurações da A2UI v0.9.

O catálogo básico contém primitivos de UI padrão e independentes do sistema de design, como layouts, ações e entradas, compatíveis com as configurações A2UI v0.9 e v0.8.

Componentes do catálogo de materiais

Esta seção fornece uma referência para os componentes disponíveis do Material Design da A2UI, incluindo componentes de layout, exibição, navegação e entrada.

Propriedades comuns do catálogo de materiais

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 MaterialRow ou MaterialColumn para controlar o espaço que o componente ocupa em relação aos elementos irmãos, semelhante a flex-grow.

Componentes de layout do catálogo de materiais

Os componentes de layout são usados para estruturar e organizar outros componentes na interface do usuário.

MaterialCard

Contêiner de card do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
children Sim - Define os IDs das crianças.
appearance Não raised O estilo de aparência do card. Uma das opções: "outlined", "raised".
align Não start Alinhamento de filhos. Uma destas opções: "center", "end", "start", "stretch".
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
href Não - URL opcional para navegar quando o card é clicado. Quando definido, o card se torna interativo e abre o URL em uma nova guia.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialCard",
    "appearance": "outlined",
    "children": [
      "card-content"
    ]
  },
  {
    "id": "card-content",
    "component": "MaterialText",
    "text": "Card content"
  }
]

MaterialColumn

Contêiner de layout que organiza itens verticalmente usando as diretrizes do Material.

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

Propriedade Obrigatório Valor padrão Descrição
children Sim - Define os IDs das crianças.
justify Não start Define a organização dos filhos ao longo do eixo principal (verticalmente).
align Não stretch Alinhamento horizontal de filhos ("start", "center", "end", "stretch").
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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

Contêiner da caixa de diálogo do menu do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
open Não false Indica se a caixa de diálogo está aberta. Pode ser um booleano literal ou uma referência de vinculação de dados.
title Não - O título da caixa de diálogo.
disableClose Não false Indica se o usuário pode fechar a caixa de diálogo clicando fora dela ou pressionando Esc.
width Não - A largura da caixa de diálogo (por exemplo, "500px").
height Não - A altura da caixa de diálogo (por exemplo, "400px").
children Sim - Define os IDs das crianças.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "open-button",
      "confirmation-dialog"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "open-button",
    "component": "MaterialButton",
    "label": "Delete Item",
    "variant": "raised",
    "color": "warn",
    "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",
    "color": "warn",
    "action": {
      "event": {
        "name": "confirmDelete"
      }
    }
  }
]

MaterialDivider

Linha divisória do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
inset Não false Indica se o divisor está inserido.
vertical Não false Indica se o divisor é vertical.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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

Contêiner do painel de expansão do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
title Não - O título exibido no cabeçalho do painel de expansão.
description Não - A descrição exibida no cabeçalho do painel de expansão.
expanded Não false Se o painel está aberto. Pode ser um booleano literal ou uma referência de vinculação de dados.
disabled Não false Se o painel de expansão está desativado.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
children Sim - Define os IDs das crianças.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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

Um componente de contêiner A2UI para layout de grade. Usa a lista de grade do Angular Material para organizar componentes filhos em blocos.

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

Propriedade Obrigatório Valor padrão Descrição
children Sim - Define os IDs das crianças.
cols Não 2 Número de colunas na lista de grade. Pode ser um número literal ou uma referência de vinculação de dados.
rowHeight Não 1:1 Proporção de altura da linha ou altura fixa (por exemplo, "100px"). Pode ser uma string literal ou uma referência de vinculação de dados.
gutterSize Não 1px Tamanho do espaçamento da grade. Pode ser uma string literal ou uma referência de vinculação de dados.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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

Contêiner de layout que organiza itens horizontalmente usando as diretrizes do Material.

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

Propriedade Obrigatório Valor padrão Descrição
children Sim - Define os IDs das crianças.
justify Não start Define a organização dos filhos ao longo do eixo principal (horizontalmente).
align Não stretch Alinhamento vertical de elementos filhos ("start", "center", "end", "stretch").
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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"
      }
    }
  }
]

Componentes de conteúdo do catálogo de materiais

Os componentes de exibição e conteúdo são usados para apresentar informações, mídia e status ao usuário.

MaterialBadge

Mostra um selo do Material Design sobre um elemento filho.

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

Propriedade Obrigatório Valor padrão Descrição
text Não - Conteúdo de texto a ser exibido no selo.
color Não - Paleta de cores do selo ("primary", "accent", "warn").
position Não above after Posição do selo em relação ao contêiner ("above after", "above before", "below after", "below before").
size Não medium Tamanho do selo ("pequeno", "médio", "grande").
overlap Não true Se o selo deve se sobrepor ao contêiner.
disabled Não false Se o selo está desativado.
hidden Não false Se o selo está oculto.
description Não - Descrição acessível do selo.
children Sim - Define os IDs das crianças.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

Mostra um ícone do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
icon Sim - O nome do ícone material a ser exibido.
color Não - Paleta de cores do ícone (principal, destaque, aviso).
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

Componente A2UI para renderizar uma imagem em um contexto do Material Design. Compatível com cantos arredondados, proporção e propriedades object-fit.

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

Propriedade Obrigatório Valor padrão Descrição
url Sim - O URL da imagem a ser exibida.
alt Não - Texto alternativo acessível para a imagem.
fit Não - Especifica como a imagem deve ser redimensionada para caber no contêiner. Uma destas opções: "fill", "contain", "cover", "scaleDown", "none".
width Não - Largura personalizada da imagem (por exemplo, "100px", "100%").
height Não - Altura personalizada da imagem (por exemplo, "100px", "100%").
aspectRatio Não - Proporção personalizada da imagem (por exemplo, "16/9", "1").
roundedCorners Não false Se os cantos arredondados padrão do Material Design serão aplicados.
borderRadius Não - Raio da borda personalizada da imagem (por exemplo, "50%", "12px"). Substitui "roundedCorners".
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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 para o componente de barra de progresso do Angular Material. Aceita modos determinantes, indeterminados, de buffer e de consulta.

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

Propriedade Obrigatório Valor padrão Descrição
value Não 0 O valor do progresso (0 a 100) nos modos determinado e buffer.
mode Não determinate O modo da barra de progresso. Uma destas opções: "determinate", "indeterminate", "buffer", "query".
bufferValue Não 0 O valor do buffer (0 a 100) no modo de buffer.
color Não - Paleta de cores da barra de progresso ("primary", "accent", "warn").
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

Wrapper A2UI para o componente Angular Material Progress Spinner. Compatível com modos determinantes e indeterminantes, além de dimensões personalizadas.

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

Propriedade Obrigatório Valor padrão Descrição
value Não 0 O valor do progresso (0 a 100) no modo determinado.
mode Não determinate O modo do ícone de carregamento. Um destes valores: "determinate", "indeterminate".
diameter Não 40 O diâmetro do indicador de progresso em pixels.
strokeWidth Não 4 A largura do traço do spinner em pixels.
color Não - Paleta de cores do ícone de carregamento ("primary", "accent", "warn").
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

Wrapper A2UI para o componente de tabela do Angular Material. Renderiza dados estruturados em colunas e linhas.

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

Propriedade Obrigatório Valor padrão Descrição
columns Sim - Uma matriz de definições de coluna, cada uma especificando um objeto {header, field}.
rows Sim - A lista de linhas de dados. Pode ser uma matriz de registros de chave-valor ou uma referência de vinculação de dados.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
caption Não - Uma legenda/descrição acessível para a tabela.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

Mostra texto com a tipografia do Material.

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

Propriedade Obrigatório Valor padrão Descrição
text Sim - O texto a ser exibido. Pode ser uma string literal ou uma referência a um valor no modelo de dados.
usageHint Não body Uma dica para o estilo de tipografia. Uma destas opções: "h1", "h2", "h3", "h4", "h5", "subtitle1", "subtitle2", "body1", "body2", "body", "caption".
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

Componentes de navegação do catálogo do Material Design

Os componentes de navegação e ação permitem que os usuários realizem ações ou naveguem entre visualizações.

MaterialButton

Botão do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
label Não - O rótulo de texto a ser exibido no botão.
leadingIcon Não - O nome do ícone de material a ser exibido antes do rótulo.
trailingIcon Não - O nome do ícone do Material a ser exibido após o rótulo.
color Não - Paleta de cores do botão (principal, destaque, aviso).
variant Não basic A variante de estilo do botão. Uma destas opções: "raised", "flat", "stroked", "basic".
disabled Não false Se o botão está desativado.
action Não - A ação do lado do cliente a ser enviada quando o botão for clicado.
tooltip Não - Texto da dica a ser exibido ao passar o cursor.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Botão de ícone do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
icon Sim - O nome do ícone material a ser exibido.
action Sim - A ação do lado do cliente a ser enviada quando o botão de ícone for clicado.
ariaLabel Sim - Texto discernível para leitores de tela. Obrigatório para acessibilidade.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
color Não - Paleta de cores do botão (principal, destaque, aviso).
disabled Não false Se o botão está desativado.
tooltip Não - Texto da dica a ser exibido ao passar o cursor.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

Wrapper A2UI para o componente de menu do Angular Material. Fornece um botão de acionamento e itens de menu suspenso.

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

Propriedade Obrigatório Valor padrão Descrição
label Não - O rótulo de texto exibido no botão de acionamento do menu.
icon Não - O nome do ícone do Material a ser exibido no botão de acionamento.
disabled Não false Se o botão de acionamento do menu está desativado.
value Não - O valor selecionado no momento. Pode ser uma string literal ou uma referência de vinculação de dados.
options Sim - A lista de opções de menu disponíveis. Pode ser uma matriz de objetos {label, value} ou uma referência de vinculação de dados.
action Não - A ação do lado do cliente a ser enviada quando um item de menu é selecionado.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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 para o componente de guias do Angular Material. Renderiza a navegação com guias e gerencia a seleção da guia ativa.

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

Propriedade Obrigatório Valor padrão Descrição
tabs Sim - Uma matriz de definições de guias, cada uma especificando um objeto {label, content}.
activeTab Não 0 O índice baseado em zero da guia ativa no momento. Pode ser um número literal ou uma referência de vinculação de dados.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialTabs",
    "activeTab": {
      "path": "/app/selectedTab"
    },
    "tabs": [
      {
        "label": "Overview",
        "content": "Overview content"
      },
      {
        "label": "Details",
        "content": "Details content"
      },
      {
        "label": "Reviews",
        "content": "Reviews content"
      }
    ]
  }
]

Componentes de entrada do catálogo de materiais

Os componentes de entrada e formulário permitem que os usuários insiram texto, façam seleções e alternem opções.

MaterialButtonToggle

Grupo de alternância de botões do Material Design para seleção única.

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

Propriedade Obrigatório Valor padrão Descrição
value Não - O valor selecionado no momento. Pode ser uma string literal ou uma referência a um valor no modelo de dados.
options Sim - A lista de opções disponíveis para seleção. Pode ser uma matriz de objetos {label, value} ou uma referência de vinculação de dados.
disabled Não false Se o grupo de botão de alternância de opção está desativado.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
appearance Não standard O estilo de aparência do grupo de alternância de botão. Uma das opções: "legacy", "standard".
vertical Não false Se o grupo de alternância de botão está organizado verticalmente.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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 de caixa de seleção do Material Design para estado booleano. Para uma acessibilidade ideal, forneça um rótulo descritivo ou use ariaLabel para tecnologias assistivas.

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

Propriedade Obrigatório Valor padrão Descrição
label Não - O rótulo de texto exibido ao lado da caixa de seleção.
checked Não false Se a caixa de seleção está marcada. Pode ser um booleano literal ou uma referência a um valor no modelo de dados.
disabled Não false Se a caixa de seleção está desativada.
required Não false Se a caixa de seleção é obrigatória.
color Não - Paleta de cores da caixa de seleção ("primary", "accent", "warn").
labelPosition Não after Posição do rótulo em relação à caixa de seleção ("before", "after").
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
tooltip Não - Texto da dica a ser exibido ao passar o cursor.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialCheckbox",
    "label": "Agree to Terms and Conditions",
    "ariaLabel": "Agree to Terms and Conditions",
    "checked": {
      "path": "/user/agreedToTerms"
    },
    "color": "primary"
  }
]

MaterialChips

Componente listbox de ícones do Material Design para seleção única.

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

Propriedade Obrigatório Valor padrão Descrição
value Não - O valor selecionado no momento. Pode ser uma string literal ou uma referência a um valor no modelo de dados.
options Sim - A lista de opções de ícones. Pode ser uma matriz de objetos {label, value} ou uma referência de vinculação de dados.
disabled Não false Se a caixa de listagem de ícones está desativada.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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 seletor de data do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
label Não - O rótulo do campo de seleção de data.
placeholder Não - O texto do marcador de posição.
value Não - A data selecionada atual no formato ISO.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
disabled Não false Se o seletor de datas está desativado.
required Não false Se é necessário selecionar uma data.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

Campo de entrada de texto do Material Design.

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

Propriedade Obrigatório Valor padrão Descrição
label Não - O rótulo do campo de entrada.
placeholder Não - O texto do marcador de posição.
value Não - O valor atual da entrada. Pode ser uma string literal ou uma referência a um valor no modelo de dados.
disabled Não false Se a entrada está desativada.
name Não - O nome do elemento de entrada.
readonly Não false Se a entrada é somente leitura.
required Não false Se a entrada é obrigatória.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
type Não text O tipo de entrada. Uma destas opções: "text", "number", "password", "email", "tel", "url".
validationRegexp Não - Expressão regular para validação de entrada.
checks Não - Verificações de validação de entrada.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

Wrapper A2UI para o componente Botão de opção do Angular Material. Oferece suporte à seleção única em uma lista de opções dentro de um grupo de opções.

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

Propriedade Obrigatório Valor padrão Descrição
value Não - O valor selecionado no momento. Pode ser uma string literal ou uma referência de vinculação de dados.
options Sim - A lista de opções de rádio disponíveis. Pode ser uma matriz de objetos {label, value} ou uma referência de vinculação de dados.
disabled Não false Se o grupo de opções está desativado.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
color Não - Paleta de cores do botão de opção ("primary", "accent", "warn").
labelPosition Não after Posição do rótulo em relação ao botão de opção. Um destes valores: "before" ou "after".
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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 de seleção (menu suspenso) do Material Design para seleção única. Para uma acessibilidade ideal, sempre forneça um rótulo descritivo ou use aria-label para tecnologias assistivas.

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

Propriedade Obrigatório Valor padrão Descrição
label Não - O rótulo do campo de seleção.
placeholder Não - O texto de preenchimento mostrado quando nenhum valor é selecionado.
value Não - O valor selecionado no momento. Pode ser uma string literal ou uma referência a um valor no modelo de dados.
options Sim - A lista de opções disponíveis para seleção. Pode ser uma matriz de objetos {label, value} ou uma referência de vinculação de dados.
disabled Não false Se o componente de seleção está desativado.
required Não false Indica se um valor é obrigatório.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "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 para o componente Angular Material Slide Toggle. Compatível com vinculações de alternância booleana e atributos de acessibilidade personalizados.

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

Propriedade Obrigatório Valor padrão Descrição
label Não - O rótulo de texto exibido ao lado da chave deslizante.
checked Não false Se a chave deslizante está marcada. Pode ser um booleano literal ou uma referência de vinculação de dados.
disabled Não false Se a alternância de slide está desativada.
required Não false Se a alternância de slide é obrigatória.
color Não - Paleta de cores da chave ("primary", "accent", "warn").
labelPosition Não after Posição do rótulo em relação à chave ("before", "after").
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
tooltip Não - Texto da dica a ser exibido ao passar o cursor.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

Wrapper A2UI para o componente de controle deslizante do Angular Material. Aceita seleção de valores numéricos e restrições de intervalo.

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

Propriedade Obrigatório Valor padrão Descrição
value Não 0 O valor atual do controle deslizante. Pode ser um número literal ou uma referência de vinculação de dados.
min Não 0 O valor mínimo do controle deslizante.
max Não 100 O valor máximo do controle deslizante.
step Não 1 O incremento da etapa do controle deslizante.
disabled Não false Se o controle deslizante está desativado.
color Não - Paleta de cores do controle deslizante ("primary", "accent", "warn").
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialSlider",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": {
      "path": "/audio/volume"
    },
    "color": "primary",
    "ariaLabel": "Volume adjustment"
  }
]

MaterialTimepicker

Wrapper A2UI para o componente seletor de tempo do Angular Material. Compatível com seleção de tempo e integração de campos de formulário.

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

Propriedade Obrigatório Valor padrão Descrição
label Não - O rótulo de texto do campo de seleção de horário.
placeholder Não - O texto do marcador de posição.
value Não - O tempo selecionado no momento em formato ISO. Pode ser uma string literal ou uma referência de vinculação de dados.
ariaLabel Não - Texto discernível para leitores de tela. Recomendado para acessibilidade quando não há um rótulo visível.
ariaLabelledby Não - Identifica o elemento (ou elementos) que rotula o elemento atual. Usado para acessibilidade.
ariaDescribedby Não - Identifica o elemento (ou elementos) que descreve o elemento atual. Usado para acessibilidade.
disabled Não false Se o seletor de tempo está desativado.
required Não false Se uma seleção de horário é obrigatória.
style Não - Estilos inline a serem aplicados ao elemento.
weight Não - Peso do layout para o elemento quando colocado em um contêiner flexível. 
[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

Componentes básicos do catálogo

Esta seção fornece uma referência para os componentes básicos do catálogo da A2UI disponíveis.

Arquivos de esquema de catálogo básicos

Para mais informações sobre essas propriedades, consulte:

Propriedades comuns básicas do catálogo

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.

Componentes básicos de layout do catálogo

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 justify/distribution e align/alignment.

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

Propriedade Tipo/valores Descrição
children v0.9:matriz de IDs de componentes ou definição de modelo
v0.8:explicitList ou template 		Os componentes filhos a serem organizados horizontalmente na linha.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Controla como os componentes filhos são distribuídos ao longo do eixo horizontal.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controla como os componentes filhos são alinhados no eixo vertical.

JSON v0.9

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

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 justify/distribution e align/alignment.

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

Propriedade Tipo/valores Descrição
children v0.9:matriz de IDs de componentes ou definição de modelo
v0.8:explicitList ou template 		Os componentes filhos a serem organizados verticalmente na coluna.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Controla como os componentes filhos são distribuídos ao longo do eixo vertical.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controla como os componentes filhos são alinhados no eixo horizontal.

JSON v0.9

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

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 da rolagem pode ser vertical ou horizontal.

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

Propriedade Tipo/valores Descrição
children v0.9:matriz de IDs de componentes ou definição de modelo
v0.8:explicitList ou template 		Os itens a serem mostrados na lista.
direction vertical, horizontal A direção de rolagem da lista.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controla como os itens da lista são alinhados no eixo cruzado.

JSON v0.9

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

Componentes básicos de exibição do catálogo

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 v0.9:string ou DataBinding
v0.8:BoundValue 		O conteúdo de texto a ser exibido.
variant (v0.9)
usageHint (v0.8) 		h1, h2, h3, h4, h5, caption, body Dica de estilo para o texto.

JSON v0.9

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

JSON v0.8

{
  "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 v0.9:string ou DataBinding
v0.8:BoundValue 		O URL da imagem a ser exibida.
fit String Como a imagem deve se ajustar ao contêiner (por exemplo, "cover").
variant (v0.9)
usageHint (v0.8) 		String Dica para uso ou variantes de estilo (por exemplo, "principal").

JSON v0.9

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

Í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 v0.9:string ou DataBinding
v0.8:BoundValue 		O nome do ícone a ser exibido (por exemplo, "check").

JSON v0.9

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

JSON v0.8

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

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

JSON v0.8

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

Componentes interativos básicos do catálogo

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).
variant (v0.9)
primary (v0.8) 		v0.9:string (por exemplo, "primary")
v0.8:booleano 		O tipo de estilo ou ênfase aplicado ao botão.
action v0.9:objeto de evento (por exemplo, chaveando "event")
v0.8:objeto de ação (por exemplo, chaveando "name") 		A ação a ser acionada quando o botão for clicado.

JSON v0.9

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

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 v0.9:String
v0.8:BoundValue 		O rótulo do campo de texto.
value (v0.9)
text (v0.8) 		v0.9:string ou DataBinding
v0.8: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 v0.9

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

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 v0.9:String
v0.8:BoundValue 		O rótulo da caixa de seleção.
value v0.9:DataBinding (booleano)
v0.8:BoundValue (booleano) 		O valor da caixa de seleção (verdadeiro/falso) ou o caminho vinculado.

JSON v0.9

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

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 v0.9:DataBinding (número)
v0.8: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 v0.9

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

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 v0.9:DataBinding
v0.8:BoundValue 		O valor de data/hora ou o caminho vinculado selecionado.
enableDate Booleano Define se a seleção de data será ativada.
enableTime Booleano Se a seleção de horário precisa ser ativada.

JSON v0.9

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

Selecione uma ou mais opções em uma lista. O componente foi renomeado como ChoicePicker na v0.9, antes era MultipleChoice na v0.8.

A tabela a seguir descreve as propriedades disponíveis:

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 (string na v0.9, BoundValue na v0.8) e um valor.
selections v0.9:DataBinding
v0.8:BoundValue 		Os valores selecionados ou o caminho vinculado.
maxAllowedSelections Número O número máximo de seleções permitidas.

JSON v0.9

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

Componentes básicos de contêiner do catálogo

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 v0.9

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

JSON v0.8

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

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

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 (string na v0.9, BoundValue na v0.8) e um child (ID do componente).

JSON v0.9

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

Resumo das diferenças entre versões

Os nomes e as propriedades dos componentes são basicamente os mesmos em todas as versões. As diferenças estruturais são:

Aspecto v0.8 v0.9
Wrapper de componente "component": { "Text": { ... } } "component": "Text", ...props
Valores de strings { "literalString": "Hello" } "Hello"
Filhos { "explicitList": ["a", "b"] } ["a", "b"]
Vinculação de dados { "path": "/data" } { "path": "/data" } (igual)
Estilo de texto/imagem usageHint variant
Estilo do botão primary: true variant: "primary"
Formato da ação { "name": "..." } { "event": { "name": "..." } }
Componente de escolha MultipleChoice ChoicePicker
Alinhamento do layout distribution, alignment justify, align
Valor do TextField text value

Guia de evolução

Para informações sobre como migrar da v0.8 para a v0.9, consulte o guia de evolução da v0.8 para a v0.9.

Exemplos dinâmicos

Para ver todos os componentes em ação:

cd samples/client/angular
yarn start gallery

A seguir