创建一个像 AngularJs Material 网站中的菜单

Question

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

中的菜单

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

有什么想法吗？

谢谢

Answer 1

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

Answer 2

您需要等待 mdListItem 支持 expand/collapse 控件。暂定为 0.9.0。

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

Answer 3

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

您还可以签出整个 angular-material project source code and look into here 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' 不同。当您构建文档时会生成许多代码并将其连接在一起，包括您需要的代码。

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

希望对您有所帮助。

Answer 4

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

How to create an Angular Material Side Menu

Answer 5

现在至少有一些针对此的预构建指令...几个示例：

Answer 6

只需在此处查看答案：,

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

Answer 7

你不需要任何这些，如果你想要相同的用户体验和外观，我想没有理由不导入服务和所有内容。但是，如果你想要的只是可折叠性，你可以使用 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;
}

创建一个像 AngularJs Material 网站中的菜单

Create a menu like in AngularJs Material website

angularjs

angular-material