1

I'm developing new administration page. On that registration page I need to have a menu with five tabs for each administration section. We are using ant for angular and for tab menu we are using component from ant library.

I have tried to override style for ant tabs as described here:

How To Evenly Space Tabs Across the Whole Tab Bar

and here

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

None of those articles helped.

Here is code example

    <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>

I would like to have a evenly spaced element inside

4

2 回答 2

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/

于 2019-05-31T09:49:05.563 回答
0

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

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

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

（确保你真的在你的 Angular 项目中使用 *.scss，默认是 *.css）

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

  1. 在全局样式表中。您的项目附带一个style.scss文件。只需在此处添加代码段，您的所有选项卡都将平均分配

  2. 在您的组件样式中。相同的样式，但由于角度视图封装，您的 scss 开始如下：:host ::ng-deep .ant-tabs {. （你可以在这里找到一个演示：https ://stackblitz.com/edit/ng-zorro-antd-zmmkth ）。您还可以使用以下方法禁用组件上的视图封装：

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

于 2019-05-31T14:38:38.603 回答