Макеты контейнеров

Контейнеры, такие как Container, Column, TableCellили адаптивная карточка, поддерживают три различных типа макетов:

• Layout.Stack стекает элементы поверх друг друга и является макетом по умолчанию.
• Layout.Flow распределяет элементы по горизонтали и при необходимости заключает их в несколько строк.
• Layout.AreaGrid делит контейнер на именованный areas , в котором элементы могут быть помещены через grid.area свойство, которое можно задать для любого элемента.

Layout.Stack

Макет, который складывает элементы поверх друг друга. Layout.Stack — это макет по умолчанию, используемый адаптивной карточкой и всеми контейнерами.

Ниже приведены свойства макета Layout.Stack .

Имя	Обязательный	Тип	Описание
type	✔️	String	Должно быть задано значение Layout.Stack.
targetWidth		String	Управляет шириной карта, для которой необходимо использовать макет. Если targetWidth параметр не указан, элемент отображается на всех карта ширины. Использование targetWidth позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, , atLeast:WideatLeast:StandardatMost:StandardatMost:Wide

Layout.Flow

Макет, который распределяет элементы по горизонтали и по мере необходимости заключает их в несколько строк.

Используйте Layout.Flow для размещения списков элементов, таких как изображения, не беспокоясь о количестве свободного пространства по горизонтали. Ширину и выравнивание элементов можно настроить по мере необходимости. Каждая строка автоматически получает соответствующую высоту, а интервал между столбцами и строками настраивается и автоматически применяется.

Примеры

Выравнивание по левому верхнему краю

Карточка

Полезные данные

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

По горизонтали и по вертикали по центру

Карточка

Полезные данные

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

Всегда заполняйте доступное пространство в каждой строке

Карточка

Полезные данные

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

Совет

Не используйте maxItemWidth свойство с itemFit: fill. По определению предотвращает превышение maxItemWidth определенной ширины элементов, что несовместимо с заполнением оставшегося свободного места в строке путем незначительного увеличения каждого элемента в этой строке. Вместо этого используйте itemWidth свойство .

Ниже приведены свойства макета Layout.Stack .

Имя	Тип	По умолчанию	Описание
type	String		Должно быть задано значение Layout.Stack.
columnSpacing	String	"По умолчанию"	Пространство между элементами. Допустимые значения: None, ExtraSmall, Small, Default, Medium, Large, ExtraLarge, Padding
horizontalItemsAlignment	String	"Center"	Определяет, как содержимое контейнера должно быть выровнено по горизонтали. Допустимые значения: Left, Center, Right
itemFit	String	"Fit"	Определяет, как элемент должен помещаться в контейнер. Допустимые значения: Fit, Fill
itemWidth	String		Ширина (в пикселях) каждого элемента в <number>px формате . Не следует использовать, если maxItemWidth задано значение или minItemWidth, или оба параметра. Допустимые значения: <number>px
maxItemWidth	String		Максимальная ширина (в пикселях) каждого элемента в <number>px формате . Не следует использовать, если itemWidth задано значение . Допустимые значения: <number>px
minItemWidth	String	0	Минимальная ширина (в пикселях) каждого элемента в <number>px формате . Не следует использовать, если itemWidth задано значение . Допустимые значения: <number>px
rowSpacing	String	Default	Пространство между строками элементов. Допустимые значения: None, ExtraSmall, Small, Default, Medium, Large, ExtraLarge, Padding
targetWidth	String		Элементы управления, для которых карта ширины должен использоваться макет. Если targetWidth параметр не указан, элемент отображается на всех карта ширины. Использование targetWidth позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, , atLeast:WideatLeast:StandardatMost:StandardatMost:Wide
verticalItemsAlignment	String	Top	Управляет тем, как содержимое контейнера должно быть выровнено по вертикали. Допустимые значения: Top, Center, Bottom

Layout.AreaGrid

Макет, разделяющий контейнер на именованные области, в которые можно поместить элементы.

