Question

我想创建一个类似于AngularJs Material网站（https://material.angularjs.org）

的菜单

angularjs material menu

不幸的是，没有文档或演示可以做到这一点。

有什么想法吗？

由于

Answer 1

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

How to create an Angular Material Side Menu

Answer 2

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

Answer 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

然后，您应该在＆＃39; docs.js＆＃39;，＆＃39; css / docs.css＆＃39;中找到您需要的代码。和＆＃39; index.html＆＃39;在输出文件夹＆＃39; dist / docs＆＃39;。

＆＃39; docs.js＆＃39; in＆＃39; dist / docs＆＃39;不同于＆＃39; docs.js＆＃39;在原文＆＃39; docs＆＃39;夹。当您构建包含所需文档的文档时，会生成许多代码并将其合并在一起。

构建文档后，获取所需代码的最快方法是搜索“菜单切换”。或者＆＃39; menuLink＆＃39;指令或＆＃39;菜单＆＃39;工厂在＆＃39; dist / docs / docs.js＆＃39;。

希望这可以帮到你。

Answer 4

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

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

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

Answer 6

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

请参阅https://github.com/angular/material/issues/985

Answer 7

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

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

7 个答案: