Layouts de contêiner

Importante

Essa documentação é considerada herdada. Para obter informações e recursos abrangentes relacionados a layouts de contêiner em Cartões Adaptáveis, visite o hub de documentação de Cartões Adaptáveis.

A captura de tela mostra a página inicial do site de Cartões Adaptáveis da Microsoft.

O hub de documentação de Cartões Adaptáveis oferece documentação de referência completa e mais recente, um Designer de Cartão Adaptável atualizado, exemplos de JSON internos, práticas recomendadas de design e um histórico de versão detalhado dos recursos do Cartão Adaptável. Para obter mais informações, consulte introdução ao hub de documentação de Cartões Adaptáveis e novas atualizações de Cartões Adaptáveis.

Contêineres como Container, Column, TableCellou um Cartão Adaptável dão suporte a três tipos diferentes de layouts:

Layout.Stack empilha elementos uns sobre os outros e é o layout padrão.
Layout.Flow espalha elementos horizontalmente e os encapsula em várias linhas, conforme necessário.
Layout.AreaGrid divide o contêiner em nomeado areas no qual os elementos podem ser colocados por meio da grid.area propriedade que pode ser definida em qualquer elemento.

Layout.Stack

Um layout que empilha elementos uns sobre os outros. Layout.Stack é o layout padrão usado por um Cartão Adaptável e todos os contêineres.

Estas são as propriedades do Layout.Stack layout:

