Überlagerungen

Centered modal frame

Centered modal frame: Ein einfaches, zentriertes Modal, das vor einem abgedunkelten Hintergrund ausgeblendet und skaliert wird, mit Kopf-, Haupt- und Fußzeile, für alltägliche Formulare und Bestätigungen.

Jordan Vega

Saved 2 hours ago

Handle: @jordanv
Role: Editor
Team: Plate Studio

Press Escape or click outside to close.

Centered modal frame verwenden

Centered modal frame verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`title`	`text`	`Edit profile`	Bis zu 50 Zeichen
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`showCloseButton`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`width`	`number`	`420`	Von 320 bis 560; Schrittweite 10

Für welche Frameworks ist Centered modal frame verfügbar?

Centered modal frame ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Centered modal frame?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, radix-ui, clsx, tailwind-merge.

Welche Details zur Barrierefreiheit sind in Centered modal frame erkennbar?

Der React-Quellcode von Centered modal frame enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-hidden, aria-label). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Centered modal frame reduzierte Bewegung?

Centered modal frame liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: duration: reduced ? 0 : 0.14; duration: reduced ? 0 : 0.18; duration: reduced ? 0 : 0.2. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Confirm action modal von Fieldbook aus der Kategorie Überlagerungen.

2324Confirm action modalÜberlagerungenEin zentrierter Bestätigungsdialog, der sich über einem dunkler werdenden Hintergrund öffnet und den Besucher auffordert, eine destruktive Aktion zu bestätigen oder abzubrechen.

Standbild der UI-Komponente Perspective reveal dialog von Fieldbook aus der Kategorie Überlagerungen.

2204Perspective reveal dialogÜberlagerungenEin Allzweckdialog, dessen Bedienfeld von einer ausgewählten Kante in 3D nach innen geneigt und dann abgeflacht wird, um beliebigen Inhalt auf einer abgeblendeten Seite anzuzeigen.

Standbild der UI-Komponente Bounce warning dialog von Fieldbook aus der Kategorie Überlagerungen.

1923Bounce warning dialogÜberlagerungenEin Bestätigungsdialog erscheint mit einem federnden Überschwingen und einem springenden Symbolabzeichen und fordert eine Antwort auf, bevor die Seite unten wieder nutzbar ist.

Standbild der UI-Komponente Consequence confirm dialog von Fieldbook aus der Kategorie Überlagerungen.

1943Consequence confirm dialogÜberlagerungenEin Bestätigungsdialog, der von einem ausgewählten Rand aus angezeigt wird und die Seite blockiert, bis der Besucher den Vorgang ausdrücklich abbricht oder fortfährt.

Standbild der UI-Komponente Focus-Trapped Modal Kit von Fieldbook aus der Kategorie Überlagerungen.

2156Focus-Trapped Modal KitÜberlagerungenEin schlichtes modales Fundament, bei dem es vor allem um ein diszipliniertes Tastaturverhalten geht: Es fängt den Fokus beim Öffnen ein und stellt ihn beim Schließen präzise wieder her, verpackt in einer nach innen klappbaren Vorderseite.

Standbild der UI-Komponente Typed confirm dialog von Fieldbook aus der Kategorie Überlagerungen.

2073Typed confirm dialogÜberlagerungenEin Dialog mit zerstörerischen Aktionen, dessen Bestätigungsschaltfläche nur dann entsperrt wird, wenn jemand einen genau passenden Ausdruck eingibt, um versehentliches Klicken zu verhindern.