So erstellen Sie einen zusammenklappbaren Seiteninhalt in React, inspiriert von Jira

Es gibt mehrere Möglichkeiten, zusätzliche Inhalte anzuzeigen, die Ihr Benutzer benötigt, z. B. Formulare zum Erstellen neuer Datensätze oder zum Bearbeiten vorhandener Datensätze. Best Practices für UI/UX bestehen darin, den Bildschirm nicht mit unnötigen Optionen zu überladen, es sei denn, der Benutzer benötigt sie wirklich.
Aus diesem Grund gibt es verschiedene Arten von Dialogen, die Sie Ihrem Benutzer anzeigen können, z. B. Modaldialoge, Schubladen usw. 
Ein Nachteil von Modals besteht darin, dass sie Inhalte verbergen. Sie eignen sich hervorragend, wenn Benutzer neue Datensätze erstellen möchten, aber nicht, wenn sie vorhandene Datensätze bearbeiten möchten.
Wenn Sie Jira jemals verwendet haben, ist Ihnen wahrscheinlich das einzigartige zusammenklappbare Inhaltsfenster im Backlog-Bereich aufgefallen. Wie haben sie es gemacht? 
Hier ist, wovon ich spreche: 

Das gleiche Verhalten habe ich mit den Layout- und Sider-Komponenten von Ant Design in React erreicht; Hier ist die Sandbox:

https://codesandbox.io/p/sandbox/responsive-persistent-modal-97s3fd

Wenn Sie etwas anderes als React & Ant Design verwenden. Hier ist der Haken: Es handelt sich lediglich um eine Seitenleiste auf der rechten Seite mit einer Minimierungsbreite von 0.

BR

Ahmed.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen zusammenklappbaren Seiteninhalt in React, inspiriert von Jira. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!