在Adaptive Cards中,可以通过添加条件表达式来控制元素的显示。在这种情况下,我们可以使用“when”属性来设置当特定的输入元素设置时,另一个元素才能显示。
以下是一个示例Adaptive Card,其中当ToggleSwitch设置为true时,Image才会显示:
{
"type": "AdaptiveCard",
"body": [
{
"type": "ToggleInput",
"id": "toggleSwitch",
"title": "Show Image"
},
{
"type": "Image",
"id": "imageToShow",
"isVisible": false,
"when": "${toggleSwitch.value == true}",
"url": "https://example.com/image.png"
}
]
}
在上面的示例中,当ToggleSwitch设置为true时,Image元素的isVisible属性会被设置为true,并且显示在Adaptive Card中。
请注意,可以在when属性中使用任何有效的逻辑表达式,而不只是在input元素上使用的值。您还可以使用并合并不同条件,例如:
"when": "${toggleSwitch.value == true && radioButton.value == 'option1'}"
这将确保在ToggleSwitch设置为true且RadioButton被设置为“option1”时,Image元素才会显示。
值得注意的是,“when”属性只会影响元素的isVisible属性,而不是元素的完整布局。因此,如果元素被隐藏,仍然会占用其在Adaptive Card中的空间。为了充分利用空间,请考虑在必要时使用“visibility”属性而不是“isVisible”属性。