如何使用角形材料创建页眉和页脚

时间:2019-04-11 05:57:37

标签: header angular-material angular6 footer

我正在尝试使用有角度的材质创建页眉和页脚,有人可以指导我如何进行此操作,或者请分享给我一些设计示例的方法。

HTML

<mat-toolbar color="primary">
<span>Header</span>
</mat-toolbar>
<mat-card>@Copyright2019</mat-card>

Css

    .mat-card{
        color:white;
        background-color: #303F9F;
        border-radius: 0px;
        text-align:center;
        font-size: 20px;
    }
   .mat-toolbar{
   margin-bottom:875px;
}

我已经创建了页眉和页脚。我使用margin-bottom来保持页眉和页脚之间的差距。请找到以下链接以查看屏幕截图。 https://imagizer.imageshack.com/img923/5535/XThUEX.png

还有其他方法可以使用angular6材质获取响应的页眉和页脚。

1 个答案:

答案 0 :(得分:0)

好吧,我找到了

// src/app/app.component.ts
...

    @Component({
      selector: 'app-root',
      template: `
        <!-- header -->
        <app-header></app-header>

        <!-- routes will be rendered here -->
        <router-outlet></router-outlet>

        <!-- footer -->
        <app-footer></app-footer>
      `,
      styles: []
    })

...

检查一下。 了解更多complete details