Append a class to clr-tab

Question

I'm trying to render Clarity tabs horizontally since vertical tabs are not yet available. To be more clear, links are verticals but the main layout is horizontal (links + contents).

NB: I'm using angular 4.x

And the customization is very limited because all clr-tabs are rendered aside the main ul.nav element containing all links.

There is no obvious way to determine in pure CSS which one is active. :empty cannot help.

So, I'm looking for solution with angular to append an active class on the activated clr-tab in order to widely display it.

Ideally, something like

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

Thanks

First, what version of Clarity are you using? Second, is your goal to override the default clarity style for the tab buttons that are active or the content that is active? Finally, is there any reason you are not using the vertical-nav component? https://vmware.github.io/clarity/documentation/v0.11/vertical-nav/basic-structure/charmander — hippeelee, Feb 12 '18 at 17:31
I need a tab system (tab buttons + tab content). That's true I can use the vertical nav but it forces me to re-create a tab-content system with Angular. This is not a problem at all, thats only too bad to rewrite a tab component. — Bérenger -appvizer-, Feb 13 '18 at 09:01

score 1 · Answer 1 · answered Feb 12 '18 at 17:37

As I said in my comment above, if you can, I would recommend using the vertical nav component

If that's out of the question you can still override the clarity css using the Angular recomended (but deprecated)

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

As they say in the docs

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

score 0 · Answer 2 · answered Feb 12 '18 at 16:17

The temporary solution I used is a simple but ugly method override.

Any graceful way is welcome.

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();
      }
    };
  }
}

Append a class to clr-tab

2 Answers2