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

【问题标题】：How can I design a Google+ like, nav-bar using angular material如何使用角材料设计类似 Google+ 的导航栏
【发布时间】：2016-10-11 16:44:00
【问题描述】：

如何设计一个导航栏，其风格与 Google+ 所使用的一样角料？

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

我想为一个应用制作一种类似于 G+ 的风格，因为它非常好，适合那个。

【问题讨论】：

然后用呢？你的实际问题是什么......

标签： html css material-design angular-material

【解决方案1】：

给你！它与设计不完全一样，但对您来说是一个很好的起点。 http://codepen.io/mackelito/pen/VKxGmR

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

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

在头部标签中

【讨论】：

感谢您提供出色的代码，但它没有响应，我怎样才能让它响应
我猜你正在使用像 bootstrap、materials 或类似的框架......？如果没有，那就看看吧
我使用 angularjs 材料
我知道但 tnx ^_^

【解决方案2】：

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

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

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

【讨论】：