Как настроить NbLayoutComponent, расширив его до нового класса - PullRequest
Новая
       24

Как настроить NbLayoutComponent, расширив его до нового класса

0 голосов
/ 23 сентября 2019

Хотелось бы, чтобы ширина нижнего колонтитула была равна ширине раздела содержимого ( ширина экрана - ширина боковой панели ).Есть ли способ сделать это?

Я использую Nebular для создания моего приложения.

Я не нашел ни одной опции в Nebular docs, чтобы сделать это.Поэтому я попытался расширить nbLayoutComponent, назвал его customNgLayoutComponent, настроил его в соответствии с моим желаемым макетом шаблона и использовал его везде, где используется nb-layout.Я не уверен, что это правильный способ настройки компонента из библиотеки.

Я в основном скопировал исходный шаблон nbLayoutComponent из источника https://github.com/akveo/nebular/blob/master/src/framework/theme/components/layout/layout.component.ts и немного подправил его (поместил <ng-content select="nb-layout-footer"></ng-content> в макете div вместо содержимого div).

Я ожидаю, что шаблон компонента будет переопределен моим пользовательским шаблоном.Но это не работает.Это как вы переопределяете шаблон компонента из библиотеки?Нужно ли мне также копировать все функции в nbLayoutComponent, чтобы мой customNbLayout работал?

1 Ответ

0 голосов
/ 23 сентября 2019

Вы можете сделать это, не расширяя NbLayoutComponent.

Выньте нижний колонтитул и поместите его под nb-layout: 

<nb-layout-footer>
  ... footer component
</nb-layout-footer>

И отрегулируйте размер боковой панели или .main-container под боковой панелью и сделайте ширину нижнего колонтитула 100%. 

nb-sidebar .main-container {
   height: calc(100vh - height-of-your-footer)
}

nb-layout-footer {
   width: 100%
}

Что происходит: У вас может быть следующий макет: 

<nb-layout>
  <nb-layout-header subheader>
    <app-header></app-header>
  </nb-layout-header>
  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
    <nb-menu tag="menu" [items]="items"></nb-menu>
  </nb-sidebar>
  <nb-layout-column class="layout-container">
    <ng-content></ng-content>
  </nb-layout-column>
  <nb-layout-footer>
    <app-footer></app-footer>
  </nb-layout-footer>
</nb-layout>

Поместив nb-layout-footer под nb-layout, оба контейнера sidebar и .content помещаются под .layout-container, и каждый имеет определенную ширину.Нижний колонтитул подпадает под .content.Для того, чтобы сделать его на всю ширину, нужно вывести нижний колонтитул из .layout-container.

...