如何在 angular 2 ag-grid 中的两行 ag-grid 之间添加 space

Question

上图就是我想要的

但我使用了 ag-grid，所以我的输出如下图所示

我正在使用 ag-grid。我想要 2 行网格之间的更多空间，这表明行是分开的。

 .ag-body-container .ag-row {
        margin-top:15px;
        border: 1px solid $white-three;
        background-color: #d8d8d8;
        border-radius: 4px;
        font-size: 12px;
        color: #505050;

我为网格行给出了这个。但它需要所有行的边距为 15px。但问题是上面的行被覆盖到下面。所以基本上我需要用特定的 space 分隔行。请尽快告诉我。谢谢

Answer 1

由于 ag-grid 使用绝对定位来放置行并提供高度，padding 和 margin 只会移动行并将它们隐藏在彼此后面。相反，我建议为行提供更大的高度，以允许 space 放置边框。

像这样的东西会起作用：

var gridOptions = {
    ...
    rowHeight: 45,
    rowStyle: {'border-bottom': 'white 20px solid'},
    ....
};

或者如果您需要在行中考虑垂直居中：

var gridOptions = {
    ...
    rowHeight: 45,
    rowStyle: {
        'border-bottom': 'white 10px solid',
        'border-top': 'white 10px solid' 
    },
    ....
};

Plnkr example

Answer 2

我提出了不同的解决方案 - 不是基于边界。这样你不仅可以有透明的缝隙，而且圆角的边缘也没有任何问题。

这些行在 table body 行之间形成间隙（header 和第一个 body 行之间没有 space）：

rowHeight: 58,
rowStyle: {
  "max-height": "50px",
},

"rowHeight" 应该是您的行样式高度 + 您想要在每行底部制作的边距。

然后，使header边距底部：

.ag-theme-material .ag-header{
    margin-bottom: 12px;
}

注意！如果您使用的主题不是“.ag-theme-material”，请在上面的代码中替换它！

如何在 angular 2 ag-grid 中的两行 ag-grid 之间添加 space

How to add space between two rows of ag-grid in angular 2 ag-grid

ag-grid

angular2-directives

ag-grid-ng2

angular