【问题标题】:Separator not showing in Adaptive Cards分隔符未显示在自适应卡片中
【发布时间】:2019-01-17 22:24:58
【问题描述】:

我一直在尝试让自适应卡片的“分隔符”属性起作用,但它似乎没有在 BotFramework Emulator 中呈现。

以下是相同代码的模拟器和展示台的图像:EmulatorVisualizer

两处代码相同,如下:

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

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

【问题讨论】:

  • 顺便说一句:不要完全信任 Adaptive Card 的 Bot 项目可视化工具,它通常不会完全呈现与真实频道中相同的内容。您必须仔细检查
  • 我查看了另一篇帖子,答案说我们可以创建自定义模拟器。我希望能够自己更换卡片。不是模拟器。就像可以在其中注入 HTML div 一样。或者以某种方式修改将卡片 JSON 转换为 HTML 的解析器,以便能够添加额外的 HTML div。例如,由于分隔符似乎不起作用,替代方法是插入您自己的 div,然后手动添加分隔符。
  • "或者以某种方式修改将卡片 JSON 转换为 HTML 的解析器,以便能够添加额外的 HTML div"
  • 我将如何实现这一目标?

标签: botframework adaptive-cards


【解决方案1】:

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

【讨论】:

    【解决方案2】:

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

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

    我发现了什么:

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

    你可以去自适应卡片classic editor,把间距(比如说"spacing": "large")放在第二个Container部分(只有两个),然后自己观察间距的影响

    【讨论】:

      猜你喜欢
      • 2020-07-29
      • 2020-10-21
      • 2020-03-01
      • 2020-04-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-12
      • 2021-09-21
      相关资源
      最近更新 更多