Theorie

Die Modal-Komponente wird verwendet, um Inhalte und interaktive Elemente über den Rest des Anwendungsinhalts zu präsentieren. Sie erscheint typischerweise als Popup-Dialog oder Overlay über dem Hauptinhalt und unterbricht vorübergehend den Arbeitsablauf des Benutzers.

Warum brauchen wir es?

1. Inhaltspräsentation:

   • Bietet eine Möglichkeit, zusätzliche Inhalte oder Funktionen anzuzeigen, ohne den aktuellen Bildschirm zu verlassen;

   • Nützlich für die Präsentation von Dialogen, Warnungen, Benachrichtigungen oder jeglichen Inhalten, die Benutzerinteraktion oder Aufmerksamkeit erfordern.

2. Aufmerksamkeit fokussieren:

   • Kann verwendet werden, um die Aufmerksamkeit auf bestimmte Informationen, Aktionen oder Aufforderungen zu lenken;

   • Ermöglicht es Ihnen, den Fokus des Benutzers zu steuern und ihn durch den Arbeitsablauf der Anwendung zu führen.

3. Kontextuelle Interaktion:

   • Ermöglicht kontextuelle Interaktionen, indem verwandte Inhalte oder Optionen basierend auf Benutzeraktionen oder dem Anwendungszustand präsentiert werden.

Wie man mit Modal arbeitet

• Die Modal-Komponente wird über ihre Props und den Zustand gesteuert;

• Wir können die Sichtbarkeit des Modals umschalten, indem wir seine sichtbare Prop auf true oder false setzen;

• Verwenden Sie die onRequestClose -Prop, um eine Funktion anzugeben, die aufgerufen wird, wenn der Benutzer versucht, das Modal zu schließen.

Beispiel

Ergebnis

In der Praxis