我将自适应卡与机器人框架 node.js SDK 一起使用。将这些自适应卡片发送给我的用户已经成功。现在我想更进一步:
在他们告诉您的网站上,您可以进一步自定义卡片的外观和感觉。现在我想知道这是如何工作的?如何调整这个 hostconfig 文件以更改颜色、填充、背景等。我如何使用 CSS 和 HTML 来构建卡片,就像他们在网站上所说的那样?
提前致谢
我将自适应卡与机器人框架 node.js SDK 一起使用。将这些自适应卡片发送给我的用户已经成功。现在我想更进一步:
在他们告诉您的网站上,您可以进一步自定义卡片的外观和感觉。现在我想知道这是如何工作的?如何调整这个 hostconfig 文件以更改颜色、填充、背景等。我如何使用 CSS 和 HTML 来构建卡片,就像他们在网站上所说的那样?
提前致谢
要调整 HostConfig,您可以调用AdaptiveCards.setHostConfig
并传递您的配置。一个例子:
AdaptiveCards.setHostConfig({
"supportsInteractivity": true,
"strongSeparation": {
"spacing": 10,
"lineThickness": 1,
"lineColor": "#EEEEEE"
},
"fontFamily": "Segoe UI",
"fontSizes": {
"small": 12,
"normal": 14,
"medium": 17,
"large": 21,
"extraLarge": 26
},
"fontWeights": {
"lighter": 200,
"normal": 400,
"bolder": 600
},
"colors": {
"dark": {
"normal": "#333333",
"subtle": "#EE333333"
},
"light": {
"normal": "#FFFFFF",
"subtle": "#88FFFFFF"
},
"accent": {
"normal": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"normal": "#5D60B3",
"subtle": "#DD5D60B3"
},
"good": {
"normal": "#00a000",
"subtle": "#DD00a000"
},
"warning": {
"normal": "#c00000",
"subtle": "#DDc00000"
}
},
"imageSizes": {
"small": 40,
"medium": 80,
"large": 160
},
"actions": {
"maxActions": 5,
"separation": {
"spacing": 10
},
"buttonSpacing": 20,
"stretch": false,
"showCard": {
"actionMode": "inlineEdgeToEdge",
"inlineCardSpacing": 16,
"backgroundColor": "#08000000",
"padding": {
"top": 16,
"right": 16,
"bottom": 16,
"left": 16
}
},
"actionsOrientation": "horizontal",
"actionAlignment": "left"
},
"adaptiveCard": {
"backgroundColor": "#fafafa",
"padding": {
"left": 10,
"top": 10,
"right": 10,
"bottom": 10
}
},
"container": {
"separation": {
"spacing": 10
},
"normal": {},
"emphasis": {
"backgroundColor": "#cccccc",
"borderColor": "#aaaaaa",
"borderThickness": {
"top": 1,
"right": 1,
"bottom": 1,
"left": 1
},
"padding": {
"top": 10,
"right": 10,
"bottom": 10,
"left": 10
}
}
},
"textBlock": {
"color": "dark",
"separations": {
"small": {
"spacing": 10
},
"normal": {
"spacing": 10
},
"medium": {
"spacing": 10
},
"large": {
"spacing": 10
},
"extraLarge": {
"spacing": 10
}
}
},
"image": {
"size": "medium",
"separation": {
"spacing": 10
}
},
"imageSet": {
"imageSize": "medium",
"separation": {
"spacing": 10
}
},
"factSet": {
"separation": {
"spacing": 10
},
"title": {
"color": "dark",
"size": "normal",
"isSubtle": false,
"weight": "bolder"
},
"value": {
"color": "dark",
"size": "normal",
"isSubtle": false,
"weight": "normal"
},
"spacing": 10
},
"input": {
"separation": {
"spacing": 10
}
},
"columnSet": {
"separation": {
"spacing": 10
}
},
"column": {
"separation": {
"spacing": 10
}
}
});
HostConfig 是关于接收卡的应用程序,它可以控制渲染的外观和感觉,因此它与主机应用程序 UX 匹配。
卡片的生产者可以使用“无”、“默认”或“强”来控制间距,但由接收者决定这意味着什么。
https://github.com/Microsoft/BotFramework-WebChat/blob/master/AdaptiveCards.md
从上面你可以看到
AdaptiveCards.setHostConfig( {YOUR JSON HERE} );