Адаптивные карты фоновое изображение NodeJS - PullRequest
Новая
       9

Адаптивные карты фоновое изображение NodeJS

0 голосов
/ 20 марта 2019

Я отображаю адаптивную карту на канале команд, используя 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
      }
   ]
};

1 Ответ

0 голосов
/ 11 июля 2019

Используйте версию 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 есть недопустимые коды.Всегда проверяйте в Визуализатор !

...