我正在尋找一種方法來實現響應式網格系統,以使用react和material-ui開發材料設計應用程序。
雖然React-Bootstrap
有this,但我還沒有發現與Material-UI類似的東西。 GridList很好,但不完全一樣。有沒有解決方案?React Material-UI網格系統
3
A
回答
2
相反,使用材質UI的內聯樣式,我使用的是材質UI的引導。它工作得很好,很簡單。 這裏是一個例子。
<div className="Container">
<button className="btn btn-primary"> Action</button>
<div className="row">
<div className="col-sm-4">
<ReactAutoForm collection={DoctorCategories} type="insert" debug={true} />
</div>
<div className="col-sm-8">
<table><TableHeader><TableRow>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn>Description</TableHeaderColumn>
<TableHeaderColumn>Edit</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
</TableBody>
</TableBody>
</table>
</div>
</div>
</div>
2
似乎反應內聯電網(http://broucz.github.io/react-inline-grid/)可能是這個問題的一個很好的解決方案。
這個lib背後的概念非常接近Bootstrap網格系統背後的概念,它使用內聯式樣。
1
我創建了兩個爲Material Design實現網格系統的包。第一個,material-responsive-grid是一個CSS框架,第二個,react-material-responsive-grid是一組實現此框架的React組件。
這些軟件包遵循Google規定的responsive UI的標準,因此您不必決定每個其他UI框架實現的不同斷點。在標準中指定的所有視口尺寸都會考慮適當的排水溝,建議的列數以及超過1600 dp的佈局行爲。它應該按照Device Metrics指南中的每個設備推薦使用。
每個軟件包在github上都可用,幷包含一個React應用程序示例。
讓我知道如果您有任何問題。
0
現在Material-UI擁有自己的Flexbox佈局。這是阿爾法的分支 您可以通過材料的UI最新版本
npm install [email protected]
用它來更詳細的文檔和例子,你可以訪問此鏈接https://material-ui-1dab0.firebaseapp.com/layout/responsive-uie-ui
相關問題
- 1. React Grid系統等價於Bootstrap的網格系統?
- 2. 1140網格系統 - 網格內網格
- 3. Flickr網格系統
- 4. Bootstrap網格系統
- 5. 網格系統html
- 6. Css網格系統
- 7. Susy定製網格系統
- 8. 尋路的網格系統
- 9. 帆布網格像系統
- 10. 在960網格系統
- 11. 語義網格系統
- 12. Bootstrap網格系統jsfiddle
- 13. 自定義網格系統
- 14. CSS響應網格系統
- 15. 交錯網格系統
- 16. Matlab:如何將粗網格系統細分爲更細網格的系統?
- 17. 如何創建像12列(僅網格)的網格系統使用新的CSS網格系統佈局
- 18. MDC是否有網格系統?
- 19. 自舉網格系統半屏
- 20. 問題添加子網格系統
- 21. 調整Boostrap'縮略圖網格系統'
- 22. 在網格系統中使用空divs
- 23. Bootstrap網格系統:切換類名稱?
- 24. 角材料有網格系統嗎?
- 25. Bootstrap網格系統;按鈕放置
- 26. 帶網格系統的HTML5加熱板
- 27. 更改網格座標系統
- 28. 手機上的Bootstrap網格系統?
- 29. 瞭解bootstrap網格系統類
- 30. 引導網格系統問題
我相信它仍然在他們的路線圖https://開頭的github .COM/callemall /材料的UI /問題/ 3614。我使用uikit網格系統尋找目前我正在製作的替代品和其他東西。 – Tony
不使用bootstraps解決方案的原因是什麼?如果你正在使用webpack或者構建工具來支持樹狀結構,那麼你不要在你的包中包含不相關的東西。只是網格。 –
@AvraamMavridis是不是一個醜陋的解決方案?誰能答應我這兩個框架是相互兼容的? –