Eingabefelder: Dropdown Editor

Zurück: Demo-Übersicht

Status: [Live] — widgets::dropdown() plus Overlay-Verhalten in scripts/formfields.js. Herkunft und ARIA-Vertrag der Zeile „Dropdown„ im Basis-Widget-Katalog (aria-haspopup/aria-expanded, Klasse .wk-dropdown). Referenz: DevExpress ASPxDropDownEdit (beliebiger Popup-Inhalt statt fester Optionsliste).

Gemeinsamer Feld-Kontrakt bereits verstanden.

Abgrenzung zu Combo Box: der Dropdown Editor unterscheidet sich von Combo Box dadurch, dass das Popup beliebiges HTML trägt (z. B. ein Mini-propertyGrid(), eine Farbpalette, ein Datumsbereich-Picker) statt einer reinen Text+Value-Liste — analog zu BaseDropdown/DropdownMenu im Widget-Katalog.

No-JS-Verhalten: ohne JavaScript rendert der Dropdown Editor als natives <details>/<summary>-Paar (dieselbe Grundtechnik wie widgets::tree()) — das Popup ist ein aufklappbarer Bereich im normalen Dokumentfluss, kein schwebendes Overlay. Mit JavaScript positioniert scripts/formfields.js das Popup stattdessen als Overlay über dem Feld und schließt es bei Klick außerhalb bzw. Escape.

echo $widgets->dropdown([
    'name'        => 'zeitraum',
    'label'       => 'Zeitraum',
    'summaryHtml' => hsc('Letzte 7 Tage'),
    'popupHtml'   => $widgets->propertyGrid($zeitraumFelder),
]);

Für beliebigen Popup-Inhalt (Formulare, Farbpaletten, Picker). Für eine feste Text+Value-Liste stattdessen Combo Box verwenden.

Methode dropdown(array $opts): string in helper_plugin_wkfluentui_widgets.

echo $widgets->dropdown([
    'name'        => 'filter',
    'label'       => 'Erweiterte Filter',
    'summaryHtml' => hsc('3 Filter aktiv'),
    'popupHtml'   => $widgets->propertyGrid($filterFelder),
    'closeOnSelect' => false,
]);

Keine über die Feature-Seiten hinaus.

Vollständiger Überblick: Accessibility.

Entfällt.

• Demo-Übersicht — alle Kategorien
• Eingabefelder: Combo Box — feste Text+Value-Liste statt freiem Popup-Inhalt
• FluentUI: Basis-Widget-Katalog — Tier-2-CSS-/ARIA-Vorstufe