Как получить вкладку Angular 6+ Bootstrap с выравниванием по правому краю? - PullRequest
Новая
       22

Как получить вкладку Angular 6+ Bootstrap с выравниванием по правому краю?

0 голосов
/ 13 декабря 2018

Я использую Angular 6 и Bootstrap (и все еще изучаю Angular).У меня есть набор вкладок с несколькими вкладками, и последняя вкладка должна быть выровнена по правому краю.

В vanilla Bootstrap я могу просто добавить класс ml-auto на последнюю вкладку, чтобы выровнять его по правому краю.Этот класс просто сводится к margin-left: auto !important;, поэтому я теоретически должен иметь возможность стилизовать его, если смогу закрепить соответствующий элемент. 

<li class="nav-item ml-auto">
    <a class="nav-link" role="tab">My Right Tab</a>
</li>

Однако код Angular более непрозрачен: 

<ngb-tab>
    <ng-template ngbTabTitle>My Right Tab</ng-template>
    <ng-template ngbTabContent>
        ...
    </ng-template>
 </ngb-tab>

И создает все соответствующие Bootstrapified HTML при компиляции.

Бит <ngb-tab> становится тегом <a> в HTML, а не <li>, поэтому я не могу применить идентификаторили класс к тому, из которого нужно перехватить соответствующий стиль (а в CSS нет родительского селектора).

Сложность - это дополнительный вложенный набор вкладок с различными стилями в содержимом вкладок различных вкладок.Я выделил это с помощью класса в div, оборачивающем tabset.Однако я не могу сделать то же самое с внешним набором вкладок.Поэтому я могу установить левое поле на вкладке, используя :last-of-type на .nav-item, а затем переопределить его во вложенном наборе вкладок, но это похоже на множество действительно неясных акробатических упражнений для достижения чего-то, что должно быть очень простым.

Есть ли более простой, понятный и более угловой способ сделать это?Есть ли способ применить класс начальной загрузки?Могу ли я просто написать загрузочный html в tabset (я не пробовал это, так как он кажется не угловатым)?

...