2016-05-19 63 views
3

我正在尋找一種方法來實現響應式網格系統,以使用react和material-ui開發材料設計應用程序。
雖然React-Bootstrapthis,但我還沒有發現與Material-UI類似的東西。 GridList很好,但不完全一樣。有沒有解決方案?React Material-UI網格系統

+0

我相信它仍然在他們的路線圖https://開頭的github .COM/callemall /材料的UI /問題/ 3614。我使用uikit網格系統尋找目前我正在製作的替代品和其他東西。 – Tony

+0

不使用bootstraps解決方案的原因是什麼?如果你正在使用webpack或者構建工具來支持樹狀結構,那麼你不要在你的包中包含不相關的東西。只是網格。 –

+0

@AvraamMavridis是不是一個醜陋的解決方案?誰能答應我這兩個框架是相互兼容的? –

回答

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> 
1

我創建了兩個爲Material Design實現網格系統的包。第一個,material-responsive-grid是一個CSS框架,第二個,react-material-responsive-grid是一組實現此框架的React組件。

這些軟件包遵循Google規定的responsive UI的標準,因此您不必決定每個其他UI框架實現的不同斷點。在標準中指定的所有視口尺寸都會考慮適當的排水溝,建議的列數以及超過1600 dp的佈局行爲。它應該按照Device Metrics指南中的每個設備推薦使用。

每個軟件包在github上都可用,幷包含一個React應用程序示例。

讓我知道如果您有任何問題。