Используйте Layout.AreaGrid для упорядочения элементов в адаптивной карточке, Container, Columnили TableCell в сетке. Layout.AreaGridполезно для разработки адаптивных карточек: определите несколько Layout.AreaGrid макетов в одном контейнере и нацеливаете их на разные карта ширины, чтобы автоматически переключаться с одного макета на другой во время выполнения в соответствии с доступной шириной. Чтобы назначить элемент в контейнере определенной области в сетке, необходимо задать его grid.area свойство.

Пример

Карточка

Полезные данные

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

Ниже приведены свойства макета Layout.AreaGrid .

Имя	Тип	По умолчанию	Описание
type	String		Должно быть задано значение Layout.AreaGrid.
areas	Массив объектов		Области в макете сетки. Допустимые значения: GridArea
columns	Массив чисел или строк		Столбцы в макете сетки, определенные в процентах от доступной ширины или в пикселях <number>px с помощью формата .
columnSpacing	String	Default	Пространство между столбцами. Допустимые значения: None, ExtraSmall, Small, Default, Medium, Large, ExtraLarge, . Padding
rowSpacing	String	Default	Пространство между строками. Допустимые значения: None, ExtraSmall, Small, Default, Medium, Large, ExtraLarge, . Padding
targetWidth	String		Элементы управления, для которых карта ширины должен использоваться макет. Не следует использовать, если itemWidth задано значение . Если targetWidth параметр не указан, элемент отображается на всех карта ширины. Использование targetWidth позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, , atLeast:WideatLeast:StandardatMost:StandardatMost:Wide

GridArea

Определяет область в макете Layout.AreaGrid .

Ниже приведены свойства массива GridArea .

Имя	Тип	По умолчанию	Описание
columns	Номер	1	Индекс начального столбца области. Индексы столбцов начинаются с 1.
columnSpan	Номер	1	Определяет, сколько столбцов должна охватывать область.
name	String		Имя области. Чтобы разместить элемент в этой области, задайте его grid.area свойство, соответствующее имени области.
row	Номер	1	Индекс начальной строки области. Индексы строк начинаются с 1.
rowSpan	Номер	1	Определяет, сколько строк должна охватывать область.

Использование макетов контейнеров для реализации адаптивного макета

Макеты контейнеров можно использовать для реализации адаптивных макетов, так как можно связать несколько макетов с одним контейнером, каждый из которых выделен для определенной карта ширины. Во время выполнения соответствующий макет автоматически используется для размещения элементов в доступной ширине.

Например, если вы хотите определить карта с типичным макетом, где:

• Слева есть изображение
• Текст справа от изображения

Однако текст должен отображаться под изображением, если недостаточно горизонтального пространства.

Это можно сделать с помощью Layout.AreaGrid:

Карточка

Полезные данные

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

Принципы действия

layouts Здесь свойство определяется в целом карта:

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

Это означает:

• Упорядочивание элементов в карта в макете сетки только в том случае, если ширина карта не ниже standard (например, что соответствует типичной ширине карта в чате Teams).
  • Если ширина карта меньше , используйте standardмакет Layout.Stackпо умолчанию .
• Макет сетки содержит по крайней мере один столбец, который должен использовать 60 % доступного пространства. Сетка может содержать другие столбцы (в зависимости от того, как areas они определены), но так как они не определены, каждый из них разделяет равную часть оставшегося пространства.
• Определены две области:
  • Один для изображения, который сопоставляется с первым столбцом и первой строкой сетки.
  • Один для текста, который охватывает второй столбец и первую строку.

Совет

Указывать layouts свойство не требуется. Если явный макет не указан, контейнер будет использовать Layout.Stack макет.

Элементам в тексте карта назначается область сетки grid.area с помощью свойства :

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

Пример кода

Имя	Описание	.Node.js	.NET
Форматирование карточек	В этом примере приложения демонстрируются различные макеты контейнеров в адаптивных карточках.	Просмотр	Просмотр

См. также

• Адаптивный макет адаптивной карточки
• Обозреватель схемы