ホームページ >ウェブフロントエンド >jsチュートリアル >Jira からインスピレーションを得て、React で折りたたみ可能なサイド コンテンツを構築する方法

Jira からインスピレーションを得て、React で折りたたみ可能なサイド コンテンツを構築する方法

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-20 12:03:09933ブラウズ

新しいレコードを作成するためのフォームや既存のレコードを編集するためのフォームなど、ユーザーが必要とする追加コンテンツを表示する方法に関する複数のオプションがあります。 UI/UX のベスト プラクティスは、ユーザーが本当に必要とする場合を除き、不必要なオプションで画面を乱雑にしないことです。
そのため、モーダルやドロワーなど、ユーザーに表示できるさまざまな種類のダイアログが存在します。 
モーダルの欠点の 1 つは、コンテンツが隠されてしまうことです。これらは、ユーザーが既存のレコードを編集する場合ではなく、新しいレコードを作成する場合には最適です。
Jira を使用したことがある場合は、おそらくバックログ セクションにある独自の折りたたみ可能なコンテンツ パネルに気づいたでしょう。彼らはどうやってそれをしたのでしょうか? 
私が話している内容は次のとおりです:

How to Build a Collapsible Side Content in React, Inspired by Jira

React の Ant Design の Layout コンポーネントと Sider コンポーネントを使用して同じ動作を実現しました。これがサンドボックスです:

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

React と Ant Design 以外のものを使用している場合。ここに問題があります。これは、折りたたみ幅が 0 の右側のサイドバーにすぎません。

BR

アーメド

以上がJira からインスピレーションを得て、React で折りたたみ可能なサイド コンテンツを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。