react spaces
Allow styles to target inner and outer space elements
理解しやすくネスト可能なレイアウトシステムであるReact Spaceを使用すると、ページまたはコンテナを固定されたスクロール可能で再サイズのスペースに分割して、ブラウザにデスクトップ/モバイルタイプのユーザーインターフェイスを構築できます。
視覚的なUIコンポーネントのライブラリではなく、スペースは、ポートのサイズを表示するためにきちんと応答するUIをレイアウトするための再利用可能な基礎ブロックであることを目的としています。
バージョン0.2.0リリース - ここでリリースノートを読む。
ここで完全なドキュメントをご覧ください。
他のすべてのスペースの上位レベルで使用されます。
<viewport />
このスペースは、ブラウザウィンドウの完全なビューポートを引き継ぎます。ブラウザウィンドウのサイズを変更すると、このスペースとネストされたすべてのスペースのサイズが自動的に調整されます。
<固定 />
このスペースには、高さとオプションで幅を与えることができます（デフォルトでは、コンテナの100％にサイズになります）。すべてのネストされたスペースは、この固定サイズのスペースに含まれます。
これらは、トップレベルのスペース<viewport />および<sixed />内で使用したり、他のスペース内にネストすることができます。
<左 />および<右 />
親コンテナ/スペースの左または右に固定されたスペース。サイズは、ピクセルで、またはその幅を決定するパーセンテージで指定できます。
<top />および<bottom />
親コンテナ/スペースの上部または下部に固定されたスペース。サイズは、ピクセルで、またはその高さを決定するためのパーセンテージで指定できます。
これらのコンポーネントには、 <leftresizable /> 、 <rightresizable /> 、 <topResizable /> 、および<bottomSizable />と呼ばれるこれらのコンポーネントには、マウスでドラッグして外側のエッジからサイズを変更できます。
<fill />
親コンテナ/スペースに残っている利用可能な領域を消費するスペースは、あらゆる側面の固定スペースを考慮しています。
<位置付け />
上部、左、幅、高さ、または上部、左、右、下部のいずれかで、親スペース内に絶対に配置できるスペース。
<レイヤー />
レイヤーを使用すると、親スペース内にレイヤーを作成できます。たとえば、
< ViewPort >
< Layer zIndex =" {0} " > < LeftResizable size =" 20% " /> // floating sidebar </ Layer >
< Layer zIndex =" {1} " >
< Fill />
</ Layer >
</ ViewPort ><中心 />
空間の内容を水平および垂直に中心にします。
<中心的に />
垂直にスペースの内容を中心にします。
あなたが必要とする反応スペースを始めるには：
npm install react - spaces -- save import * as Spaces from "react-spaces" ;ここで完全なドキュメントをご覧ください。
このライブラリが便利だと思う場合は、コーヒーを1杯のコーヒーに資金を提供するために少量の寄付をすることを検討してください。
