Question

问题：

我正在尝试使用类似于Angular material site顶部的棱角材料来获得静态标题菜单组件。是否可以使用任何材料组件，请为定制的任何组件提供帮助。

Answer 1

使用Angular Material中的 Mat-Toolbar Component 。
利用css-properties和html-markup来获得静态标头。

方法：

1。将height:100%, width: 100%赋予html,body和您的应用程序组件（根组件）。
2。制作两个容器-一个header和另一个content-container。
3。将height: 50px赋予header，并将剩余高度即calc( 100% - 50px)赋予content-container。

    -------- app.component.ts--------
    <section class="app-container">
       <header>
           <mat-toolbar color="primary">
              Static Header
           </mat-toolbar>
       </header>
       <section class="content-container">
          <p>Paragraph with content overflowing data</p>
       </section>
    </section>
-------------------------------------------------------------
      html, body, .app-container {
          margin: 0;
          padding: 0;
          height: 100%;
          width: 100%;
       }

        mat-toolbar {
          height: 100% !important;
        }    

        .app-container header {
          height: 50px;
          max-height: 50px;
          box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 
                      0 6px 10px 0 rgba(0,0,0,.14), 
                      0 1px 18px 0 rgba(0,0,0,.12);
        }
        .app-container .content-container {
          height: calc( 100% - 50px);
          overflow: auto;
          padding: 10px;
          word-break: break-all;
        }

Stackblitz-Demo with Static Header using Angular Toolbar component

使用角度材质的静态标题菜单

1 个答案: