Question

我正在尝试水平渲染Clarity标签，因为vertical tabs尚不可用。更清楚的是，链接是垂直的，但主要布局是水平的（链接+内容）。

注意：我正在使用角度4.x

自定义非常有限，因为所有clr-tab都被呈现在包含所有链接的主ul.nav元素旁边。

没有明显的方法可以在纯CSS中确定哪一个是活动的。 :empty无法帮助。

所以，我正在寻找带有角度的解决方案，在激活的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>

由于

Answer 1

我使用的临时解决方案是简单但丑陋的方法覆盖。

欢迎任何优雅的方式。

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

Answer 2

正如我在上面的评论中所说，如果可以，我建议使用纵向nav component

如果那是不可能的，你仍然可以使用Angular recomended覆盖清晰度css（但已弃用）

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

正如他们在文档中所说的

不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃Angular中的支持（对于/ deep /，＆gt;＆gt;＆gt;和:: ng-deep的所有3个）。在此之前，应该首选:: ng-deep，以便与工具实现更广泛的兼容性。

将类附加到clr-tab

2 个答案: