分隔符未显示在自适应卡中

时间:2018-05-10 09:19:00

标签: botframework adaptive-cards

我一直试图获得"分隔符"自适应卡的属性可以工作,但它似乎没有在BotFramework模拟器中渲染。

以下是针对相同代码的模拟器和展示台的图像:Emulator Visualizer

两个地方的代码是相同的,如下所示:

{
    "contentType": "application/vnd.microsoft.card.adaptive",
    "content": {
        '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
        'version': '1.0',
        'type': 'AdaptiveCard',
        'body': [
        {
            'type': 'TextBlock',
            'text': 'Meeting Title',
            'weight': 'bolder'
        },
        {
            'type': 'TextBlock',
            'text': 'Location',
            'separator': true,
            'isSubtle': true,
            'size': 'small'
        },
        {
            'type': 'TextBlock',
            'text': 'Location',
            'spacing': 'none'
        },
        {
            'type': 'TextBlock',
            'text': 'Organizer',
            'separator': true,
            'isSubtle': true,
            'size': 'small'
        },
        {
            'type': 'TextBlock',
            'text': 'Organizer Name',
            'spacing': 'none'
        },
        {
            'type': 'TextBlock',
            'text': 'Start Time',
            'separator': true,
            'isSubtle': true,
            'size': 'small'
        },
        {
            'type': 'ColumnSet',
            'spacing': 'none',
            'columns': [
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': '05:00 PM',
                    'isSubtle': false,
                    'weight': 'bolder'
                }
                ]
            },
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': 'May 21'
                }
                ]
            },
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': '2017',
                    'isSubtle': true,
                    'weight': 'bolder'
                }
                ]
            }
            ]
        },
        {
            'type': 'TextBlock',
            'text': 'End Time',
            'separator': true,
            'isSubtle': true,
            'size': 'small'
        },
        {
            'type': 'ColumnSet',
            'spacing': 'none',
            'columns': [
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': '05:30 PM',
                    'isSubtle': false,
                    'weight': 'bolder'
                }
                ]
            },
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': 'May 21'
                }
                ]
            },
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': '2017',
                    'isSubtle': true,
                    'weight': 'bolder'
                }
                ]
            }

            ]
        }
        ],
        'actions': [
        {
            'type': 'Action.Submit',
            'title': 'Accept',
            'data':{
                'accept': true
            }
        },
        {
            'type': 'Action.Submit',
            'title': 'Decline',
            'data':{
                'accept': false
            }
        }
        ]
  }
}

如图所示,对于相同的代码,分隔符仅出现在可视化工具中。我错过了什么吗?

2 个答案:

答案 0 :(得分:0)

您可以使用分隔符代替分隔符             分隔= SeparationStyle.Strong 这对我有用

答案 1 :(得分:0)

这可能有点棘手,因为分隔符文档有点含糊(至少对我而言)。

看看here-用于分隔符的语法似乎在任何地方都不起作用。

我发现的东西:

  • spacing属性工作正常(至少使用这些值"none" | "small" | "default" | "medium" | "large" | "extraLarge" | "padding"
  • 它仅在容器(ContainerColumnSetColumn等)中使用时有效。
  • 它(也顾名思义)也适用于容器的外部区域(类似于 CSS margin属性)
  • 对第一个容器不起作用

您可以转到自适应卡classic editor,并在第二个"spacing": "large"部分(其中只有2个)上放置间距(假设为Container),然后观察间距对你自己