Barra laterale angolare e barra degli strumenti fissa

Question

Ho copiato questa demo sidenav dai documenti con materiale angolare. https://material.angularjs.org/latest/demo/sidenav

e ha aggiunto il primo demo barra degli strumenti ad esso da https://material.angularjs.org/latest/demo/toolbar

Quello che voglio è la barra degli strumenti da fissare.

Codepen demo: http://codepen.io/gvorster/pen/BzWvGe

Quando si aggiunge questo stile la barra degli strumenti è fisso.

<md-toolbar class="md-hue-2" style="position:fixed !important"> 

Ma le icone a destra sono sparite.

ridimensionamento dello schermo fino a quando il sidenav è nascosta mostrerà le icone lato destro.

Rimozione lo stile mostra le icone lato destro, ma la barra degli strumenti non è fisso:

C'è un modo per ottenere una barra degli strumenti appiccicoso e hanno le icone laterali rigth indicati.

Answer 1

È necessario utilizzare md-sidenav all'interno del contenitore md-content. Inoltre, prova a utilizzare il tag md-content anziché il tag div. Nel tuo esempio hai dato valori errati all'attributo layout-align. Si prega di verificare i valori appropriati nel Docs.

Ecco la struttura di base per le vostre esigenze.

<md-content flex> 
    <md-toolbar> 
    </md-toolbar> 

    <md-content layout="column" layout-fill> 
     <!-- content --> 

     <md-sidenav> 
     </md-sidenav> 
    </md-content> 
</md-content> 

ecco la penna funzionante. http://codepen.io/next1/pen/xOqMjy

Answer 2

È necessario aggiungere layout per tutti i contenitori e spostare la barra degli strumenti fuori dal contenuto md da scorrere.

<div layout="row" flex> 
<md-sidenav></md-sidenav> 
<div layout="column" flex> 
    <md-toolbar></md-toolbar> 
    <md-content></md-content> 
</div> 
<md-sidenav></md-sidenav> 
</div> 

Ecco una demo di lavoro: http://codepen.io/anon/pen/EyWJKK?editors=1010