CODEWITHSUNDEEP
htmlcssangularjsmaterial-designangular-material
Luke Taylor
Luke Taylor

Reputation: 9561

Vertical md-toolbar

Is a vertical toolbar a material-compliant element? Is it available in Angular Material?

I'm looking for a way to line up several buttons with icons in a sidebar. I want something the size of a md-toolbar, but that behaves like a md-sidebar. The md-sidebar seems to have a fixed width, and is far too wide for the icons I want to pin there.

Is there an easy solution for this? I've tried using something along the lines of

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

However, the sidebar appears much too thick for the simple icon I'm displaying in it.

Is there a way to get a vertical md-toolbar or a thinner md-sidebar, or should I rethink my design?

Upvotes: 3

Views: 5152

Answers (2)

MPawlak
MPawlak

Reputation: 715

Have you looked into md-fab-speed-dial? I'd imagine placing the trigger in the top left of your page and setting the md-direction attribute to "down" would give you something similar to your desired result.

Upvotes: 1

camden_kid
camden_kid

Reputation: 12813

A vertical toolbar is relatively easy to do with Angular Material - CodePen

  • Use layout="column" to align the icons
  • Use <span flex></span> to separate the top icons from the bottom icons
  • Control the width with CSS
  • Maybe use md-whiteframe to add a raised effect

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);
}

Upvotes: 2

Related Questions