css - 如何在自适应卡片上使用 CSS 样式?
问题描述
我正在尝试使用 CSS 在更细粒度的级别上设置自适应卡片的样式,但是默认 CSS 类的相似名称使得定位单个元素变得困难。
我试图尝试使用特定参数来定位它,但它们最终仍然在某种程度上违反了规则。我在自适应卡片构建过程中尝试过使用唯一 ID 或唯一CSSSelectors,但似乎在它进入前端时它们都被剥离了。
以下是我迄今为止尝试过的一些示例。
li div .content .attachment .attachment div .ac-container:not(:first-child) .ac-columnSet:hover{
background: #e6eaed;
color: #323232;
}
li div .content .attachment .attachment div .ac-container:not(:first-child) .ac-columnSet:hover .ac-container .ac-textBlock p{
color: #323232;
}```
解决方案
首先,我想提一下,此功能已经是 BotFramework-WebChat 存储库中正在处理的功能请求。我不知道这方面的预计到达时间,所以不要计划很快。但是,一定要留意。
这可以通过一点黑客攻击来实现。简而言之,这些是您的步骤:
- 在您的自适应卡中创建一个“触发器”属性并为其分配一个唯一值。
- 创建一个
activityMiddleware
查找触发器值的。收到后,通过附加一个id
. id
将纯 CSS 添加到您的 html 中,根据步骤 2 中的附件设置卡片样式。- 将
activityMiddleware
对象添加到直线。
希望有帮助!
这是示例代码:
mainDialog.js - 从我的机器人发送的自适应卡片
async basicAdaptiveCard ( stepContext ) {
const card = {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"trigger": "ServiceCardTrigger",
"body": [
{
"type": "TextBlock",
"text": "Hi!! How can I help you today?",
"weight": "Bolder",
"size": "Medium"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Placeholder Message",
"data": "close"
}
]
}
const ac_card = CardFactory.adaptiveCard( card );
await stepContext.context.sendActivity(
{
attachments: [ ac_card ]
}
);
return { status: DialogTurnStatus.waiting };
}
index.html - 仅显示基本位。在此,我通过一个包含“服务详细信息”值的按钮进行跟踪。它很简单,但适用于演示。根据需要更新。
<style>
#ServiceCard {
background-color: #e6eaed;
color: #323232;
}
#ServiceCard:hover p {
color: red
}
</style>
[...]
<script type="text/babel">
[...]
const activityMiddleware = () => next => card => {
const { activity: { from, type, attachments } } = card;
if (type === 'message' && from.role === 'bot') {
if(attachments && attachments[0].content.trigger === 'ServiceCardTrigger') {
let children = document.getElementsByClassName('ac-adaptiveCard');
for (let i = 0, j = children.length; i <= j; i++) {
if(i === j - 1) {
let child = children[i];
if(child.lastChild.innerHTML.includes('Service details')) {
child.id = 'ServiceCard';
}
}
};
}
}
else {
return next(card)
}
}
[...]
window.ReactDOM.render(
<ReactWebChat
activityMiddleware={ activityMiddleware }
directLine={ directLine }
username={'johndoe'}
/>,
document.getElementById( 'webchat' )
);
[...]
</script>
推荐阅读
- react-native - 有谁知道如何将 ProfileScreen 图像与抽屉导航图像匹配?反应原生
- swift - Swift 打开地图应用程序显示特定地址引脚(分支)?
- rest - 将 HATEOAS 用于 RPC 样式的命令是否 RESTful
- node.js - 托管在 heroku 上的节点应用程序崩溃错误代码 H10
- google-analytics - 更改域后保留 Google 客户 ID
- rocket-chip - RISCV DCache.scala 状态机和工作流程
- php - Symfony 4 CollectionType 约束 - 字符串数组
- powershell - 使用 PowerShell 授予对“IIS AppPool”文件夹的访问权限
- reactjs - React-Redux 时钟不会更新它在 DOM 中的状态
- python - 如何开始使用线性编程和 Python?