0

我正在尝试水平渲染清晰度选项卡，因为垂直选项卡尚不可用。更清楚地说，链接是垂直的，但主要布局是水平的（链接+内容）。

注意：我正在使用 Angular 4.x

并且自定义非常有限，因为所有clr-tabs 都呈现在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>

谢谢

4

2 回答 2

0

正如我在上面的评论中所说，如果可以的话，我建议使用垂直导航组件

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

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

正如他们在文档中所说

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

于 2018-02-12T17:37:33.810 回答
0

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

欢迎任何优雅的方式。

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();
      }
    };
  }
}
于 2018-02-12T16:17:25.740 回答