Как создать отзывчивую целевую страницу (домашнюю страницу), используя Angular с дизайном материала? - PullRequest
Новая
       5

Как создать отзывчивую целевую страницу (домашнюю страницу), используя Angular с дизайном материала?

0 голосов
/ 05 февраля 2019

Я хочу, чтобы моя домашняя страница соответствовала следующему требованию: 1. Исправлен заголовок со значком гамбургера, логотипом слева и надписью «Логин» справа.2. Липкий нижний колонтитул.3. Sidenav должен быть виден поверх страницы при нажатии на значок гамбургера.4. Форма входа должна быть справа в области содержимого Sidenav. 

 <mat-drawer-container class="container" autosize>
     <mat-drawer #drawer class="sidenav">
        <button mat-button>Link One</button>
        <button mat-button>Link Two</button>
        <button mat-button>Link Three</button>
     </mat-drawer>
     <div class="sidenav-content">
        <mat-toolbar color="primary" class="fixed-header">
            <mat-toolbar-row>
                  <button mat-icon-button (click)="drawer.toggle()">
                      <mat-icon>menu</mat-icon>
                  </button>
                  <span class="title"> {{ title }}</span>
                  <span class="toolbar-spacer"></span>
             </mat-toolbar-row>
        </mat-toolbar>
        <router-outlet></router-outlet>
     </div>
 </mat-drawer-container> 

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 html {
     height: 100%;
 }
 body {
     margin: 0;
     font-family: Roboto, sans-serif;
 }
 .toolbar-spacer {
      flex: 1 1 auto;
 }
 .container {
      position: absolute;
      margin-top: 0px;
      height: 100%;
 }
 .container .mat-drawer {
     min-width: 200px;
 }
 .container .mat-drawer .mat-button {
      display: block;
      width: 100%;
      text-align: left;
 }

Я ожидаю, что вывод для текущего кода будет на всю ширину экрана, но он виден как лента.

...