Вертикальная md-панель инструментов

Question

Является ли вертикальная панель инструментов материалом? Доступен ли он в Угловом материале?

Я ищу способ выстроить несколько кнопок с иконками на боковой панели. Я хочу что-то размером md-toolbar, но это ведет себя как md-sidebar. md-sidebar, кажется, имеет фиксированную ширину и слишком широка для значков, которые я хочу там закрепить.

Есть ли простое решение для этого? Я пытался использовать что-то вдоль линий

<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> 

Однако, на боковой панели появляется слишком толстым для простого значка я отображаюсь в нем.

Есть ли способ получить вертикальный md-toolbar или тоньше md-sidebar, или я должен переосмыслить свой дизайн?

Answer 1

Вертикальная панель относительно легко сделать с угловыми Материал - CodePen

• Использование layout="column" для выравнивания иконок
• Используйте <span flex></span> отделить верхние иконки из нижних иконок
• Контроль ширины с CSS
• Возможно использование md-whiteframe для добавления приподнятого эффекта

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

Вы изучали md-fab-speed-dial? Я предполагаю, что размещение триггера в левом верхнем углу страницы и установка атрибута md-направления на «вниз» даст вам нечто похожее на ваш желаемый результат.