有时我只想要一个静态的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表与星云树表相同。您可以通过检查星云元素来获取这些变量。