1

TreeGrid有时我只想要一个静态 html 表，而编写显示组件所需的所有代码是一种开销。TreeGrid我希望我可以编写一个与组件样式相同的简单纯 HTML 表格（或至少几乎是纯 HTML 表格） 。我像下面的代码一样手动编写了这些类，但这似乎并不是很好。有没有办法以更简单的形式重用 TreeGrid 样式？

<table class="nb-tree-grid">
    <thead>
        <tr class="nb-tree-grid-header-row">
            <th class="nb-tree-grid-header-cell cdk-column-name nb-column-name">Id</th>
            <th class="nb-tree-grid-header-cell cdk-column-name nb-column-name">Name</th>
        </tr>
    </thead>

    <tbody>
        <tr class="nb-tree-grid-row">
            <td class="nb-tree-grid-cell cdk-column-name nb-column-name">1</td>
            <td class="nb-tree-grid-cell cdk-column-name nb-column-name">John</td>
        </tr>
        <tr class="nb-tree-grid-row">
            <td class="nb-tree-grid-cell cdk-column-name nb-column-name">2</td>
            <td class="nb-tree-grid-cell cdk-column-name nb-column-name">Julia</td>
        </tr>
    </tbody>
</table>

编辑：

示例-> https://stackblitz.com/edit/nebular-tree-grid-styles

我只是想确保当 Nebular 在 TreeGrid 上更新他们的样式时，我也会在我的纯 HTML 表格上获得这些更新。但是写所有的类只是感觉有点不知所措。我正在考虑一个自定义指令，它将这些类作为更清洁的解决方案注入表中。

4

1 回答 1

0

我也不擅长星云，但我认为你可以使用星云树变量来做这件事。使用以下方式：

thead tr { background: var(--tree-grid-header-background-color);
  color: var(--tree-grid-header-text-color);
  font-family: var(--tree-grid-header-text-font-family);
  font-size: var(--tree-grid-header-text-font-size);
  font-weight: var(--tree-grid-header-text-font-weight);}

您可以在星云树上获得更多详细信息

使用变量将使您的自定义 HTML 表与星云树表相同。您可以通过检查星云元素来获取这些变量。

于 2020-02-07T13:26:27.363 回答