1

新しい管理ページを開発中です。その登録ページには、管理セクションごとに 5 つのタブがあるメニューが必要です。角度にはantを使用し、タブメニューにはantライブラリのコンポーネントを使用しています。

ここで説明されているように、ant タブのスタイルをオーバーライドしようとしました。

タブバー全体でタブを均等に配置する方法

そしてここ

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>

内部に等間隔の要素を配置したい

4

2 に答える 2

0

リンクに投稿されたソリューションは、問題を解決します。このscssをプロジェクトに追加するだけです：

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

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

(Angular プロジェクトで実際に *.scss を使用していることを確認してください。デフォルトは *.css です)

次に、追加する場所が 2 つあります。

  1. グローバル スタイルシート。プロジェクトにはstyle.scssファイルが付属しています。そこにスニペットを追加するだけで、すべてのタブが均等に分割されます

  2. コンポーネント スタイル内。同じスタイルですが、Angular ビューのカプセル化のため、scss は次のように始まります: :host ::ng-deep .ant-tabs {. (ここでデモを見つけることができます: https://stackblitz.com/edit/ng-zorro-antd-zmmkth )。コンポーネントのビューのカプセル化を無効にすることもできます:

    @Component({ ... カプセル化: ViewEncapsulation.None, })

于 2019-05-31T14:38:38.603 に答える