Udostępnij za pośrednictwem


Microsoft.Common.DropDown, element interfejsu użytkownika

Kontrolka wyboru z listą rozwijaną. Możesz zezwolić na wybór tylko jednego elementu lub wielu elementów. Opcjonalnie możesz również dołączyć opis do elementów.

Przykład interfejsu użytkownika

Element DropDown ma różne opcje, które określają jego wygląd w portalu.

Gdy tylko jeden element jest dozwolony do wyboru, kontrolka jest wyświetlana jako:

Zrzut ekranu przedstawiający element Interfejs użytkownika Microsoft.Common.DropDown z włączonym pojedynczym wyborem.

Gdy zostaną uwzględnione opisy, kontrolka będzie wyświetlana jako:

Zrzut ekranu przedstawiający element Interfejs użytkownika Microsoft.Common.DropDown z pojedynczym wyborem i opisami elementów.

Po włączeniu wielokrotnego zaznaczania kontrolka dodaje opcję Zaznacz wszystkie i pola wyboru umożliwiające wybranie więcej niż jednego elementu:

Zrzut ekranu przedstawiający element Interfejs użytkownika Microsoft.Common.DropDown z włączonym wyborem wielokrotnym, w tym opcję Zaznacz wszystko.

Opisy można uwzględnić w przypadku włączenia wielokrotnego wyboru.

Zrzut ekranu przedstawiający element interfejsu użytkownika Microsoft.Common.DropDown z włączonym zaznaczeniem wielokrotnym i opisami elementów.

Po włączeniu filtrowania kontrolka zawiera pole tekstowe służące do dodawania wartości filtrowania.

Zrzut ekranu przedstawiający element Interfejs użytkownika Microsoft.Common.DropDown z włączonym filtrowaniem i wielokrotnego wybierania.

Schemat

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

Przykładowe dane wyjściowe

"two"

Uwagi

  • Służy multiselect do określania, czy użytkownicy mogą wybrać więcej niż jeden element.
  • Domyślnie jest true to, selectAll gdy włączono wybór wielokrotny.
  • Właściwość filter umożliwia użytkownikom wyszukiwanie w ramach długiej listy opcji.
  • Etykieta elementu constraints.allowedValues to tekst wyświetlany dla elementu, a jego wartość jest wartością wyjściową elementu po wybraniu.
  • W przypadku określenia wartością domyślną musi być etykieta obecna w elemecie constraints.allowedValues. Jeśli nie zostanie określony, zostanie wybrany pierwszy element w constraints.allowedValues . Domyślna wartość to null.
  • constraints.allowedValues musi zawierać co najmniej jeden element.
  • Aby emulować wartość, która nie jest wymagana, dodaj element z etykietą i wartością "" (pusty ciąg) do constraints.allowedValueselementu .
  • Właściwość defaultDescription jest używana dla elementów, które nie mają opisu.
  • Właściwość placeholder jest tekstem pomocy, który zniknie po rozpoczęciu edycji przez użytkownika. placeholder Jeśli wartości i defaultValue są zdefiniowane, pierwszeństwo defaultValue ma wartość i jest wyświetlana.

Przykład

W poniższym przykładzie defaultValue element jest zdefiniowany przy użyciu wartości allowedValues zamiast etykiet. Wartość domyślna może zawierać wiele wartości po multiselect włączeniu.

Zrzut ekranu przedstawiający element interfejsu użytkownika Microsoft.Common.DropDown z włączonym zaznaczeniem wielokrotnym i wieloma wartościami domyślnymi.

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

Następne kroki