Question

我正在开发新的管理页面。在该注册页面上，我需要一个菜单，其中每个管理部分都有五个选项卡。我们将ant用于角度，对于选项卡菜单，我们使用ant库中的组件。

我已尝试覆盖ant标签的样式，如下所述：

How To Evenly Space Tabs Across the Whole Tab Bar

在这里

https://github.com/NG-ZORRO/ng-zorro-antd/issues/2242

这些文章都没有帮助。

这是代码示例

    <nz-tab nzTitle="LAN STATUS">
      Content of Tab Pane 1
    </nz-tab>
    <nz-tab nzTitle="DHCP">
      Content of Tab Pane 2
    </nz-tab>
    <nz-tab nzTitle="DNS">
        Content of Tab Pane 2
      </nz-tab>
      <nz-tab nzTitle="USERS">
          Content of Tab Pane 2
      </nz-tab>
      <nz-tab nzTitle="AMAZON SERVICES">
          Content of Tab Pane 2
      </nz-tab>
  </nz-tabset>

我希望元素内部有一个均匀分布的

Answer 1

Angular具有封装组件，因此您应该使用Deep或禁用该封装（我更喜欢使用deep）。

@Component({
  selector: 'second-cmp',
  template: `<div class="cmp">Second Component</div>`,
  styles: ['.cmp { border: green 2px solid; }'],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

或

:host ::ng-deep nz-tab X{
    color: red;
}

您可以在这里https://coryrylan.com/blog/css-encapsulation-with-angular-components中阅读更多内容 https://blog.angular-university.io/angular-host-context/

Answer 2

链接中发布的解决方案可以解决您的问题。您只需将此scss添加到您的项目中即可：

.ant-tabs {
  &-nav {
    display: flex;

    .ant-tabs-tab {
      flex-grow: 1;
      margin-right: 0px;
      width: 100%;
      text-align: center;
    }
  }
}

（确保您确实在角度项目中使用* .scss，默认值为* .css）

然后您可以在两个地方添加它：

在全局样式表中。。您的项目随附一个style.scss文件。只需在其中添加代码段，您所有的标签就会被平均划分
内部组件样式。相同的样式，但是由于封装了角度视图，因此scss的开始像这样：:host ::ng-deep .ant-tabs {。（您可以在此处找到演示：https://stackblitz.com/edit/ng-zorro-antd-zmmkth）。您还可以使用以下方法禁用组件上的视图封装：

@Component（{ ... 封装：ViewEncapsulation.None， }）

如何平均分配标签项？

2 个答案: