时间戳

首页 > 解决方案 > 自适应卡片背景图像 NodeJS

botframework - 自适应卡片背景图像 NodeJS

问题描述

我正在使用 Bot Framework 在团队频道上呈现自适应卡片。它可以很好地渲染卡片，但桌面客户端和移动客户端的背景图像不同。第一个图像显示在桌面客户端上的渲染，第二个图像用于移动客户端。

https://i.stack.imgur.com/mKl1z.png

https://i.stack.imgur.com/HAumI.jpg

有没有办法可以改变它在手机上的呈现方式？或者将 CSS 添加到自适应卡片中？

这是我用来构建卡片的 JSON：

{  
   $schema:"http://adaptivecards.io/schemas/adaptive-card.json",
   type:"AdaptiveCard",
   version:"1.0",
   backgroundImage:"https://www.totalmortgage.com/images/claimed-blue.jpg",
   backgroundImageMode:"stretch",
   body:[  
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "size":"Large",
                     "weight":"bolder",
                     "text":"Application Offer",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            },

         ]
      },
      {  
         "type":"TextBlock",
         "size":"medium",
         "text":"**New Lead has arrived:**",
         "wrap":true,
         "maxLines":0
      },
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**First Name** : ",
                     "wrap":true,
                     "maxLines":0,
                     "seperator":true
                  },
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**Last Name** : ",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            },

         ]
      },
      {  
         "type":"TextBlock",
         "spacing":"small",
         "size":"default",
         "text":"**Property State** : "+sfdata['property_state'],
         "wrap":true,
         "maxLines":0
      }
   ]
};

标签： botframeworkmicrosoft-teamsadaptive-cards

解决方案

使用版本 1.1

{  
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.1",
   "backgroundImage": {
       "url": "https://www.totalmortgage.com/images/claimed-blue.jpg",
        "fillMode": "repeat",
        "horizontalAlignment": "left",
        "VerticalAlignment ": "center"
   },
   "body":[  
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "size":"Large",
                     "weight":"bolder",
                     "text":"Application Offer",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            }
         ]
      },
      {  
         "type":"TextBlock",
         "size":"medium",
         "text":"**New Lead has arrived:**",
         "wrap":true,
         "maxLines":0
      },
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**First Name** : ",
                     "wrap":true,
                     "maxLines":0,
                     "seperator":true
                  },
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**Last Name** : ",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            }
         ]
      },
      {  
         "type":"TextBlock",
         "spacing":"small",
         "size":"default",
         "text":"**Property State** : ",
         "wrap":true,
         "maxLines":0
      }
   ]
}

在此处检查问题： https ://github.com/Microsoft/AdaptiveCards/issues/477

PS：您的 JSON 卡有一些无效代码。始终检查Visualizer！

推荐阅读