Как равномерно распределить вкладки? - PullRequest
Новая
       21

Как равномерно распределить вкладки?

0 голосов
/ 31 мая 2019

Я разрабатываю новую страницу администрирования. На этой странице регистрации мне нужно меню с пятью вкладками для каждого раздела администрирования. Мы используем муравей для угловых и для меню вкладок мы используем компонент из библиотеки муравьев.

Я попытался переопределить стиль для вкладок 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>

Я хотел бы иметь равномерно расположенный элемент внутри

Ответы [ 2 ]

1 голос
/ 31 мая 2019

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 / угловой хост-контекст /

0 голосов
/ 31 мая 2019

Решение, опубликованное в вашей ссылке, решает вашу проблему. Вы просто добавляете этот scss в свой проект: 

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

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

(убедитесь, что вы действительно используете * .scss в своем угловом проекте, по умолчанию * .css)

У вас есть два места для добавления:

  1. В глобальной таблице стилей. Ваш проект поставляется с файлом style.scss. просто добавьте туда фрагмент, и все ваши вкладки будут равномерно разделены

  2. Внутри ваших компонентных стилей. Те же стили, но из-за угловой инкапсуляции ваш scss начинается так: :host ::ng-deep .ant-tabs {. (вы можете найти демо здесь: https://stackblitz.com/edit/ng-zorro-antd-zmmkth). Вы также можете отключить инкапсуляцию вида для вашего компонента с помощью:

    @ Компонент ({ ... инкапсуляция: ViewEncapsulation.None, })

...