botframework - 在 Microsoft BotFramework 的自适应卡片中定义 Tab 键顺序

Question

tl;dr：我们如何定义自适应卡片输入元素的 Tab 键顺序？

你好呀，

我们在网络聊天项目中使用自适应卡片以及 MS Bot Framework V4。例如，我们有一张卡，您可以在其中输入您的地址。我们有两列以 2x2 的方式并排显示输入字段：

街道 | 数字

邮编 | 城市

这就是我们的客户通常会读到的方式——从左到右，一排的东西是在一起的。但是当我们使用列时，自适应卡的选项卡顺序是“错误的”：它在列中进行选项卡，然后转到右列，并从上到下从那里通过选项卡。

有没有办法定义标签顺序或者有人知道如何保持自适应卡的“布局”但最终得到正确的标签顺序？

此致

标签： botframeworkadaptive-cards

Answer 1

解决方案比我想象的要容易得多：我必须将列集的每一行分成几个列集，每个列集都在自己的容器中。然后标签顺序从左到右然后从上到下正确。

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "**Address**",
      "size": "Large",
      "height": "stretch"

    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "street*",
                  "spacing": "Large",
                  "height": "stretch",
                  "weight": "Bolder"

                },
                {
                  "type": "Input.Text",
                  "placeholder": "Street",
                  "id": "street",
                  "value": "{street}"

                }

              ]

            },
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Number*",
                  "spacing": "Large",
                  "weight": "Bolder"

                },
                {
                  "type": "Input.Text",
                  "placeholder": "Number",
                  "id": "number",
                  "value": "{number}"

                }

              ]

            }

          ]

        }

      ]

    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Zip*",
                  "spacing": "Medium",
                  "weight": "Bolder"

                },
                {
                  "type": "Input.Text",
                  "placeholder": "Zip",
                  "id": "zip",
                  "value": "{zip}"

                }

              ],
              "spacing": "None",
              "height": "stretch",
              "horizontalAlignment": "Center"

            },
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "City*",
                  "spacing": "Medium",
                  "weight": "Bolder"

                },
                {
                  "type": "Input.Text",
                  "placeholder": "City",
                  "id": "city",
                  "value": "{city}"

                }

              ],
              "horizontalAlignment": "Center",
              "height": "stretch"

            }

          ]

        }

      ]

    }

  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Send"

    }

  ]
}