ホームページ >ウェブフロントエンド >jsチュートリアル >Jira からインスピレーションを得て、React で折りたたみ可能なサイド コンテンツを構築する方法
新しいレコードを作成するためのフォームや既存のレコードを編集するためのフォームなど、ユーザーが必要とする追加コンテンツを表示する方法に関する複数のオプションがあります。 UI/UX のベスト プラクティスは、ユーザーが本当に必要とする場合を除き、不必要なオプションで画面を乱雑にしないことです。
そのため、モーダルやドロワーなど、ユーザーに表示できるさまざまな種類のダイアログが存在します。
モーダルの欠点の 1 つは、コンテンツが隠されてしまうことです。これらは、ユーザーが既存のレコードを編集する場合ではなく、新しいレコードを作成する場合には最適です。
Jira を使用したことがある場合は、おそらくバックログ セクションにある独自の折りたたみ可能なコンテンツ パネルに気づいたでしょう。彼らはどうやってそれをしたのでしょうか?
私が話している内容は次のとおりです:
React の Ant Design の Layout コンポーネントと Sider コンポーネントを使用して同じ動作を実現しました。これがサンドボックスです:
https://codesandbox.io/p/sandbox/Response-persistent-modal-97s3fd
React と Ant Design 以外のものを使用している場合。ここに問題があります。これは、折りたたみ幅が 0 の右側のサイドバーにすぎません。
BR
アーメド
以上がJira からインスピレーションを得て、React で折りたたみ可能なサイド コンテンツを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。