在 AngularJs Material 网站中创建一个菜单答案

【问题标题】：Create a menu like in AngularJs Material website在 AngularJs Material 网站中创建一个菜单
【发布时间】：2015-02-08 01:46:35
【问题描述】：

我想创建一个类似于 AngularJs Material 网站 (https://material.angularjs.org) 中的菜单

很遗憾，没有文档或演示可以做到这一点。

有什么想法吗？

谢谢

【问题讨论】：

该页面的源码完全开放，从查看源码可以看到它是如何实现的。
没有像你看到的那样完全开放material.angularjs.org/docs.js
它是开源的…… :| github.com/angular/material
再来一次？是的，但是在材料 angularjs 网站中使用了一些不包含在项目中的海关指令和 css。在评论之前查看来源。
完全开放。从这里将菜单服务和 2 个菜单指令复制到您的应用程序中：github.com/angular/material/blob/master/docs/app/js/… 然后从这里获取菜单模板：github.com/angular/material/tree/master/docs/app/partials

标签： angularjs angular-material

【解决方案1】：

您可以使用它们的指令menuToggle 和menuItem 以及它们的menu service 创建自己的侧边菜单，这些指令可以在它们的源文件中找到。我在很多项目中都使用过这个菜单，所以我知道它有效。您所要做的就是以相同的方式实现它。我写了一篇博客文章，通过这里找到：

How to create an Angular Material Side Menu

【讨论】：

【解决方案2】：

现在至少有一些预先构建的指令......几个例子：

【讨论】：

我喜欢 angular-material-sidemenu
我也是，虽然最近尝试使用它，但一个挫折是无法以编程方式设置活动菜单项。

【解决方案3】：

正如@Splaktar 所说，您可以等待里程碑 0.9.0 中的官方 mdListiItem。

您还可以查看整个 angular-material 项目源代码并在此处查看 https://github.com/angular/material#building 或 README.md 以构建文档。

首先安装或更新本地项目的 npm 工具：

# First install all the NPM tools:
npm install
# Or update
npm update

然后运行 gulp 任务：

# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build
# To build the Angular Material Docs and Demos in `/dist/docs` directory
gulp docs

然后您应该在输出文件夹“dist/docs”中的“docs.js”、“css/docs.css”和“index.html”中看到您需要的代码。

“dist/docs”中的“docs.js”与原始“docs”文件夹中的“docs.js”不同。构建文档时会生成许多代码并将它们连接在一起，包括您需要的代码。

构建文档后，获取所需代码的最快方法是在“dist/docs/docs.js”中搜索“menuToggle”或“menuLink”指令或“menu”工厂。

希望对你有帮助。

【讨论】：

【解决方案4】：

只需在此处查看答案：https://stackoverflow.com/a/38258961/1904479，

http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html 很好地实现了手风琴或可扩展列表视图。

【讨论】：

【解决方案5】：

您不需要任何这些，如果您想要相同的用户体验和外观，我想没有理由不导入服务和所有内容。但是，如果你想要的只是可折叠性，你可以使用 ng-class 指令来解决这个问题，而无需导入太多；根据您的范围设置方式，您可能需要为每个可折叠区域使用不同的变量，如下所示：

<div data-ng-click="collapsableA = !collapsableA;">Toggle Click zone</div>
<div data-ng-class="{collapsed: 'collapsableA}" class="collapsable">
    Stuff that gets hidden
    <div>More stuff to hide</div>
</div>

在你的控制器 $scope 声明中

$scope.collapsedA = true //if you want it to start collapsed

然后在你的 css 中类似

.collapsable{
    transition: all .2s ease-in-out;
    min-height: 20px;
    overflow: hidden;
}
.collapsable.collapsed{
    height: 0;
    min-height: 0;
}

【讨论】：

【解决方案6】：

您需要等待mdListItem 支持展开/折叠控件。这暂定为 0.9.0。

见https://github.com/angular/material/issues/985

【讨论】：

【解决方案7】：

你可以看看 angularui 的手风琴。 http://angular-ui.github.io/bootstrap/

【讨论】：

如果可以避免的话，混合 Angular Material 和 Angular-ui 并不是一个好主意。尤其是从长远来看。