ich ein Menü erstellen möchten, die dort in AngularJS-Material Website (https://material.angularjs.org)Erstellen Sie ein Menü wie in AngularJS-Material Website
Leider wie das aussieht, ist keine Dokumentation oder Demo, das zu tun.
Irgendwelche Ideen?
Dank
Sie können Ihre eigene Seite im Menü mit ihren Richtlinien menuToggle und menuItem und ihre menu service erstellen, die in ihren Quelldateien zu finden sind. Ich habe dieses Menü in vielen Projekten verwendet, also weiß ich, dass es funktioniert. Alles, was Sie tun müssen, ist es auf die gleiche Weise zu implementieren. Ich habe eine Blog-Post schreibt, die hier durch geht:
Sie konnten einen Blick auf das Akkordeon von angularui haben. http://angular-ui.github.io/bootstrap/
Mixing Angular Material und Angular-Ui ist nicht wirklich eine gute Idee, wenn es vermieden werden kann. Besonders auf lange Sicht. – Kryx
Sie müssen auf mdListItem warten, um ein Steuerelement zum Erweitern/Reduzieren zu unterstützen. Dies ist vorläufig für 0.9.0 geplant.
Wie @Splaktar sagt, Sie für den offiziellen mdListiItem in Meilenstein 0.9.0 warten.
Und Sie können auch den gesamten angular-material Projekt Quellcode auschecken und schauen Sie hier https://github.com/angular/material#building oder README.md um die Dokumente zu erstellen.
Zuerst installieren oder Ihrem lokalen Projekt npm Tools aktualisiert:
# First install all the NPM tools:
npm install
# Or update
npm update
Dann werden die schluck Aufgaben ausführen:
# 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
Dann sollten Sie die Codes sehen Sie in 'docs.js' brauchen ' css/docs.css 'und' index.html 'im Ausgabeordner' dist/docs '.
Die 'docs.js' in 'dist/docs' unterscheidet sich von der 'docs.js' im Originaldokument 'docs'. Viele Codes werden generiert und zusammenkonstruiert, wenn Sie die Dokumente einschließlich der benötigten erstellen.
Nachdem Sie die Dokumente erstellt haben, ist der schnellste Weg, die benötigten Codes zu erhalten, die 'menuToggle' oder 'menuLink' Direktive oder 'menu' factory in 'dist/docs/docs.js' zu suchen.
Hoffe, das kann Ihnen helfen.
Es gibt mindestens ein paar vorgefertigten Richtlinien jetzt diese ...ein paar Beispiele:
Ich mag angular-material-sidemenu – Syclone
Ich auch, obwohl versucht, es in jüngerer Zeit zu verwenden, ist eine Frustration nicht in der Lage, den aktiven Menüpunkt programmatisch zu setzen. –
Sie hier die Antwort finden Sie unter: https://stackoverflow.com/a/38258961/1904479,
Die http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html hat eine gute Umsetzung des Akkordeons oder die erweiterbare Liste Ansichten.
Sie brauchen nichts davon, wenn Sie eine identische UX und Aussehen wollen, ich denke, es gibt keinen Grund, den Dienst und alle nicht zu importieren. Aber wenn Sie nur die Zusammenklappbarkeit wünschen, können Sie dies mit der ng-class-Direktive lösen, ohne viel zu importieren; je nachdem, wie Sie Ihren Umfang Setup haben Sie eine andere Variable für jede collapsable Zone in etwa so brauchen könnten,:
<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 Ihren Controller $ Erklärungen Umfang
$scope.collapsedA = true //if you want it to start collapsed
und dann in Ihrem CSS etwas wie
.collapsable{
transition: all .2s ease-in-out;
min-height: 20px;
overflow: hidden;
}
.collapsable.collapsed{
height: 0;
min-height: 0;
}
die Quelle für diese Seite ist vollständig geöffnet, Sie können sehen, wie es von der Ansichtsquelle implementiert wird. – Claies
Nicht ganz so offen, wie Sie sehen können https://material.angularjs.org/docs.js –
Es ist Open Source ...: | https://github.com/angular/material –