Добавить класс в clr-tab

Я пытаюсь отображать вкладки Clarity горизонтально, поскольку вертикальные вкладки пока недоступны. Чтобы быть более ясным, ссылки являются вертикальными, но основной макет горизонтальный (ссылки + содержимое).

NB: я использую angular 4.x

И возможности настройки очень ограничены, потому что все clr-tab отображаются отдельно от основного элемента ul.nav, содержащего все ссылки.

В чистом CSS нет очевидного способа определить, какой из них активен. :empty помочь не могу.

Итак, я ищу решение с angular, чтобы добавить класс active к активированному clr-tab, чтобы широко отображать его.

В идеале что-то вроде

<clr-tabs>
  <clr-tab *ngFor="..." [ngClass]="{'active': ???????}">
    <button type="button" clrTabLink>...</button>
    <clr-tab-content *clrIfActive>
      ....
    </clr-tab-content>
  </clr-tab>
</clr-tabs>

Спасибо


angular vmware-clarity
person Bérenger -appvizer-    schedule 12.02.2018    source источник
comment
Во-первых, какую версию Clarity вы используете? Во-вторых, ваша цель — переопределить стиль четкости по умолчанию для активных кнопок вкладок или активного содержимого? Наконец, есть ли причина, по которой вы не используете компонент вертикальной навигации? vmware.github.io/clarity/documentation/ v0.11/вертикальная навигация/   -  person hippeelee    schedule 12.02.2018
comment
Привет, я использую Clarity 0.11.4.   -  person Bérenger -appvizer-    schedule 13.02.2018
comment
Мне нужна система вкладок (кнопки вкладок + содержимое вкладок). Это правда, что я могу использовать вертикальную навигацию, но это заставляет меня воссоздавать систему вкладок с помощью Angular. Это совсем не проблема, просто слишком плохо переписывать компонент вкладки.   -  person Bérenger -appvizer-    schedule 13.02.2018

Ответы (2)


arrow_upward
0
arrow_downward

Временное решение, которое я использовал, представляет собой простое, но уродливое переопределение метода.

Приветствуется любой изящный способ.

import {ɵl /* for IfActiveDirective */ } from "@clr/angular";

@Component()
class Component {
  constructor(renderer: Renderer2) {
    ɵl.prototype.updateView = function (value) {
      if (value) {
        renderer.addClass(renderer.parentNode(this.template.elementRef.nativeElement), "active");
        this.container.createEmbeddedView(this.template);
      } else {
        renderer.removeClass(renderer.parentNode(this.template.elementRef.nativeElement), "active");
        this.container.clear();
      }
    };
  }
}
person Bérenger -appvizer-    schedule 12.02.2018

arrow_upward
0
arrow_downward

Как я уже сказал в своем комментарии выше, если вы можете, я бы рекомендовал использовать вертикальную компонент навигации

Если об этом не может быть и речи, вы все равно можете переопределить прозрачность css, используя рекомендуется Angular (но устарело)

::ng-deep.nav>.active {
  color: red!important;
}

Как говорится в документах

Комбинатор потомков, проникающий в тень, устарел, и его поддержка прекращается в основных браузерах и инструментах. Таким образом, мы планируем отказаться от поддержки в Angular (для всех 3 из /deep/, >>> и ::ng-deep). До тех пор следует отдавать предпочтение ::ng-deep для более широкой совместимости с инструментами.

person hippeelee    schedule 12.02.2018