botframework - 有没有办法在自适应卡片中水平显示按钮?
问题描述
我需要在自适应卡片中水平显示提交按钮。有没有办法一样?
我尝试使用“columnset”但没有运气
{"type": "ColumnSet",
"columns":[{
"type":"Column",
"width":"auto",
"items":[{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Yes",
"data": {
"feedback" : "Yes"
}
}]}]},
{"type":"Column",
"width":"auto",
"items":[{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Yes",
"data": {
"feedback" : "Yes"
}
}
]
}] }
]
}
解决方案
Web Chat 用来呈现卡片的AdaptiveCard npm包使用主机配置来定义卡片的样式。网络聊天提供了自己的主机配置,将 actionsOrientation 值设置为“垂直”,但您可以通过创建自己的主机配置并将 actionsOrientation 值设置为“水平”来更改此行为。不幸的是,要保持 Web Chat 的其余卡片样式,您现在必须传递整个主机配置,但目前 GitHub 上存在一个问题来修复此行为。
自定义主机配置
const adaptiveCardHostConfig = {
"hostCapabilities": {
"capabilities": null
},
"choiceSetInputValueSeparator": ",",
"supportsInteractivity": true,
"fontTypes": {
"default": {
"fontFamily": "Calibri, sans-serif",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 17,
"large": 21,
"extraLarge": 26
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
},
"monospace": {
"fontFamily": "'Courier New', Courier, monospace",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 17,
"large": 21,
"extraLarge": 26
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
}
},
"spacing": {
"small": 3,
"default": 8,
"medium": 20,
"large": 30,
"extraLarge": 40,
"padding": 10
},
"separator": {
"lineThickness": 1,
"lineColor": "#EEEEEE"
},
"imageSizes": {
"small": 40,
"medium": 80,
"large": 160
},
"containerStyles": {
"default": {
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#767676",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"dark": {
"default": "#000000",
"subtle": "#66000000",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"accent": {
"default": "#0063B1",
"subtle": "#0063B1",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"warning": {
"default": "#c3ab23",
"subtle": "#DDc3ab23",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"attention": {
"default": "#FF0000",
"subtle": "#DDFF0000",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
}
},
"backgroundColor": "#FFFFFF"
},
"emphasis": {
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#767676",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"dark": {
"default": "#000000",
"subtle": "#66000000",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"warning": {
"default": "#c3ab23",
"subtle": "#DDc3ab23",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
},
"attention": {
"default": "#FF0000",
"subtle": "#DDFF0000",
"highlightColors": {
"default": "#22000000",
"subtle": "#11000000"
}
}
},
"backgroundColor": "#F0F0F0"
}
},
"actions": {
"maxActions": 100,
"spacing": "Default",
"buttonSpacing": 8,
"showCard": {
"actionMode": "Inline",
"inlineTopMargin": 8,
"style": "emphasis"
},
"preExpandSingleShowCardAction": false,
"actionsOrientation": "horizontal",
"actionAlignment": "Stretch",
"wrap": true
},
"adaptiveCard": {
"allowCustomStyle": false
},
"imageSet": {
"maxImageHeight": 100
},
"media": {
"allowInlinePlayback": true
},
"factSet": {
"title": {
"size": "Default",
"color": "Default",
"isSubtle": false,
"weight": "Bolder",
"wrap": true
},
"value": {
"size": "Default",
"color": "Default",
"isSubtle": false,
"weight": "Default",
"wrap": true
},
"spacing": 8
},
"cssClassNamePrefix": null,
"_legacyFontType": {
"fontFamily": "Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 17,
"large": 21,
"extraLarge": 26
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
}
};
网络聊天
renderWebChat({
adaptiveCardHostConfig,
directLine
}, document.getElementById('webchat'));
截屏
有关更多详细信息,请查看有关主机配置的 AdaptiveCard 文档。
希望这可以帮助!
推荐阅读
- javascript - 使用 Blob 特定的 SAS 令牌连接和更新 Azure Blob
- laravel - Laravel Eloquent - 将 varchar(带字符的数字)订购为数字
- javascript - 为什么相机流正在加载但在浏览器窗口中不可见?
- postgresql - 子查询返回的多行用作表达式问题
- nuget - NuGet 是否将所有活动记录到某个中心位置?
- asp.net-core-mvc - Swagger - TypeLoadException:无法从程序集“Swashbuckle.AspNetCore.Swagger”加载类型“Swashbuckle.AspNetCore.Swagger.SecurityScheme”
- python - C ++ Boost :: Python Py_Initialize在object.c上抛出断言失败
- php - 在 nginx 服务器上响应请求
- r - 在 R 中过滤数据
- pyqt5 - 如何在 QtwebviewWidgets python 上播放 mp4 视频