Eingabefelder: Adaptivity

Zurück: Demo-Übersicht

Status: [Live] — gilt für alle acht Kategorien gemeinsam. Referenz: DevExpress ASPxEditors „Adaptive Layout„.

Gemeinsamer Feld-Kontrakt bereits verstanden.

Container-getrieben, wie beim DataGrid: dasselbe Prinzip wie DataGrid → Adaptivity — kein Feld kennt eigene Viewport-Breakpoints, alle folgen der Breite ihres Containers (Formular, Drawer, Auxbar).

echo $widgets->checkbox(['name' => 'aktiv', 'label' => 'Aktiv', 'stackBelow' => 360]);

Gilt für jedes Feld dieser Gruppe und für propertyGrid() — derselbe Mechanismus (scripts/adaptive.js), gesteuert über den stackBelow-Schlüssel des jeweiligen Bausteins.

Die Fluent-Formularmetrik (FluentUI: Admin-Bereich (vertieft)) positioniert Label und Control standardmäßig nebeneinander (wie bei propertyGrid()-Zeilen). Mit $opts['stackBelow'] (Pixel, per ResizeObserver am Container gemessen — nie am Viewport) kippt das Feld unterhalb dieser Breite auf Label über Control (is-stacked-Klasse).

Dieselbe Kippe bietet propertyGrid() über sein eigenes $opts['stackBelow'] — ein Mechanismus für beide Bausteine (data-wk-stack-below-Attribut + scripts/adaptive.js), hier geführt, weil Eingabefelder auch außerhalb eines propertyGrid() vorkommen.

echo $widgets->checkbox([
    'name'        => 'aktiv',
    'label'       => 'Zugriff aktiv',
    'stackBelow'  => 300,
]);

Keine über die Feature-Seiten hinaus.

Kein ARIA-Unterschied zwischen gekippter und nebeneinander liegender Label-Achse — reines Layout, keine Semantikänderung.

Entfällt.

• Demo-Übersicht — alle Kategorien
• DataGrid: Adaptivity — identisches Container-Prinzip beim DataGrid
• FluentUI: Vertical Grid (Property Grid) — Demo-Übersicht — Label/Control-Achse, die dieselbe Lücke teilt