簡體   English   中英

自適應卡片中的按鈕對齊

[英]Button alignment in Adaptive cards

我想知道是否有辦法控制 Bot Emulator 中自適應卡中按鈕的對齊方式。

我在模擬器和 Microsoft 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
                }
            }
            ]
      }
    }

如圖所示,按鈕在模擬器中水平對齊,在可視化器中彼此相鄰。 有沒有辦法修改按鈕的高度和寬度,以及它們的對齊方式?

我想知道是否有辦法控制 Bot Emulator 中自適應卡中按鈕的對齊方式。

簡短的回答是“不”。 您不能在模擬器中修改組件的渲染。

長答案是:Bot Framework Emulator 是開源的,因此您可以嘗試在本地修改和運行您的自定義模擬器。 但我不確定在模擬器上制作自定義渲染對於實際項目是否非常有用,因為它們不會在模擬器上運行。

模擬器源位於此處: https : //github.com/Microsoft/BotFramework-Emulator

有一種叫做Hostconfig和自適應卡的東西,嘗試使用它。 已分享編輯器工具鏈接。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM