Esquemas de contentor

Importante

Esta documentação é considerada legada. Para obter informações e recursos abrangentes relacionados com esquemas de contentor em Cartões Ajustáveis, visite o hub de documentação cartões ajustáveis.

Captura de ecrã a mostrar a home page do site Cartões Ajustáveis da Microsoft.

O hub de documentação de Cartões Ajustáveis oferece documentação de referência completa e mais recente, uma Designer de Cartão Adaptável atualizada, exemplos JSON incorporados, melhores práticas de conceção e um histórico de versões detalhado das funcionalidades do Cartão Ajustável. Para obter mais informações, veja Introdução ao hub de documentação de Cartões Ajustáveis e novas atualizações de Cartões Ajustáveis.

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

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

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

Centrado horizontal e verticalmente

Cartão
Conteúdo

Captura de ecrã a mostrar um Cartão Ajustável com um esquema de contentor centrado 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"
        }
    ]
}

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

Cartão
Conteúdo

Captura de ecrã a mostrar um Cartão Ajustável com um esquema de contentor 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 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

Cartão
Conteúdo

Captura de ecrã a mostrar um contentor de Cartão Ajustável com um esquema de grelha 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
                }
            ]
        }
    ]
}

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:

Cartão
Conteúdo

Captura de ecrã a mostrar um Cartão Ajustável em esquemas 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 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	Exemplo que demonstra a formatação diferente suportada em cartões com o bot.	View	Exibir

Confira também

Comentários

Esta página foi útil?

Last updated on 2025-04-03