如何使用角度材料设计类似Google+的导航栏

Question

如何设计类似于Google+使用的导航栏 角料？

我不知道如何获取此导航栏，并且搜索框采用这种方式设置， 它认为谷歌制作的材料设计用于此，但我无法在角度材料实现中看到这样的东西。

我想为一个应用程序创建一个类似于G +的样式，因为它非常好并适合那个。

Answer 1

你走了！ 它不是设计，但它是一个很好的起点.. http://codepen.io/mackelito/pen/VKxGmR

注意：它只是占位符所以没有功能......玩得开心！ :) 对于我添加的图标

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

头标记中的

Answer 2

首先，角度材料无法以特定样式输入输入。它实现了材料规范;事实证明，即使谷歌也没有完全遵循它。谷歌+其他各种谷歌应用程序上的导航栏不在规范中。 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>

是材质工具栏的一个很好的例子。

另请注意，输入与工具栏没有特殊的集成，因此您可能会遇到一些问题。