如何均匀分布选项卡项目？

Question

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

我已尝试按照此处所述覆盖 ant 选项卡的样式：

这里

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

None 篇文章有所帮助。

这是代码示例

    <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 具有封装组件，因此您应该使用深度或禁用该封装（我更喜欢使用深度）。

@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

您 link 中发布的解决方案解决了您的问题。您只需将此 scss 添加到您的项目中：

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

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

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

然后你有两个地方可以添加它：

在全局样式表中。您的项目带有一个 style.scss 文件。只需在此处添加代码段，您的所有选项卡将被平分
inside your component styles.相同的样式，但是因为angular视图封装，你的scss开始是这样的：:host ::ng-deep .ant-tabs {。（您可以在此处找到演示：https://stackblitz.com/edit/ng-zorro-antd-zmmkth）。您还可以禁用组件上的视图封装：

@组件({ ... 封装：ViewEncapsulation.None, })

如何均匀分布选项卡项目？

How to spread tab items evenly?

angular

ng-zorro-antd