Question

我正在使用自适应卡和bot框架node.js SDK。将这些自适应卡发送给我的用户已经成功了。现在我想进一步：

在site上，他们告诉您可以进一步自定义卡的外观。现在我想知道这是如何工作的？如何调整此hostconfig文件以更改颜色，填充，背景等。如何使用CSS和HTML来构建卡片，就像他们在网站上说的那样？

提前致谢

Answer 1

要调整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
        }
    }
});

Answer 2

HostConfig是关于接收卡的应用程序，该卡可以控制渲染的外观和感觉，因此它与主机应用程序UX相匹配。

卡片的制作者可以使用＆＃34; none＆＃34;，＆＃34;默认＆＃34;或者＆＃34;强大的＆＃34;，但接收者决定这意味着什么。

Answer 3

https://github.com/Microsoft/BotFramework-WebChat/blob/master/AdaptiveCards.md

从上面你可以看到

      AdaptiveCards.setHostConfig( {YOUR JSON HERE} );

HostConfig用于机器人框架中的自适应卡

3 个答案: