Статический заголовок меню с использованием углового материала

Question

Проблема:

Я пытаюсь получить статический компонент меню заголовка, используя угловой материал, подобный тому, что находится в верхней части сайта Угловой материал . Возможно ли это сделать с какими-либо компонентами материала или нет, пожалуйста, можете ли вы помочь с индивидуальным.

Answer 1

Использование Компонент панели инструментов циновки из углового материала.
Используется 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 со статическим заголовком с использованием компонента угловой панели инструментов