I want to create a menu that looks like the one in AngularJs Material website ( https://material.angularjs.org ) Unfortunately there is not documentation or demo to do that. Any ideas? Thanks

angularjsangular-material

Claudio Ɯǝıs Mulas

Reputation: 1113

Create a menu like in AngularJs Material website

I want to create a menu that looks like the one in AngularJs Material website (https://material.angularjs.org)

angularjs material menu

Unfortunately there is not documentation or demo to do that.

Any ideas?

Thanks

Upvotes: 37

Answers (7)

Andrew Clavin

Reputation: 574

You don't NEED any of this, if you want an identical UX and appearance, I guess there is no reason not to import the service and all. But, if all you want is the collapsability you could solve this with the ng-class directive without importing much; depending how you have your scope setup you might need a different variable for each collapsable zone, something like this:

<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>

In your controller $scope declarations

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

and then in your css something like

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

Upvotes: 1

Kailas

Reputation: 7578

Just check out the answer here: https://stackoverflow.com/a/38258961/1904479,

The http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html has a good implementation of the accordion or the expandable list views.

Upvotes: 1

John Rix

Reputation: 6693

There are at least a few pre-built directives for this now... a couple of examples:

Upvotes: 10

britztopher

Reputation: 1234

You can create your own side menu with their directives menuToggle and menuItem, and their menu service, which are found in their source files. I have used this menu in many projects, so I know it works. All you have to do is implement it the same way. I have wrote a blog post that goes through this found here:

How to create an Angular Material Side Menu

Upvotes: 32

futurexiong

Reputation: 408

As @Splaktar says, you can wait for the official mdListiItem in milestone 0.9.0.

And you can also checkout the whole angular-material project source code and look into here https://github.com/angular/material#building or README.md to build the docs.

First install or update your local project's npm tools:

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

Then run the gulp tasks:

# 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

Then you should see the codes you need in 'docs.js', 'css/docs.css' and 'index.html' in the output folder 'dist/docs'.

The 'docs.js' in 'dist/docs' is different from the 'docs.js' in the origin 'docs' folder. Many codes are generated and concated together when you build the docs including those you need.

After you build the docs, the fastest way to get the codes you need is to search 'menuToggle' or 'menuLink' directive or 'menu' factory in 'dist/docs/docs.js'.

Hope this can help you.

Upvotes: 3