2

我想要页脚全屏宽度，而不是内容部分的宽度（屏幕宽度 - 侧边栏宽度）。有没有办法做到这一点？

我正在使用Nebular构建我的应用程序。

我在 Nebular 文档中找不到任何选项来执行此操作。所以我尝试扩展 nbLayoutComponent，将其命名为 customNgLayoutComponent，并将其自定义为我想要的模板布局，并在使用 nb-layout 的任何地方使用它。我不确定这是从库中自定义组件的正确方法。

我基本上从源https://github.com/akveo/nebular/blob/master/src/framework/theme/components/layout/layout.component.ts复制了 nbLayoutComponent 的原始模板并对其进行了一些调整（放置<ng-content select="nb-layout-footer"></ng-content>在布局 div 而不是内容 div 中）。

我期望组件模板被我的自定义模板覆盖。但它不起作用。这是您从库中覆盖组件模板的方式吗？我是否还必须复制 nbLayoutComponent 中的所有函数才能使我的 customNbLayout 工作？

4

1 回答 1

1

您可以在不扩展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.

于 2019-09-23T12:54:54.470 回答