【发布时间】：2019-05-24 19:16:36
【问题描述】：
当自适应卡片在网络聊天客户端上呈现时，actin 按钮采用卡片的宽度。但是给自适应卡片设计师的例子他们没有采取全宽度？如何解决？
这是一个如何在网络聊天中呈现的示例：
但在 Adaptive Samples for Chat Bot 中给出的示例如下所示：
更新 1 ****************************************** *************************
我关注了这个问题https://github.com/microsoft/BotFramework-WebChat/issues/2034#issuecomment-501818238
但不知何故，当我尝试使用adaptiveCardHostConfig 应用时，它不会在卡上显示任何内容。这是我的代码：
const adaptiveCardHostConfig = {
spacing: {
small: 3,
'default': 8,
medium: 20,
large: 30,
extraLarge: 40,
padding: 10
},
separator: {
lineThickness: 1,
lineColor: '#EEEEEE'
},
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
}
}
},
containerStyles: {
'default': {
backgroundColor: '#FFFFFF',
foregroundColors: {
'default': {
'default': '#000000',
subtle: '#767676'
},
accent: {
'default': '#0063B1',
subtle: '#0063B1'
},
attention: {
'default': '#FF0000',
subtle: '#DDFF0000'
},
good: {
'default': '#54a254',
subtle: '#DD54a254'
},
warning: {
'default': '#c3ab23',
subtle: '#DDc3ab23'
}
}
},
emphasis: {
backgroundColor: '#F0F0F0',
foregroundColors: {
'default': {
'default': '#000000',
subtle: '#767676'
},
accent: {
'default': '#2E89FC',
subtle: '#882E89FC'
},
attention: {
'default': '#FF0000',
subtle: '#DDFF0000'
},
good: {
'default': '#54a254',
subtle: '#DD54a254'
},
warning: {
'default': '#c3ab23',
subtle: '#DDc3ab23'
}
}
},
accent: {
backgroundColor: '#C7DEF9',
foregroundColors: {
'default': {
'default': '#333333',
subtle: '#EE333333'
},
dark: {
'default': '#000000',
subtle: '#66000000'
},
light: {
'default': '#FFFFFF',
subtle: '#33000000'
},
accent: {
'default': '#2E89FC',
subtle: '#882E89FC'
},
attention: {
'default': '#cc3300',
subtle: '#DDcc3300'
},
good: {
'default': '#54a254',
subtle: '#DD54a254'
},
warning: {
'default': '#e69500',
subtle: '#DDe69500'
}
}
},
good: {
backgroundColor: '#CCFFCC',
foregroundColors: {
'default': {
'default': '#333333',
subtle: '#EE333333'
},
dark: {
'default': '#000000',
subtle: '#66000000'
},
light: {
'default': '#FFFFFF',
subtle: '#33000000'
},
accent: {
'default': '#2E89FC',
subtle: '#882E89FC'
},
attention: {
'default': '#cc3300',
subtle: '#DDcc3300'
},
good: {
'default': '#54a254',
subtle: '#DD54a254'
},
warning: {
'default': '#e69500',
subtle: '#DDe69500'
}
}
},
attention: {
backgroundColor: '#FFC5B2',
foregroundColors: {
'default': {
'default': '#333333',
subtle: '#EE333333'
},
dark: {
'default': '#000000',
subtle: '#66000000'
},
light: {
'default': '#FFFFFF',
subtle: '#33000000'
},
accent: {
'default': '#2E89FC',
subtle: '#882E89FC'
},
attention: {
'default': '#cc3300',
subtle: '#DDcc3300'
},
good: {
'default': '#54a254',
subtle: '#DD54a254'
},
warning: {
'default': '#e69500',
subtle: '#DDe69500'
}
}
},
warning: {
backgroundColor: '#FFE2B2',
foregroundColors: {
'default': {
'default': '#333333',
subtle: '#EE333333'
},
dark: {
'default': '#000000',
subtle: '#66000000'
},
light: {
'default': '#FFFFFF',
subtle: '#33000000'
},
accent: {
'default': '#2E89FC',
subtle: '#882E89FC'
},
attention: {
'default': '#cc3300',
subtle: '#DDcc3300'
},
good: {
'default': '#54a254',
subtle: '#DD54a254'
},
warning: {
'default': '#e69500',
subtle: '#DDe69500'
}
}
}
},
imageSizes: {
small: 40,
medium: 80,
large: 160
},
actions: {
maxActions: 100,
spacing: 'default',
buttonSpacing: 8,
showCard: {
actionMode: 'inline',
inlineTopMargin: 8
},
actionsOrientation: 'vertical',
actionAlignment: 'stretch'
},
adaptiveCard: {
allowCustomStyle: false
},
imageSet: {
imageSize: 'medium',
maxImageHeight: 100
},
factSet: {
title: {
color: 'default',
size: 'default',
isSubtle: false,
weight: 'bolder',
wrap: true,
maxWidth: 150
},
value: {
color: 'default',
size: 'default',
isSubtle: false,
weight: 'default',
wrap: true
},
spacing: 8
}
};
window.ReactDOM.render(
<ReactWebChat directLine={ window.WebChat.createDirectLine({ token: "xxxxx" })}
styleSet={ styleSet }
store={ store }
adaptiveCardHostConfig={ adaptiveCardHostConfig } />,
document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
它只是在聊天窗口中显示一个空白的自适应卡片：
【问题讨论】：
-
看看 GitHub 上的这个issue。
-
更改您的网络聊天实现并以这种方式控制视觉行为。
-
自适应卡主机配置应该是可定制的。为此，我在 GitHub 存储库上提交了一个问题：github.com/microsoft/BotFramework-WebChat/issues/2034
-
@tdurnford：在阅读了您在 Github 中的评论后，我更新了我的问题陈述，但不知何故它在与 ReactWebChat 一起使用时不起作用。
-
@Dadwals 感谢您提供的信息，这将在网络聊天的下一版本中修复
标签： botframework adaptive-cards