Sdílet prostřednictvím


Microsoft.Common.DropDown UI – element

Ovládací prvek výběru s rozevíracím seznamem Můžete povolit výběr pouze jedné položky nebo více položek. Volitelně můžete do položek zahrnout také popis.

Ukázka uživatelského rozhraní

Prvek DropDown má různé možnosti, které určují jeho vzhled na portálu.

Pokud je pro výběr povolena pouze jedna položka, ovládací prvek se zobrazí takto:

Snímek obrazovky s elementem uživatelského rozhraní Microsoft.Common.DropDown s povoleným jedním výběrem

Pokud jsou zahrnuty popisy, ovládací prvek se zobrazí takto:

Snímek obrazovky s elementem uživatelského rozhraní Microsoft.Common.DropDown s jedním výběrem a popisy položek

Pokud je povoleno vícenásobný výběr, ovládací prvek přidá možnost Vybrat vše a zaškrtávací políčka pro výběr více než jedné položky:

Snímek obrazovky s prvkem uživatelského rozhraní Microsoft.Common.DropDown s povoleným vícenásobným výběrem, včetně možnosti Vybrat vše

Popisy lze zahrnout s povoleným vícenásobným výběrem.

Snímek obrazovky s prvkem uživatelského rozhraní Microsoft.Common.DropDown s povoleným vícenásobným výběrem a popisy položek

Pokud je filtrování povolené, ovládací prvek obsahuje textové pole pro přidání hodnoty filtrování.

Snímek obrazovky s elementem uživatelského rozhraní Microsoft.Common.DropDown s povoleným vícenásobným výběrem a filtrováním

Schéma

{
  "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
}

Ukázkový výstup

"two"

Poznámky

  • Slouží multiselect k určení, zda mohou uživatelé vybrat více než jednu položku.
  • Ve výchozím nastavení selectAll je true povoleno vícenásobný výběr.
  • Tato filter vlastnost umožňuje uživatelům hledat v dlouhém seznamu možností.
  • Popisek constraints.allowedValues je zobrazovaný text položky a jeho hodnota je výstupní hodnota prvku při výběru.
  • Pokud je zadána, musí být výchozí hodnota popiskem, který je v constraints.allowedValuessouboru . Pokud není zadána, je vybrána první položka.constraints.allowedValues Výchozí hodnota je null.
  • constraints.allowedValues musí mít aspoň jednu položku.
  • Chcete-li emulovat hodnotu, která není požadována, přidejte položku s popiskem a hodnotou "" (prázdný řetězec) do constraints.allowedValues.
  • Vlastnost defaultDescription se používá pro položky, které nemají popis.
  • Vlastnost placeholder je text nápovědy, který zmizí, když uživatel začne upravovat. Pokud jsou definovány placeholder a defaultValue obě jsou definovány, defaultValue má přednost a zobrazí se.

Příklad

V následujícím příkladu defaultValue je definován pomocí hodnot allowedValues namísto popisků. Výchozí hodnota může obsahovat více hodnot, pokud multiselect je povolená.

Snímek obrazovky s prvkem uživatelského rozhraní Microsoft.Common.DropDown s povoleným vícenásobným výběrem a několika výchozími hodnotami

{
  "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
}

Další kroky