Как мне стилизовать простую HTML-таблицу так же, как компонент TreeGrid?

Иногда мне нужна просто статическая таблица 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-таблицах. Но написание всех классов кажется немного подавляющим. Я думал о специальной директиве, которая будет вводить эти классы в таблицу в качестве более чистого решения.


angular nebular
person armoucar    schedule 29.11.2019    source источник
comment
вы можете предоставить stackblitz?   -  person Plochie    schedule 30.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я также не очень хорошо разбираюсь в Nebular, но я думаю, что вы можете сделать это, используя переменные Nebular Tree. Используйте следующий способ:

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-таблицу такой же, как таблица дерева туманностей. Вы можете получить эти переменные, исследуя элементы туманности.

person Sagar Sardiwal    schedule 07.02.2020