Nome	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Layout.Stack`.
`targetWidth`		Cadeia de caracteres	Controla a largura do card para a qual o layout deve ser usado. Se `targetWidth` não for especificado, o elemento será renderizado em todas as larguras de card. O uso `targetWidth` possibilita a criação de cartões responsivos que adaptam seu layout ao espaço horizontal disponível. Para obter mais informações, consulte Layout responsivo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, `Narrow`, `Standard`, `WideatMost:NarrowatLeast:VeryNarrowatLeast:NarrowatLeast:StandardatMost:VeryNarrow`, `atMost:Standard`, , `atLeast:WideatMost:Wide`

Layout.Flow

Um layout que espalha elementos horizontalmente e os encapsula em várias linhas, conforme necessário.

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

Exemplos

A captura de tela mostra um layout de contêiner de Cartão Adaptável com elementos empilhados no canto superior esquerdo.

{
    "type": "AdaptiveCard",
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "layouts": [
        {
            "type": "Layout.Flow",
            "maxItemWidth": "130px",
            "horizontalItemsAlignment": "Left"
        }
    ],
    "body": [
        {
            "type": "Image",
            "url": "images/guitar1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/adaptivecards1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/cup1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/developer1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/painting1.jpeg",
            "style": "RoundedCorners"
        }
    ]
}

Centralizado horizontal e verticalmente

Card
Conteúdo

A captura de tela mostra um Cartão Adaptável com um layout de contêiner centralizado horizontal e verticalmente.

{
    "type": "AdaptiveCard",
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "layouts": [
        {
            "type": "Layout.Flow",
            "maxItemWidth": "80px",
            "horizontalItemsAlignment": "center",
            "verticalItemsAlignment": "center"
        }
    ],
    "body": [
        {
            "type": "Image",
            "url": "images/guitar1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/adaptivecards1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/painting1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/cup1.jpeg",
            "style": "RoundedCorners"
        }
    ]
}

Sempre preencha o espaço disponível em cada linha

Card
Conteúdo

A captura de tela mostra um Cartão Adaptável com um layout de contêiner preenchido.

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "layouts": [
        {
            "type": "Layout.Flow",
            "itemWidth": "150px",
            "itemFit": "Fill",
            "horizontalItemsAlignment": "Left"
        }
    ],
    "body": [
        {
            "type": "Image",
            "url": "images/guitar1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/adaptivecards1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/painting1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/guitar2.jpeg",
            "style": "RoundedCorners"
        }
    ]
}

Dica

Não use a maxItemWidth propriedade com itemFit: fill. Por definição, impede que os itens excedam uma certa largura, o que é incompatível com o preenchimento do espaço disponível restante em uma linha, maxItemWidth ampliando ligeiramente cada elemento nessa linha. Em vez disso, use a itemWidth propriedade.

Estas são as propriedades do Layout.Stack layout:

Nome	Tipo	Padrão	Descrição
`type`	Cadeia de caracteres		Deve ser `Layout.Stack`.
`columnSpacing`	Cadeia de caracteres	"Padrão"	O espaço entre os itens. Valores permitidos: `None`, `ExtraSmall`, `Small`, `DefaultMedium`, `Large`, , `ExtraLarge`,`Padding`
`horizontalItemsAlignment`	Cadeia de caracteres	"Centro"	Controla como o conteúdo do contêiner deve ser alinhado horizontalmente. Valores permitidos: `Left`, `Center`, `Right`
`itemFit`	Cadeia de caracteres	"Ajustar"	Controla como o item deve caber dentro do contêiner. Valores permitidos: `Fit`, `Fill`
`itemWidth`	Cadeia de caracteres		A largura, em pixels, de cada item, no `<number>px` formato. Não deve ser usado se `maxItemWidth` ou , `minItemWidth`ou ambos estiverem definidos. Valores permitidos: `<number>px`
`maxItemWidth`	Cadeia de caracteres		A largura máxima, em pixels, de cada item, no `<number>px` formato. Não deve ser usado se `itemWidth` estiver definido. Valores permitidos: `<number>px`
`minItemWidth`	Cadeia de caracteres	0	A largura mínima, em pixels, de cada item, no `<number>px` formato. Não deve ser usado se `itemWidth` estiver definido. Valores permitidos: `<number>px`
`rowSpacing`	Cadeia de caracteres	`Default`	O espaço entre as linhas de itens. Valores permitidos: `None`, `ExtraSmall`, `Small`, `DefaultMedium`, `Large`, , `ExtraLarge`,`Padding`
`targetWidth`	Cadeia de caracteres		Controles para qual largura de card o layout deve ser usado. Se `targetWidth` não for especificado, o elemento será renderizado em todas as larguras de card. O uso `targetWidth` possibilita a criação de cartões responsivos que adaptam seu layout ao espaço horizontal disponível. Para obter mais informações, consulte Layout responsivo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, `Narrow`, `Standard`, `WideatMost:NarrowatLeast:VeryNarrowatLeast:NarrowatLeast:StandardatMost:VeryNarrow`, `atMost:Standard`, , `atLeast:WideatMost:Wide`
`verticalItemsAlignment`	Cadeia de caracteres	`Top`	Controla como o conteúdo do contêiner deve ser alinhado verticalmente. Valores permitidos: `Top`, `Center`, `Bottom`

Layout.AreaGrid

Um layout que divide um contêiner em áreas nomeadas nas quais os elementos podem ser colocados.

Use Layout.AreaGrid para organizar elementos em um Cartão Adaptável, Container, Columnou TableCell em uma grade. Layout.AreaGridé útil para criar cartões responsivos: defina vários Layout.AreaGrid layouts em um único contêiner e direcione-os em diferentes larguras de card para alternar automaticamente de um layout para outro em tempo de execução de acordo com a largura disponível. Para atribuir um elemento no contêiner a uma área específica na grade, sua grid.area propriedade deve ser definida.

Exemplo

Card
Conteúdo

A captura de tela mostra um contêiner de Cartão Adaptável com um layout de grade de área.

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "layouts": [
                {
            "type": "Layout.AreaGrid",
            "targetWidth": "atLeast:Standard",
            "columns": [ 20, 40 ],
            "areas": [
                {
                    "name": "area1",
                    "columnSpan": 2
                },
                {
                    "name": "area2",
                    "column": 3
                },
                {
                    "name": "area3",
                    "row": 2
                },
                {
                    "name": "area4",
                    "column": 2,
                    "row": 2
                },
                {
                    "name": "area5",
                    "column": 3,
                    "row": 2
                }
            ]
        },
        {
            "type": "Layout.AreaGrid",
            "targetWidth": "atLeast:narrow",
            "columns": [
                50
            ],
            "areas": [
                {
                    "name": "area1",
                    "columnSpan": 2
                },
                {
                    "name": "area2",
                    "row": 2
                },
                {
                    "name": "area3",
                    "row": 2,
                    "column": 2
                },
                {
                    "name": "area4",
                    "row": 3
                },
                {
                    "name": "area5",
                    "row": 3,
                    "column": 2
                }
            ]
        }
    ],
    "body": [
        {
            "type": "Container",
            "grid.area": "area1",
            "style": "emphasis",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 1",
                    "wrap": true
                },
                {
                    "type": "TextBlock",
                    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                    "wrap": true
                }
            ]
        },
        {
            "type": "Container",
            "grid.area": "area2",
            "style": "good",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 2",
                    "wrap": true
                }
            ],
            "height": "stretch"
        },
        {
            "type": "Container",
            "grid.area": "area3",
            "style": "accent",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 3",
                    "wrap": true
                }
            ]
        },
        {
            "type": "Container",
            "grid.area": "area4",
            "style": "attention",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 4",
                    "wrap": true
                }
            ]
        },
        {
            "type": "Container",
            "grid.area": "area5",
            "style": "warning",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 5",
                    "wrap": true
                }
            ]
        }
    ]
}

Estas são as propriedades do Layout.AreaGrid layout:

Nome	Tipo	Padrão	Descrição
`type`	Cadeia de caracteres		Deve ser `Layout.AreaGrid`.
`areas`	Matriz de objetos		As áreas no layout da grade. Valores permitidos: `GridArea`
`columns`	Matriz de números ou cadeias de caracteres		As colunas no layout de grade, definidas como uma porcentagem da largura disponível ou em pixels usando o `<number>px` formato.
`columnSpacing`	Cadeia de caracteres	`Default`	O espaço entre as colunas. Valores permitidos: `None`, `ExtraSmall`, `Small`, `DefaultMedium`, , `Large`, , `ExtraLarge`. `Padding`
`rowSpacing`	Cadeia de caracteres	`Default`	O espaço entre linhas. Valores permitidos: `None`, `ExtraSmall`, `Small`, `DefaultMedium`, , `Large`, , `ExtraLarge`. `Padding`
`targetWidth`	Cadeia de caracteres		Controles para qual largura de card o layout deve ser usado. Não deve ser usado se `itemWidth` estiver definido. Se `targetWidth` não for especificado, o elemento será renderizado em todas as larguras de card. O uso `targetWidth` possibilita a criação de cartões responsivos que adaptam seu layout ao espaço horizontal disponível. Para obter mais informações, consulte Layout responsivo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, `Narrow`, `Standard`, `WideatMost:NarrowatLeast:VeryNarrowatLeast:NarrowatLeast:StandardatMost:VeryNarrow`, `atMost:Standard`, , `atLeast:WideatMost:Wide`

GridArea

Define uma área em um Layout.AreaGrid layout.

Estas são as propriedades da GridArea matriz:

Nome	Tipo	Padrão	Descrição
`columns`	Número	1	O índice da coluna inicial da área. Os índices da coluna começam em 1.
`columnSpan`	Número	1	Define quantas colunas a área deve abranger.
`name`	Cadeia de caracteres		O nome da área. Para colocar um elemento nesta área, defina sua `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 deve abranger.

