react-grid-layout

ui-component grid layout

React-grid-layoutはReactのためのドラッグ可能でサイズ変更可能なグリッドレイアウトライブラリです。レスポンシブブレークポイントをサポートしており、異なる画面サイズに適切にコンテンツを適応させることができます。

Latest Ver 1.5.1

Homepage

Github

21,161

📢 React-grid-layoutはユーザーがドラッグやサイズ変更が可能なレスポンシブグリッドレイアウトを提供します。

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/react-grid-layout.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/css/styles.css

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/css/styles.min.css

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/react-grid-layout.min.js.map

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

⚙️ JavaScript
{\"code\": \"import GridLayout from 'react-grid-layout';\nconst MyFirstGrid = () => {\n return (\n <GridLayout className='layout' cols={12} rowHeight={30} width={1200}>\n <div key='1'>Block 1</div>\n <div key='2'>Block 2</div>\n <div key='3'>Block 3</div>\n <div key='4'>Block 4</div>\n </GridLayout>\n );\n};\"}