How can I design a Google+ like, nav-bar using angular material

问题

How can I design a nav-bar styled like the one Google+ has using angular material ?

I don't know how to get this nav bar, and with the search box styled this way, it thought material design made by google was used for this, but i can't see such things in angular material implementation.

I wanted to make a style similar to G+ for an app, coz it's very nice and suitable for that one.

回答1:

Here you go! It´s not exactly as the design but it´s a good starting point for you.. http://codepen.io/mackelito/pen/VKxGmR

Note: it´s just placeholders so no functionality yet.. have fun! :) for the icons I have added

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

in the head tag

回答2:

First of all, angular material provides no way to put in an input in that specific style. It implements the material spec; as it turns out, even google does not completely follow it. The navbar present on google+ other various google apps is not in the spec. This

<md-toolbar ng-show="!showSearch">
    <div class="md-toolbar-tools">
      <md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
        <ng-md-icon icon="menu"></ng-md-icon>
      </md-button>
      <h3>
        Dashboard
      </h3>
      <span flex></span>
      <md-button aria-label="Search" ng-click="showSearch = !showSearch">
        <ng-md-icon icon="search"></ng-md-icon>
      </md-button>
      <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
        <ng-md-icon icon="more_vert"></ng-md-icon>
      </md-button>
    </div>
    <md-tabs md-stretch-tabs class="md-primary" md-selected="data.selectedIndex">
      <md-tab id="tab1" aria-controls="tab1-content">
        Latest
      </md-tab>
      <md-tab id="tab2" aria-controls="tab2-content">
        Favorites
      </md-tab>
    </md-tabs>
  </md-toolbar>

is a great example of a material toolbar.

Also keep in mind that the input has no special integration with the toolbar, so you might have some problems.

来源：https://stackoverflow.com/questions/39982418/how-can-i-design-a-google-like-nav-bar-using-angular-material

标签

html

css

material-design

angular-material