Question

我需要在自适应卡中水平显示提交按钮。有办法吗？

我尝试使用“ columnset”进行相同操作，但没有运气

{"type": "ColumnSet",
      "columns":[{
          "type":"Column",
          "width":"auto",
          "items":[{
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Yes",
                    "data": {
                        "feedback" : "Yes"
                        }

                }]}]},
                 {"type":"Column",
          "width":"auto",
                 "items":[{
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Yes",
                    "data": {
                        "feedback" : "Yes"
                        }

                }
            ]
       }] }
  ]
  }

Answer 1

Web聊天用于呈现卡片的AdaptiveCard npm程序包使用主机配置来定义卡片的样式。 Web Chat提供了自己的主机配置，该主机配置将actionsOrientation值设置为“垂直”，但是您可以通过创建自己的主机配置并将actionsOrientation值设置为“ horizontal”来更改此行为。不幸的是，要保持Web Chat的卡样式的其余部分，您现在必须传递整个主机配置，但是GitHub上目前有一个issue打开可解决此问题。

自定义主机配置

const adaptiveCardHostConfig = {
  "hostCapabilities": {
    "capabilities": null
  },
  "choiceSetInputValueSeparator": ",",
  "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
      }
    }
  },
  "spacing": {
    "small": 3,
    "default": 8,
    "medium": 20,
    "large": 30,
    "extraLarge": 40,
    "padding": 10
  },
  "separator": {
    "lineThickness": 1,
    "lineColor": "#EEEEEE"
  },
  "imageSizes": {
    "small": 40,
    "medium": 80,
    "large": 160
  },
  "containerStyles": {
    "default": {
      "foregroundColors": {
        "default": {
          "default": "#000000",
          "subtle": "#767676",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "light": {
          "default": "#FFFFFF",
          "subtle": "#33000000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "accent": {
          "default": "#0063B1",
          "subtle": "#0063B1",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "warning": {
          "default": "#c3ab23",
          "subtle": "#DDc3ab23",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "attention": {
          "default": "#FF0000",
          "subtle": "#DDFF0000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        }
      },
      "backgroundColor": "#FFFFFF"
    },
    "emphasis": {
      "foregroundColors": {
        "default": {
          "default": "#000000",
          "subtle": "#767676",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "light": {
          "default": "#FFFFFF",
          "subtle": "#33000000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "accent": {
          "default": "#2E89FC",
          "subtle": "#882E89FC",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "warning": {
          "default": "#c3ab23",
          "subtle": "#DDc3ab23",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "attention": {
          "default": "#FF0000",
          "subtle": "#DDFF0000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        }
      },
      "backgroundColor": "#F0F0F0"
    }
  },
  "actions": {
    "maxActions": 100,
    "spacing": "Default",
    "buttonSpacing": 8,
    "showCard": {
      "actionMode": "Inline",
      "inlineTopMargin": 8,
      "style": "emphasis"
    },
    "preExpandSingleShowCardAction": false,
    "actionsOrientation": "horizontal",
    "actionAlignment": "Stretch",
    "wrap": true
  },
  "adaptiveCard": {
    "allowCustomStyle": false
  },
  "imageSet": {
    "maxImageHeight": 100
  },
  "media": {
    "allowInlinePlayback": true
  },
  "factSet": {
    "title": {
      "size": "Default",
      "color": "Default",
      "isSubtle": false,
      "weight": "Bolder",
      "wrap": true
    },
    "value": {
      "size": "Default",
      "color": "Default",
      "isSubtle": false,
      "weight": "Default",
      "wrap": true
    },
    "spacing": 8
  },
  "cssClassNamePrefix": null,
  "_legacyFontType": {
    "fontFamily": "Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif",
    "fontSizes": {
      "small": 12,
      "default": 14,
      "medium": 17,
      "large": 21,
      "extraLarge": 26
    },
    "fontWeights": {
      "lighter": 200,
      "default": 400,
      "bolder": 600
    }
  }
};

网络聊天

renderWebChat({
  adaptiveCardHostConfig,
  directLine
}, document.getElementById('webchat'));

屏幕截图

有关更多详细信息，请查阅AdaptiveCard的文档host configs。

希望这会有所帮助！

有没有办法在自适应卡中水平显示按钮？

1 个答案: