web-dev-qa-db-fra.com

Créez un menu comme sur le site AngularJs Material

Je souhaite créer un menu qui ressemble à celui du site Web AngularJs Material ( https://material.angularjs.org )

angularjs material menu

Malheureusement, il n'y a pas de documentation ou de démonstration pour le faire.

Des idées?

Merci

angularjsangular-material
36
Claudio Ɯǝıs Mulas

Vous pouvez créer votre propre menu latéral avec leurs directives menuToggle et menuItem et leur menu service, qui se trouvent dans leurs fichiers source. J'ai utilisé ce menu dans de nombreux projets, donc je sais que cela fonctionne. Tout ce que vous avez à faire est de le mettre en œuvre de la même manière. J'ai écrit un article de blog qui passe par ceci trouvé ici:

Comment créer un menu latéral de matériau angulaire

31
britztopher

Il y a au moins quelques directives prédéfinies pour cela maintenant ... quelques exemples:

10
John Rix

Comme @Splaktar le dit, vous pouvez attendre le mdListiItem officiel dans le jalon 0.9.0.

Et vous pouvez également consulter le code source entier de angular-material project et regarder ici https://github.com/angular/material#building ou README.md pour créer les documents.

Commencez par installer ou mettre à jour les outils npm de votre projet local:

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

Puis lancez les tâches d'abat:

# 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'. 

Le 'docs.js' dans 'dist/docs' est différent du 'docs.js' du dossier Origin 'docs'. De nombreux codes sont générés et concassés lorsque vous créez les documents, y compris ceux dont vous avez besoin.

Une fois que vous avez créé la documentation, le moyen le plus rapide d’obtenir les codes dont vous avez besoin est de rechercher la directive 'menuToggle' ou 'menuLink' ou la 'fabrique' de menu dans 'dist/docs/docs.js'.

J'espère que cela peut vous aider.

3
futurexiong

Vous n'avez PAS BESOIN de tout cela, si vous voulez une 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, c'est la possibilité de repliement, vous pouvez résoudre ce problème avec la directive ng-class sans importer beaucoup; En fonction de la configuration de votre portée, vous aurez peut-être besoin d'une variable différente pour chaque zone réductible, par exemple:

<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 vos déclarations $ scope du contrôleur

$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;
}
1
Andrew Clavin

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

Le http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html a une bonne implémentation de la vue en liste accordéon ou extensible.

1
Kailas

Vous devrez attendre mdListItem pour prendre en charge un contrôle de développement/réduction. Ceci est provisoirement prévu pour 0.9.0. 

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

0
Splaktar