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