react paneless
1.0.0
ReactJS アプリに含めることができる最小限のウィンドウ マネージャー。
より大きなアプリで使用するパネルレスを開発しています。複数のウィンドウを重ねて表示できるようにしたい。それぞれの「ウィンドウ」はフレームと呼ばれます。これは、5 つのペインを持つアプリの 1 つのフレームのスクリーンショットです。
すべてのアプリのコンテンツはペインにレンダリングされます。
フレームはサムネイル サイズまで最小化できます。
フレームのヘッダー (別名タイトル バー) とフッター (別名ステータス バー) が非表示になる場合があります。ヘッダーが非表示になっている場合でも、上枠の周りにマウスを置くことでフレームを移動できます。
ペインはフレーム内にレンダリングされます。
各ペインは、単一のフレームに複数のペインの任意のレイアウトを含めることができるように分割できます。
タブ付きペインはこのライブラリによって実装されます。
このライブラリは、永続的なレイアウトをサポートします。
青い線は、ユーザーがフォーカスしているフレーム/ペインを示します。 Alt-f キーと Alt-p キーを使用して、フレームとペイン間を移動できます。 Alt-B を押すと、フォーカスされたペインのメニューがアクティブになります。もう一度 Alt-b を押すと、関連するフレームのメニューがアクティブになります。矢印キーを使用してメニュー項目を移動し、Escape (または外側の任意の場所をクリック) でメニューを閉じます。
フォーカスされたペインを示す青い輪郭は数秒間だけ表示され、その後、そのペイン内のアプリのコンテンツが見えにくくならないように消えます。
マウスを右下隅付近に移動すると、フレームのサイズが調整されます。
開発初期。今のところChromeでのみ試しています。
このリポジトリにはサンプル アプリが含まれています。以下の画像はサンプルアプリの機能を示したものです。
paneless は、 app-headerとapp-footerを持つapp-frameでフレーム (通常および最小化) をレンダリングすることにも言及する必要があると思います。
ペインの上部にマウスを置くと、ペインのボタン バーが表示されます。
このリポジトリのクローンをマシン上のディレクトリに作成します。次に、サンプル アプリを試してみましょう。
または、それを含めたいアプリがすでにある場合は、次のようにします。
npm install <paneless-directory>
<paneless-directory> は、このリポジトリのクローンを作成したディレクトリです。
サンプルアプリを参照してください。
MIT © ブラッド・デュナガン
