自适应卡中的按钮对齐 [英] Button alignment in Adaptive cards

问题描述

我想知道是否有一种方法可以控制Bot Emulator中Adaptive卡中按钮的对齐方式.

I was wondering if there is a way to control alignment of buttons in Adaptive card in Bot Emulator.

我在模拟器和Microsoft Visualizer中尝试了相同的代码，但是它们呈现的方式不同.这些是图像:仿真器 可视化工具

I tried the same code in the emulator, and the Microsoft Visualizer, but they render differently. Here are the images: 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
                }
            }
            ]
      }
    }

如图所示，按钮在仿真器中水平对齐，在可视化器中彼此相邻.是否可以修改按钮的高度和宽度以及对齐方式?

As seen, the buttons are aligned horizontally in the emulator, and next to each other in the visualizer. Is there a way to modify the height and width of the buttons, as well as the way they are aligned?

推荐答案

我想知道是否有一种方法可以控制按钮的对齐 Bot仿真器中的自适应卡.

I was wondering if there is a way to control alignment of buttons in Adaptive card in Bot Emulator.

最简单的答案是否".您不能在模拟器中修改组件的渲染.

Short answer is "No". You cannot modify the render of components in the Emulator.

长答案是:Bot Framework Emulator是开源的，因此您可以尝试修改并在本地运行自定义模拟器.但是我不确定在模拟器上进行自定义渲染是否对真实项目很有用，因为它们不会在模拟器上运行.

Long answer is: Bot Framework Emulator is open-source, so you can try to modify and run locally your custom emulator. But I'm not sure that making a custom render on the emulator is very useful for real projects, as they will not run on the emulator.

仿真器源位于此处: https://github.com/Microsoft/BotFramework-Emulator

这篇关于自适应卡中的按钮对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！