Reactは初めてです。私はbuttonBar + tables50-50の比率で2つをウェブページ（上と下）に入れようとしています。ただし、ドラッグしてサイズを変更できるようにします。'buttonBar'と 'table'をコンポーネントとしてグループ化し、サイズ変更可能なようにするにはどうすればよいですかdiv。任意のライブラリを使用することができるか、によって行うことができるがあるhtmlとcss？これが私のコードです。ありがとう！
<div id='buttonBar1'>
<....lots button......>
</div>
<div id="table1" style={{marginRight:"auto", marginLeft:"inherit", width:"100vw", position:'relative', height:"50vh"}} >
<Table id={'Table_1'} />
</div>
<div id='buttonBar2'>
<....lots button......>
</div>
<div id="table2" style={{marginRight:"auto", marginLeft:"inherit", width:"auto", position:'relative', height:"40vh"}}>
<Table id={'Table_2'} />
</div>
これがあなたが試すことができる簡単な方法です。あなたtable+buttonBarをdivの中に入れれば、これらのdivは両方とも。の中に入れることができますcontainer。Reactを使用しているので、divのサイズを変更するためにreact-resizableライブラリを使用できます。例も確認してください。
<div className="container">
<Resizable axis="y" draggableOpts={resizeHandles: ['s']}>
<div className="group-one">
<div id='buttonBar1'>
<....lots button......>
</div>
<div id="table1" style={{marginRight:"auto", marginLeft:"inherit", width:"100vw",
position:'relative', height:"50vh"}} >
<Table id={'Table_1'} />
</div>
</div>
</Resizable>
<Resizable axis="y" draggableOpts={resizeHandles: ['n']}>
<div className="group-two">
<div id='buttonBar2'>
<....lots button......>
</div>
<div id="table2" style={{marginRight:"auto", marginLeft:"inherit", width:"auto",
position:'relative', height:"40vh"}}>
<Table id={'Table_2'} />
</div>
</Resizable>
</div>
</div>
ページ全体に広がり、50〜50の間隔をとるように、いくつかのスタイルを追加します
.container {
display: flex;
flex-direction: column;
}
.group-one, .group-two {
height: 50%;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加