Material 农业网格的设计外观

Question

如何使用 aggrid 的 material 设计功能？在我的 angular2 应用程序中，我使用了 ag-grid 并将 class 名称提到为 ag-material 并将行高设置为 48。但是 material 设计外观不适用于我的网格。我应该在我的索引中包含任何 CSS 文件还是从 aggrid 包中获取？这就是我将 ag-material class 应用于网格并在末尾覆盖行高的方式。

            <ag-grid-ng2  style="width: 100%; height: 100%;"
                     class="ag-material"
                     [gridOptions]="gridOptions"
                     [columnDefs]="columnDefs"
                     [rowData]="rowData"
                     rowSelection="single"
                     (selectionChanged)="onSelectionChanged()"
                     rowHeight="48">
        </ag-grid-ng2>

有人可以帮助我获得 material aggrid 的设计外观吗？

Answer 1

angular 2 implementation 上的指南说

You will need to include the CSS for ag-Grid, either directly inside your html page, or as part of creating your bundle if bundling.

然后它演示了包括所需的样式表：

<link href="node_modules/ag-grid/styles/ag-grid.css" rel="stylesheet" />
<link href="node_modules/ag-grid/styles/theme-fresh.css" rel="stylesheet" />

查看 github repo 它表明您需要包含一个单独的 material 主题样式表：

<link href="node_modules/ag-grid/styles/theme-material.css" rel="stylesheet" />

Material 农业网格的设计外观

Material design look for ag-grid

ag-grid