Usando layouts de contêiner para implementar layout responsivo

Os layouts de contêiner podem ser usados para implementar layouts responsivos, pois é possível associar vários layouts a um único contêiner, cada um dedicado a uma largura de card específica. No tempo de execução, o layout apropriado é usado automaticamente para organizar os elementos na largura disponível.

Por exemplo, se você quiser definir um card com um layout típico em que:

Há uma imagem à esquerda
Texto à direita da imagem

No entanto, o texto deve aparecer abaixo da imagem quando não houver espaço horizontal suficiente.

Isso pode ser feito usando Layout.AreaGrid:

Card
Conteúdo

A captura de tela mostra um Cartão Adaptável em layouts diferentes.

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "layouts": [
        {
            "type": "Layout.AreaGrid",
            "targetWidth": "atLeast:standard",
            "columns": [
                60
            ],
            "areas": [
                {
                    "name": "imageArea"
                },
                {
                    "name": "textArea",
                    "column": 2
                }
            ]
        }
    ],
    "body": [
        {
            "type": "Image",
            "url": "images/adaptivecards1.jpeg",
            "grid.area": "imageArea",
            "style": "RoundedCorners",
            "targetWidth": "atLeast:narrow"
        },
        {
            "type": "Container",
            "grid.area": "textArea",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Adaptive Cards",
                    "wrap": true,
                    "size": "ExtraLarge",
                    "weight": "Bolder"
                },
                {
                    "type": "TextBlock",
                    "text": "The simple, lightweight card format to power your ideas.",
                    "wrap": true
                }
            ]
        }
    ]
}

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 os elementos no card em um layout de grade somente quando a largura do card for pelo menos standard (o que corresponde à largura típica de um card em um chat do Teams, por exemplo).
- Se a largura do card for menor que standard, use o layout padrão, Layout.Stack.
O layout de grade tem pelo menos uma coluna que deve usar 60% do espaço disponível. A grade pode ter outras colunas (dependendo de como areas são definidas), mas como não estão definidas, cada uma compartilha uma parte igual do espaço restante.
Duas áreas são definidas:
- Um para a imagem, que mapeia para a primeira coluna e a primeira linha da grade.
- Um para o texto, que abrange a segunda coluna e a primeira linha.

Dica

Não é necessário especificar a layouts propriedade. Quando nenhum layout explícito for especificado, o contêiner usará um Layout.Stack layout.

Aos elementos no corpo do card é atribuída uma área de grade 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	Exemplo que demonstra formatação diferente suportada em cartões usando bot.	View	Exibir

Confira também

Comentários

Esta página foi útil?

Last updated on 2026-08-24