Créer un menu comme dans le site Matériel AngularJs

Il y a au moins quelques directives pré-construites pour cela maintenant... quelques exemples:

• Matériau angulaire-sidenav
• angulaires-le matériel-les sidemenu

Comme le dit @Splaktar, vous pouvez attendre le mdlistiitem officiel dans milestone 0.9.0.

Et vous pouvez également extraire tout le code source du projetangular-material et regarder ici https://github.com/angular/material#building ou README.md pour construire les documents.

Installez ou mettez à jour D'abord les outils npm de votre projet local:

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

Ensuite, exécutez les tâches 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

Ensuite, vous devriez voir les codes dont vous avez besoin dans 'docs.js", " CSS / docs.css' et "index.html' dans le dossier de sortie 'dist/docs'.

Les ' docs.js' dans 'dist/docs' est différent de 'docs.js' dans le dossier 'Docs' d'origine. De nombreux codes sont générés et concoctés lorsque vous construisez les documents, y compris ceux dont vous avez besoin.

Après avoir construit les documents, le moyen le plus rapide d'obtenir les codes dont vous avez besoin est de rechercher la directive 'menuToggle' ou 'menuLink' ou l'usine 'menu' dans 'dist/docs/docs.js".

J'Espère que cela peut vous aider.

Il suffit de cocher la réponse ici: https://stackoverflow.com/a/38258961/1904479,

Le http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html {[2] } a une bonne implémentation de l'accordéon ou des vues de liste extensibles.

Vous n'avez pas besoin de tout cela, si vous voulez un UX et une apparence identiques, je suppose qu'il n'y a aucune raison de ne pas importer le service et tout. Mais, si tout ce que vous voulez est la réductibilité, vous pouvez résoudre cela avec la directive ng-class sans importer beaucoup; selon la façon dont vous avez configuré votre portée, vous pourriez avoir besoin d'une variable différente pour chaque zone collapsable, quelque chose comme ceci:

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

Dans votre contrôleur de $portée des déclarations

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

Et puis dans votre CSS quelque chose comme

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

Vous devrez attendre que mdListItem prenne en charge un contrôle expand/collapse. Ceci est provisoirement prévu pour 0.9.0.

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

Vous pourriez jeter un oeil à l'accordéon d'angularui. http://angular-ui.github.io/bootstrap/