Vertical md-toolbar

Question

Ist eine vertikale Symbolleiste ein materialkonformes Element? Ist es in Angular Material verfügbar?

Ich suche nach einer Möglichkeit, mehrere Schaltflächen mit Symbolen in einer Seitenleiste auszurichten. Ich möchte etwas von der Größe eines md-toolbar, aber das verhält sich wie ein md-sidebar. Die md-sidebar scheint eine feste Breite zu haben und ist viel zu breit für die Symbole, die ich dort anheften möchte.

Gibt es dafür eine einfache Lösung? Ich habe versucht, nach dem Vorbild der

<section layout="row"> 
    <!-- Sidebar (this should be thin) --> 
    <md-sidenav class="md-sidenav-left" md-is-locked-open="true" md-whiteframe="4"> 
    <md-button><i class="material-icons">home</i></md-button> 
    </md-sidenav> 

    <!-- Main app area --> 
    <div id="content-main"></div> 

</section> 

jedoch mit etwas, das Sidebar viel zu dick für das einfache Symbol erscheint in es mir angezeigt wird.

Gibt es eine Möglichkeit, eine vertikale md-toolbar oder eine dünnere md-sidebar zu bekommen, oder sollte ich mein Design überdenken?

Answer 1

Eine vertikale Werkzeugleiste ist relativ einfach, mit kantigem Material zu tun - CodePen

• Verwenden layout="column" die Symbole ausrichten
• Verwenden <span flex></span> die Top-Symbole aus den unteren Symbolen
• Kontrolle die Breite zu trennen mit CSS
• Vielleicht md-whiteframe verwenden, um eine erhöhte Wirkung

hinzufügen

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column"> 
    <md-content flex layout="column"> 
    <md-whiteframe id="vericalToolBar" class="md-whiteframe-8dp" layout="column" layout-align="start center" flex> 
     <md-button class="md-icon-button" aria-label="More"> 
     <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon> 
     </md-button> 
     <md-button class="md-icon-button" aria-label="Favorite"> 
     <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon> 
     </md-button> 
     <p id="toolBarTitle" class="md-title">My vertical toolbar</p> 
     <span flex></span> 
     <md-button class="md-icon-button" aria-label="Favorite"> 
     <md-icon md-svg-icon="img/icons/cake.svg"></md-icon> 
     </md-button> 
    </md-whiteframe> 
    </md-content> 
</div> 

CSS

#vericalToolBar { 
    background-color: rgb(1,74,182); 
    width: 50px; 
} 

#vericalToolBar md-icon { 
    color: rgba(255,255,255,0.87); 
} 

#toolBarTitle { 
    writing-mode: tb-rl; 
    color: rgba(255,255,255,0.87); 
} 

Answer 2

Haben Sie sich md-fab-speed-dial angesehen? Ich würde mir vorstellen, den Auslöser oben links auf Ihrer Seite zu platzieren und das Attribut md-direction auf "down" zu setzen, würde Ihnen etwas geben, das Ihrem gewünschten Ergebnis ähnelt.