Compartilhar via

Esquemas de contentor

  • Artigo

Os contentores como Container, Column, TableCellou um Cartão Ajustável suportam três tipos diferentes de esquemas:

  • Layout.Stack empilha elementos entre si e é o esquema predefinido.
  • Layout.Flow distribui os elementos horizontalmente e molda-os em múltiplas linhas, conforme necessário.
  • Layout.AreaGrid divide o contentor em com o nome areas no qual os elementos podem ser colocados através da grid.area propriedade que pode ser definida em qualquer elemento.

Layout.Stack

Um esquema que empilha elementos entre si. Layout.Stack é o esquema predefinido utilizado por um Cartão Ajustável e todos os contentores.

Eis as propriedades do Layout.Stack esquema:

Nome Obrigatório Tipo Descrição
type ✔️ Cadeia de caracteres Deve ser Layout.Stack.
targetWidth Cadeia de caracteres Controla a largura card para a qual o esquema tem de ser utilizado. Se targetWidth não for especificado, o elemento é composto em todas as larguras card. A utilização targetWidth permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível.
Para obter mais informações, veja Esquema reativo do Cartão Adaptável.
Valores permitidos: VeryNarrow, , Narrow, WideStandard, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, , , atLeast:WideatMost:StandardatMost:Wide

Layout.Flow

Um esquema que distribui os elementos horizontalmente e os molda em múltiplas linhas, conforme necessário.

Utilizado Layout.Flow para esquematize listas de elementos, como imagens, sem ter de se preocupar com a quantidade de espaço horizontal disponível. A largura e o alinhamento dos elementos podem ser ajustados conforme pretendido. Cada linha obtém automaticamente a altura adequada e o espaçamento entre colunas e linhas é configurável e imposto automaticamente.

Exemplos

Alinhamento superior esquerdo

Captura de ecrã a mostrar um esquema de contentor cartão ajustável com elementos empilhados na parte superior esquerda.

Centrado horizontal e verticalmente

Captura de ecrã a mostrar um Cartão Ajustável com um esquema de contentor centrado horizontal e verticalmente.

Preencher sempre o espaço disponível em cada linha

Captura de ecrã a mostrar um Cartão Ajustável com um esquema de contentor preenchido.

Dica

Não utilize a maxItemWidth propriedade com itemFit: fill. Por definição, maxItemWidth impede que os itens excedam uma determinada largura, o que é incompatível com o preenchimento do espaço disponível restante numa linha ao aumentar ligeiramente cada elemento nessa linha. Em alternativa, utilize a itemWidth propriedade .

Eis as propriedades do Layout.Stack esquema:

Nome Tipo Padrão Descrição
type Cadeia de caracteres Deve ser Layout.Stack.
columnSpacing Cadeia de caracteres "Predefinição" O espaço entre itens.
Valores permitidos: None, , SmallExtraSmall, Default, Medium, Large, , , ExtraLargePadding
horizontalItemsAlignment Cadeia de caracteres "Centro" Controla a forma como o conteúdo do contentor tem de estar alinhado horizontalmente.
Valores permitidos: Left, , CenterRight
itemFit Cadeia de caracteres "Ajustar" Controla a forma como o item tem de caber dentro do contentor.
Valores permitidos: Fit, Fill
itemWidth Cadeia de caracteres A largura, em píxeis, de cada item, no <number>px formato. Não deve ser utilizado se maxItemWidth , ou minItemWidth, ou ambos estiverem definidos.
Valores permitidos: <number>px
maxItemWidth Cadeia de caracteres A largura máxima, em píxeis, de cada item, no <number>px formato. Não deve ser utilizado se itemWidth estiver definido.
Valores permitidos: <number>px
minItemWidth Cadeia de caracteres 0 A largura mínima, em píxeis, de cada item, no <number>px formato. Não deve ser utilizado se itemWidth estiver definido.
Valores permitidos: <number>px
rowSpacing Cadeia de caracteres Default O espaço entre linhas de itens.
Valores permitidos: None, , SmallExtraSmall, Default, Medium, Large, , , ExtraLargePadding
targetWidth Cadeia de caracteres Controlos para os quais card largura o esquema tem de ser utilizado. Se targetWidth não for especificado, o elemento é composto em todas as larguras card. A utilização targetWidth permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível.
Para obter mais informações, veja Esquema reativo do Cartão Adaptável.
Valores permitidos: VeryNarrow, , Narrow, WideStandard, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, , , atLeast:WideatMost:StandardatMost:Wide
verticalItemsAlignment Cadeia de caracteres Top Controla a forma como o conteúdo do contentor tem de estar alinhado verticalmente.
Valores permitidos: Top, , CenterBottom

Layout.AreaGrid

Um esquema que divide um contentor em áreas nomeadas nas quais os elementos podem ser colocados.

