Microsoft.Common.DropDown UI 元素

一个包含下拉列表的选择控件。 可以允许选择一个项(单选)或多个项(多选)。 还可以选择在项中包含说明。

UI 示例

DropDown 元素提供了不同的选项,用于决定它在门户中的视觉效果。

当只允许选择单个项时,控件将显示为:

Microsoft.Common.DropDown UI 元素的屏幕截图,其中启用了单选。

当包含说明时,控件将显示为:

Microsoft.Common.DropDown UI 元素的屏幕截图,其中包含单选和项目说明。

启用多选时,控件将添加“全选”选项和用于选择多个项目的复选框:

Microsoft.Common.DropDown UI 元素的屏幕截图,其中启用了多选,包括“全选”选项。

启用多选时可以包含说明。

Microsoft.Common.DropDown UI 元素的屏幕截图,其中启用了多选并包含项目说明。

启用筛选后,控件包含用于添加筛选值的文本框。

Microsoft.Common.DropDown UI 元素的屏幕截图,其中启用了多选和筛选。

架构

{
  "name": "element1",
  "type": "Microsoft.Common.DropDown",
  "label": "Example drop down",
  "placeholder": "",
  "defaultValue": ["Value two"],
  "toolTip": "",
  "multiselect": true,
  "selectAll": true,
  "filter": true,
  "filterPlaceholder": "Filter items ...",
  "multiLine": true,
  "defaultDescription": "A value for selection",
  "constraints": {
    "allowedValues": [
      {
        "label": "Value one",
        "description": "The value to select for option 1.",
        "value": "one"
      },
      {
        "label": "Value two",
        "description": "The value to select for option 2.",
        "value": "two"
      }
    ],
    "required": true
  },
  "visible": true
}

示例输出

"two"

备注

  • 使用 multiselect 指定用户是否可以选择多个项。
  • 默认情况下,启用多选时,selectAlltrue
  • 通过 filter 属性,用户能够在众多选项中进行搜索。
  • constraints.allowedValues 的标签是项的显示文本,并且当选中时,其值是元素的输出值。
  • 如果已指定,则默认值必须是 constraints.allowedValues 中存在的一个标签。 如果未指定,则将选择 constraints.allowedValues 中的第一个项。 默认值为 null
  • constraints.allowedValues 必须至少有一项。
  • 若要模拟一个不需要的值,请向 constraints.allowedValues 添加一个具有标签且值为 ""(空字符串)的项。
  • defaultDescription 属性用于不带说明的项。
  • placeholder 属性是帮助文本,当用户开始编辑后会消失。 如果同时定义了 placeholderdefaultValue,会优先显示 defaultValue

示例

在下面的示例中,defaultValue 是使用 allowedValues 的值而非使用标签定义的。 启用了 multiselect 时,默认值可以包含多个值。

Microsoft.Common.DropDown UI 元素的屏幕截图,其中启用了多选并包含多个默认值。

{
  "name": "element1",
  "type": "Microsoft.Common.DropDown",
  "label": "Example drop down",
  "placeholder": "",
  "defaultValue": [{"value": "one"}, {"value": "two"}],
  "toolTip": "Multiple values can be selected",
  "multiselect": true,
  "selectAll": true,
  "filter": true,
  "filterPlaceholder": "Filter items ...",
  "multiLine": true,
  "defaultDescription": "A value for selection",
  "constraints": {
    "allowedValues": [
      {
        "label": "Value one",
        "description": "The value to select for option 1.",
        "value": "one"
      },
      {
        "label": "Value two",
        "description": "The value to select for option 2.",
        "value": "two"
      }
    ],
    "required": true
  },
  "visible": true
}

后续步骤