Tworzenie układ ze stałym nagłówku, stałym bocznym, stałą sekcję treści przy użyciu kątowa Materiał/Flex-układ w Kątowymi

Question

używam Angular w/Angular Material i Flex Layout

Ja próbuje stworzyć układ dla aplikacji internetowych to jest dokładnie tak jak this site. Zwróć uwagę na poprawiony nagłówek, stały pasek boczny, stały ból treści. Bez przewijania przeglądarki, tylko przewijanie div doskonale pasuje do okna przeglądarki.

Oto html Używam dać mi podstawową strukturę:

<md-toolbar color="primary"> 
    <span>Application Title</span> 
</md-toolbar> 
    <md-sidenav-container> 
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> 
    <div class="my-content">Main content</div> 
    </md-sidenav-container> 

Dodatkowo ustawić następujące style:

html, body { 
     margin: 0; 
     width: 100%; 
     height: 100%; 
     overflow: hidden; 
    } 
md-sidenav-container, .main-content { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

zauważyłem, że bez paska narzędzi na stronie wszystko działa idealnie. Więc dodałem padding-bottom: 64px; do kontenera md-sidenav, klasy .main-content. Wygląda na to, że naprawiło to zawartość, ale nie sidenav. Pasek przewijania sidenav nadal znajduje się poniżej okna przeglądarki.

Mam układ flex zainstalowany w mojej aplikacji Angular, jeśli ktoś może mi powiedzieć, jak to zrobić z dyrektywami flex. W przeciwnym razie zwykłe css też byłoby w porządku.

Answer 1

Można sprawdzić przykład praca w https://angular-material2-issue-dgcx3j.stackblitz.io/

To nie jest zupełnie tak samo jak pan wniosek (posiada dodatkową funkcjonalność). Pasek boczny jest ustawiony na dużych ekranach, szybko reaguje na małe ekrany i pokazuje przycisk menu na pasku narzędzi.

Można sprawdzić kod na https://stackblitz.com/edit/angular-material2-issue-dgcx3j?file=app%2Fapp.component.ts

Ponadto można znaleźć kod źródłowy Kątowymi Materiały Docs Site (jeden pan poprosił taką samą funkcjonalność) w https://github.com/angular/material.angular.io

Answer 2

To jest to, czego szukasz dla

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
mat-sidenav-container { 
 
    width: 100%; 
 
    height: calc(100% - 64px); 
 
}

<md-toolbar color="primary"> 
 
    <span>Application Title</span> 
 
</md-toolbar> 
 
<md-sidenav-container> 
 
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> 
 
    <div class="my-content"> 
 
    <router-outlet></router-outlet> 
 
    </div> 
 
</md-sidenav-container>

Answer 3

Możesz spróbować tego kodu

html

<md-toolbar color="primary"> 
    <span>Application Title</span> 
</md-toolbar> 

<md-sidenav-container class="example-container"> 
    <md-sidenav #sidenav class="example-sidenav" opened="true"> 
    Jolly good! 
    </md-sidenav> 

    <div class="example-sidenav-content"> 
    <div class="my-content">Main content</div> 
    </div> 

</md-sidenav-container> 

css

.example-container { 
    width: 500px; 
    height: 300px; 
    border: 1px solid rgba(0, 0, 0, 0.5); 
} 

.example-sidenav-content { 
    display: flex; 
    height: 100%; 
    align-items: center; 
    justify-content: center; 
} 

.example-sidenav { 
    padding: 20px; 
} 

.my-content{ 
    height:1200px; 
} 

i heres link Plunker: https://plnkr.co/edit/YFGQdVcNnIhMK0GzZ25Z?p=preview