Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Hinweis
Erstellen Sie Copilot-, Teams- oder Outlook-Szenarien, die von adaptiven Karten unterstützt werden? Besuchen Sie den Dokumentationshub für adaptive Karten, den neuen One-Stop-Shop für alle Ihre Anforderungen an adaptive Karten! Es verfügt über alle Ressourcen, die Sie suchen, einschließlich der vollständigen Dokumentation für viele neue Features, z. B. dynamisches Layout, Symbol, Badge, Karussell, Diagramme und vieles mehr!
Diese Seite dokumentiert das Column-Element , das einen Container definiert, der Teil eines Elements ColumnSetist.
Wichtiger Hinweis zur Barrierefreiheit: In Version 1.3 des Schemas haben wir eine Bezeichnungseigenschaft für Eingaben eingeführt, um die Barrierefreiheit zu verbessern. Wenn die Host-App, auf die Sie abzielen , v1.3 unterstützt, sollten Sie die Bezeichnung anstelle eines TextBlock verwenden, wie in einigen Beispielen unten dargestellt. Sobald die meisten Host-Apps auf die neueste Version aktualisiert wurden, aktualisieren wir die Beispiele entsprechend.
Kolumne
Definiert einen Container, der Teil eines ColumnSet ist.
Spalteneigenschaften
| Eigentum | Typ | Erforderlich | Description | Version |
|---|---|---|---|---|
| Elemente | Element[] |
Nein | Die Kartenelemente, die in der ColumnDatei gerendert werden sollen. |
1,0 |
| backgroundImage |
BackgroundImage, uri |
Nein | Gibt das Hintergrundbild an. Zulässige Formate sind PNG, JPEG und GIF. | 1.2 |
| Bluten | boolean |
Nein | Bestimmt, ob die Spalte in den Innenabstand des übergeordneten Elements eindringen soll. | 1.2 |
| Ausweichlösung |
Column, FallbackOption |
Nein | Beschreibt, was zu tun ist, wenn ein unbekanntes Element auftritt oder die Anforderungen dieses oder eines untergeordneten Elements nicht erfüllt werden können. | 1.2 |
| minHeight | string |
Nein | Gibt die Mindesthöhe der Spalte in Pixel an, wie "80px". |
1.2 |
| RTL | boolean? |
Nein | Wenn true Inhalte in dieser Spalte von rechts nach links angezeigt werden sollen. Wenn "False"-Inhalt in dieser Spalte von links nach rechts angezeigt werden soll. Wenn die Layoutrichtung nicht festgelegt ist, wird sie von einem übergeordneten Container oder einer übergeordneten Spalte geerbt. Wenn sie in allen Vorgängern nicht festgelegt ist, wird das Standardverhalten der Plattform angewendet. |
1.5 |
| separator | boolean |
Nein | Zeichnen Sie eine trennende Linie zwischen dieser Spalte und der vorherigen Spalte, wenn true. |
1,0 |
| Abstand | Spacing |
Nein | Steuert den Abstand zwischen dieser Spalte und der vorherigen Spalte. | 1,0 |
| selectAction | ISelectAction |
Nein | Eine Aktion, die aufgerufen wird, wenn Column angetippt oder ausgewählt wird.
Action.ShowCard wird nicht unterstützt. |
1.1 |
| style | ContainerStyle? |
Nein | Formatvorlagenhinweis für Column. |
1,0 |
| verticalContentAlignment | VerticalContentAlignment? |
Nein | Definiert, wie der Inhalt vertikal innerhalb der Spalte ausgerichtet werden soll. Wenn nicht angegeben, wird der Wert von verticalContentAlignment vom übergeordneten Container geerbt. Wenn kein übergeordneter Container "verticalContentAlignment" festgelegt hat, wird standardmäßig auf "Oben" eingestellt. | 1.1 |
| width |
string, number |
Nein |
"auto", "stretch" ist eine Zahl, die die relative Breite der Spalte in der Spaltengruppe darstellt, oder in Version 1.1 und höher eine bestimmte Pixelbreite, wie "50px". |
1,0 |
Geerbte Eigenschaften
| Eigentum | Typ | Erforderlich | Description | Version |
|---|---|---|---|---|
| id | string |
Nein | Ein eindeutiger Bezeichner, der dem Element zugeordnet ist. | 1,0 |
| isVisible | boolean |
Nein, Standard: true |
Wenn false, wird dieses Element aus dem visuellen Baum entfernt. |
1.2 |
| erfordert | Dictionary<string> |
Nein | Eine Reihe von Schlüssel-Wert-Paaren, die Features angeben, die für das Element mit entsprechender Mindestversion erforderlich sind. Wenn ein Feature fehlt oder die Version nicht ausreichend ist, wird ein Rückfall ausgelöst. | 1.2 |
Example
Standardspaltenbeispiel (JSON)
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat"
}
]
}
]
}
]
}
Eigenschaften
items
Die Kartenelemente, die in der ColumnDatei gerendert werden sollen.
-
Typ:
Element[] - Erforderlich: Nein
-
Zulässige Werte:
-
ActionSet,ColumnSet,Container,FactSet,Image,ImageSet,Input.ChoiceSet,Input.Date,Input.Number,Input.Text,Input.Time,Input.Toggle,Media,RichTextBlock,Table,TextBlock
-
backgroundImage
Gibt das Hintergrundbild an. Zulässige Formate sind PNG, JPEG und GIF.
-
Typ:
BackgroundImage,uri - Version: 1.2
- Erforderlich: Nein
-
Zulässige Werte:
BackgroundImageuri
BackgroundImage-Beispiel (JSON)
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": "https://adaptivecards.io/content/AlkiBeach.jpg",
"width": "auto"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/GoldenGardensPark.jpg",
"verticalAlignment": "Center"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": "https://adaptivecards.io/content/BainbridgeIsland.jpg",
"width": "auto"
}
]
},
{
"type": "TextBlock",
"text": "You can even repeat the background image..."
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "Repeat"
},
"width": "stretch"
},
{
"type": "Column",
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Those are some neat arrows",
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Horizontal repeat..."
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/downarrow.png",
"fillMode": "RepeatHorizontally"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "RepeatHorizontally",
"verticalAlignment": "Center"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "RepeatHorizontally",
"verticalAlignment": "Bottom"
},
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Vertical repeat..."
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "RepeatVertically"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/downarrow.png",
"fillMode": "RepeatVertically",
"horizontalAlignment": "Center"
},
"width": "stretch"
},
{
"type": "Column",
"minHeight": "50px",
"backgroundImage": {
"url": "https://adaptivecards.io/content/uparrow.png",
"fillMode": "RepeatVertically",
"horizontalAlignment": "Right"
},
"width": "stretch"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
Bluten
Bestimmt, ob die Spalte über den Abstand des übergeordneten Elements hinaus sichtbar sein soll.
-
Typ:
boolean - Version: 1.2
- Erforderlich: Nein
Beispiel für Bleed (JSON)
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Bleed left"
},
{
"type": "ColumnSet",
"style": "emphasis",
"columns": [
{
"type": "Column",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
],
"bleed": true,
"width": "stretch"
},
{
"type": "Column",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
}
],
"width": "stretch"
},
{
"type": "Column",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Bleed center"
},
{
"type": "ColumnSet",
"style": "emphasis",
"columns": [
{
"type": "Column",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
],
"width": "stretch"
},
{
"type": "Column",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
}
],
"bleed": true,
"width": "stretch"
},
{
"type": "Column",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Bleed right"
},
{
"type": "ColumnSet",
"style": "emphasis",
"columns": [
{
"type": "Column",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
],
"width": "stretch"
},
{
"type": "Column",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
}
],
"width": "stretch"
},
{
"type": "Column",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
}
],
"bleed": true,
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "Bleed all"
},
{
"type": "ColumnSet",
"style": "emphasis",
"columns": [
{
"type": "Column",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
],
"bleed": true,
"width": "stretch"
},
{
"type": "Column",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
}
],
"bleed": true,
"width": "stretch"
},
{
"type": "Column",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
}
],
"bleed": true,
"width": "stretch"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Plan B
Beschreibt, was zu tun ist, wenn ein unbekanntes Element auftritt oder dies oder alle untergeordneten Elemente nicht erfüllt werden können.
-
Typ:
Column,FallbackOption - Version: 1.2
- Erforderlich: Nein
-
Zulässige Werte:
Column-
"drop": Bewirkt, dass dieses Element sofort gelöscht wird, wenn unbekannte Elemente gefunden werden. Das unbekannte Element taucht nicht weiter oben auf.
Fallback-Beispiel (JSON)
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Graph"
}
],
"fallback": {
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Fallback"
}
]
},
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "Graph"
}
],
"fallback": "drop"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "This is a column",
"wrap": true
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
minimale Höhe
Gibt die Mindesthöhe der Spalte in Pixel an, wie zum Beispiel "80px".
-
Typ:
string - Version: 1.2
- Erforderlich: Nein
minHeight-Beispiel (JSON)
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "ColumnSet",
"style": "emphasis",
"minHeight": "100px",
"columns": [
{
"type": "Column",
"style": "default",
"minHeight": "200px",
"items": [
{
"type": "TextBlock",
"wrap": true,
"text": "The columnset has a minHeight of 100px while this column has a minHeight of 200px so it should override"
}
]
},
{
"type": "Column",
"style": "default",
"minHeight": "50px",
"items": [
{
"type": "FactSet",
"facts": [
{
"title": "ColumnSet",
"value": "MinHeight: 100px"
},
{
"title": "Column 1",
"value": "MinHeight: 200px"
},
{
"title": "Column 2",
"value": "MinHeight: 50px"
}
]
}
]
}
]
}
]
}
RTL
Wenn true Inhalte in dieser Spalte von rechts nach links angezeigt werden sollen. Wenn "False"-Inhalt in dieser Spalte von links nach rechts angezeigt werden soll. Wenn dies nicht festgelegt ist, erbt die Layoutrichtung vom übergeordneten Container oder der übergeordneten Spalte. Wenn sie in allen Vorgängern nicht festgelegt ist, wird das Standardverhalten der Plattform angewendet.
-
Typ:
boolean? - Version: 1.5
- Erforderlich: Nein
rtl-Beispiel (JSON)
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "The middle column is set to rtl",
"wrap": true,
"size": "Medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column One",
"wrap": true
}
]
},
{
"type": "Column",
"rtl": true,
"items": [
{
"type": "TextBlock",
"text": "العمود الثاني",
"wrap": true
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"wrap": true,
"text": "Column three"
}
]
}
],
"spacing": "Medium"
}
]
}
Trennzeichen
Zeichnen Sie beim Zeichnen trueeiner trennenden Linie zwischen dieser Spalte und der vorherigen Spalte.
-
Typ:
boolean - Erforderlich: Nein
Abstand
Steuert den Abstand zwischen dieser Spalte und der vorherigen Spalte.
-
Typ:
Spacing - Erforderlich: Nein
-
Zulässige Werte:
-
"default", ,"none""small","medium","large", ,"extraLarge""padding"
-
Spacing-Beispiel (JSON)
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"speak": "The Seattle Seahawks beat the Carolina Panthers 40-7",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/3.png",
"altText": "Shades cat team emblem",
"size": "medium"
},
{
"type": "TextBlock",
"text": "SHADES",
"horizontalAlignment": "center",
"weight": "bolder"
}
]
},
{
"type": "Column",
"width": "stretch",
"separator": true,
"spacing": "medium",
"items": [
{
"type": "TextBlock",
"text": "Dec 4",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "Final",
"spacing": "none",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "7 - 40",
"size": "extraLarge",
"horizontalAlignment": "center"
}
]
},
{
"type": "Column",
"width": "auto",
"separator": true,
"spacing": "medium",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/2.png",
"altText": "Skins cat team emblem",
"size": "medium",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "SKINS",
"horizontalAlignment": "center",
"weight": "bolder"
}
]
}
]
}
]
}
]
}
selectAction
Eine Aktion, die aufgerufen wird, wenn Column angetippt oder ausgewählt wird.
Action.ShowCard wird nicht unterstützt.
-
Typ:
ISelectAction - Version: 1.1
- Erforderlich: Nein
-
Zulässige Werte:
-
Action.ExecuteAction.OpenUrlAction.SubmitAction.ToggleVisibility
-
SelectAction-Beispiel (JSON)
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "Try clicking a column!",
"weight": "bolder"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"tooltip": "cool link",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 2"
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"tooltip": "another cool link",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Column 3"
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"tooltip": "a third cool link",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
}
]
}
]
}
style
Formatvorlagenhinweis für Column.
-
Typ:
ContainerStyle? - Erforderlich: Nein
-
Zulässige Werte:
-
"default","emphasis","good"(v1.2+),"attention"(v1.2+),"warning"(v1.2+),"accent"(v1.2+)
-
Style-Beispiel (JSON)
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "No Style"
}
]
},
{
"type": "Column",
"style": "default",
"items": [
{
"type": "TextBlock",
"text": "Default Style"
}
]
},
{
"type": "Column",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Emphasis Style"
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Container no style"
}
]
},
{
"type": "Container",
"style": "default",
"items": [
{
"type": "TextBlock",
"text": "Container default style"
}
]
},
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Container emphasis style"
}
]
}
]
}
]
}
]
}
vertikale Inhaltsausrichtung
Definiert, wie der Inhalt vertikal innerhalb der Spalte ausgerichtet werden soll. Wenn nicht angegeben, wird der Wert von verticalContentAlignment vom übergeordneten Container übernommen. Wenn kein übergeordneter Container festgelegt wurde verticalContentAlignment , wird standardmäßig "Oben" festgelegt.
-
Typ:
VerticalContentAlignment? - Version: 1.1
- Erforderlich: Nein
-
Zulässige Werte:
-
"top","center""bottom"
-
VerticalContentAlignment-Beispiel (JSON)
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.1",
"verticalContentAlignment": "center",
"body": [
{
"type": "TextBlock",
"text": "Hi,"
},
{
"type": "TextBlock",
"text": "MasterHip",
"isSubtle": true
},
{
"type": "ColumnSet",
"height": "stretch",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "bottom",
"items": [
{
"type": "TextBlock",
"text": "Column 1"
}
]
}
]
}
]
}
width
Steuert die Breite der Spalte.
-
Typ:
string,number - Erforderlich: Nein
-
Mögliche Werte:
-
"auto": Spalte nimmt die für den Inhalt erforderliche Breite auf. -
"stretch": Die Spalte nimmt die verbleibende verfügbare Breite auf. - A
number: Stellt die relative Breite in der Spaltengruppe dar (z. B. eine Spalte mit Breite2neben einer Spalte mit Breite1bedeutet, dass die erste doppelt so breit ist wie die zweite). - Eine bestimmte Pixelbreite wie
"50px"(v1.1+).
-
Width-Beispiel (JSON)
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "(auto)"
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/adaptive-card-50.png",
"altText": "Adaptive cards logo"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "(stretch)"
},
{
"type": "Image",
"horizontalAlignment": "center",
"url": "https://adaptivecards.io/content/adaptive-card-50.png",
"altText": "Adaptive cards logo"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "(auto)"
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/adaptive-card-50.png",
"altText": "Adaptive cards logo"
}
]
}
]
}
]
}
id
Ein eindeutiger Bezeichner, der dem Element zugeordnet ist.
-
Typ:
string - Erforderlich: Nein
isVisible
Wenn false, wird dieses Element aus dem visuellen Baum entfernt.
-
Typ:
boolean - Version: 1.2
-
Erforderlich: Nein, Standard:
true
erfordert
Eine Reihe von Schlüssel-Wert-Paaren, die Features angeben, die für das Element mit entsprechender Mindestversion erforderlich sind. Wenn ein Feature fehlt oder die Version nicht ausreichend ist, wird ein Rückfall ausgelöst.
-
Typ:
Dictionary<string> - Version: 1.2
- Erforderlich: Nein