Utilize Layout.AreaGrid para organizar elementos num Cartão Ajustável, Container, Columnou TableCell numa grelha. Layout.AreaGridé útil para conceber cartões reativos: defina vários Layout.AreaGrid esquemas num único contentor e direcione-os para larguras de card diferentes para mudar automaticamente de um esquema para outro no runtime de acordo com a largura disponível. Para atribuir um elemento no contentor a uma área específica na grelha, a respetiva grid.area propriedade tem de ser definida.

Exemplo

Captura de ecrã a mostrar um contentor de Cartão Ajustável com um esquema de grelha de área.

Eis as propriedades do Layout.AreaGrid esquema:

Nome Tipo Padrão Descrição
type Cadeia de caracteres Deve ser Layout.AreaGrid.
areas Matriz de objetos As áreas no esquema de grelha.
Valores permitidos: GridArea
columns Matriz de números ou cadeias As colunas no esquema de grelha, definidas como uma percentagem da largura disponível ou em píxeis com o <number>px formato .
columnSpacing Cadeia de caracteres Default O espaço entre colunas.
Valores permitidos: None, , SmallExtraSmall, Default, Medium, Large, , ExtraLarge, . Padding
rowSpacing Cadeia de caracteres Default O espaço entre linhas.
Valores permitidos: None, , SmallExtraSmall, Default, Medium, Large, , ExtraLarge, . Padding
targetWidth Cadeia de caracteres Controlos para os quais card largura o esquema tem de ser utilizado. Não deve ser utilizado se itemWidth estiver definido. Se targetWidth não for especificado, o elemento é composto em todas as larguras card. A utilização targetWidth permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível.
Para obter mais informações, veja Esquema reativo do Cartão Adaptável.
Valores permitidos: VeryNarrow, , Narrow, WideStandard, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, , , atLeast:WideatMost:StandardatMost:Wide

GridArea

Define uma área num Layout.AreaGrid esquema.

Eis as propriedades da GridArea matriz:

Nome Tipo Padrão Descrição
columns Número 1 O índice da coluna inicial da área. Os índices de colunas começam em 1.
columnSpan Número 1 Define quantas colunas a área tem de abranger.
name Cadeia de caracteres O nome da área. Para colocar um elemento nesta área, defina a respetiva grid.area propriedade para corresponder ao nome da área.
row Número 1 O índice da linha inicial da área. Os índices de linha começam em 1.
rowSpan Número 1 Define quantas linhas a área tem de abranger.

Utilizar esquemas de Contentor para implementar um esquema reativo

Os esquemas de contentor podem ser utilizados para implementar esquemas reativos, uma vez que é possível associar vários esquemas a um único contentor, cada um dedicado a uma largura de card específica. No runtime, o esquema adequado é utilizado automaticamente para dispor elementos na largura disponível.

Por exemplo, se quiser definir um card com um esquema típico em que:

  • Existe uma imagem à esquerda
  • Texto à direita da imagem

No entanto, o texto tem de aparecer abaixo da imagem quando não existir espaço horizontal suficiente.

Isto pode ser feito com Layout.AreaGrid:

Captura de ecrã a mostrar um Cartão Ajustável em esquemas diferentes.

Como funciona

Aqui, a layouts propriedade é definida em todo o card:

{
    "type": "Layout.AreaGrid",
    "targetWidth": "atLeast:standard",
    "columns": [
        60
    ],
    "areas": [
        {
            "name": "image"
        },
        {
            "name": "text",
            "column": 2
        }
    ]
}

O que significa:

  • Organize elementos no card num esquema de grelha apenas quando a largura do card for pelo menos standard (o que corresponde à largura típica de um card numa conversa do Teams, por exemplo).
    • Se a largura do card for inferior standarda , utilize o esquema predefinido, Layout.Stack.
  • O esquema de grelha tem, pelo menos, uma coluna que tem de utilizar 60% do espaço disponível. A grelha pode ter outras colunas (dependendo de como areas são definidas), mas como não estão definidas, cada uma partilha uma parte igual do espaço restante.
  • São definidas duas áreas:
    • Uma para a imagem, que mapeia para a primeira coluna e primeira linha da grelha.
    • Uma para o texto, que abrange a segunda coluna e a primeira linha.

Dica

Não é necessário especificar a layouts propriedade. Quando não for especificado nenhum esquema explícito, o contentor utilizará um Layout.Stack esquema.

Os elementos no corpo do card recebem uma área de grelha através da grid.area propriedade :

{
    "type": "Container",
    "grid.area": "textArea", // The text container is assigned to the textArea
    "items": [
      ...
    ]
}

{
    "type": "Image",
    "url": "...",
    "grid.area": "imageArea", // The Image is assigned to the imageArea
    "style": "RoundedCorners",
    "targetWidth": "atLeast:narrow" // Also notice the image is set to not display at all at the "very narrow" width
}

Exemplo de código

Nome Descrição .Node.js .NET
Formatação de Cartões Esta aplicação de exemplo demonstra os vários esquemas de contentor em Cartões Ajustáveis. View Exibir

Confira também