Append a class to clr-tab

673 views Asked by At

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

2

There are 2 answers

0
hippeelee On

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.

0
Bérenger -appvizer- On

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