如何设置与 TreeGrid 组件相同的简单 HTML 表的样式?



有时我只想要一个静态的html表,编写显示TreeGrid组件所需的所有代码是开销。我希望我能写一个简单的普通HTML表(或者至少,几乎是普通的(,其样式与TreeGrid组件相同。我像下面的代码一样手动编写了类,但这似乎不是很好。有没有办法以更简单的形式重用 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表格上获得这些更新。但是写所有的课只是感觉有点不知所措。我正在考虑一个自定义指令,它将这些类注入到表中作为更干净的解决方案。

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

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表与星云树表相同。您可以通过检查星云元素来获取这些变量。

最新更新