Voglio creare un menu che assomiglia a quella di sito AngularJs Material (https://material.angularjs.org)Creare un menu come nel sito AngularJs Materiale
Purtroppo non c'è documentazione o demo per farlo.
Qualche idea?
Grazie
È possibile creare il proprio menu laterale con le relative direttive menuToggle e menuItem e il loro menu service, che si trovano nei relativi file di origine. Ho usato questo menu in molti progetti, quindi so che funziona. Tutto ciò che devi fare è implementarlo allo stesso modo. Ho scritto un post sul blog che passa attraverso questo trovato qui:
Si potrebbe avere uno sguardo alla fisarmonica dal angularui. http://angular-ui.github.io/bootstrap/
Mixing Angular Material e Angular-ui non sono davvero una grande idea se possono essere evitati. Soprattutto a lungo termine. – Kryx
È necessario attendere mdListItem per supportare un controllo di espansione/compressione. Questo è provvisoriamente programmato per 0.9.0.
Come dice @Splaktar, è possibile attendere la mdListiItem ufficiale traguardo 0.9.0.
E puoi anche verificare l'intero codice sorgente del progetto angular-material e guardare qui https://github.com/angular/material#building o README.md per creare i documenti.
Per prima cosa installare o aggiornare gli strumenti NPM del vostro progetto locale:
# First install all the NPM tools:
npm install
# Or update
npm update
quindi eseguire i compiti 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
allora si dovrebbe vedere ii codici necessari a 'docs.js', ' css/docs.css 'e' index.html 'nella cartella di output' dist/docs '.
"docs.js" in "dist/docs" è diverso da "docs.js" nella cartella "docs" di origine. Molti codici vengono generati e concessi insieme quando si creano i documenti, inclusi quelli necessari.
Dopo aver creato i documenti, il modo più veloce per ottenere i codici necessari è cercare "direttiva MenuToggle" o "menuLink" o "menu" di fabbrica in "dist/docs/docs.js".
Spero che questo possa aiutarti.
ci sono almeno un paio di direttive pre-costruiti per questo ora ...un paio di esempi:
Mi piace il materiale angolare-sidemenu – Syclone
Anche a me, sebbene abbia provato a utilizzarlo più recentemente, una frustrazione non è in grado di impostare in modo programmatico la voce di menu attiva. –
Basta controllare la risposta qui: https://stackoverflow.com/a/38258961/1904479,
Il http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html ha una buona attuazione della fisarmonica o la vista elenco espandibile.
Non è necessario BISOGNO di questo, se si desidera un UX identico e aspetto, credo che non vi sia alcun motivo per non importare il servizio e tutto. Ma se tutto ciò che si desidera è la collassabilità, è possibile risolverlo con la direttiva di classe ng senza importare molto; a seconda di come avete la vostra configurazione ambito potrebbe essere necessario una variabile diversa per ogni zona pieghevole, qualcosa di simile:
<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>
Nelle tue dichiarazioni ambito del controllore $
$scope.collapsedA = true //if you want it to start collapsed
e poi nel CSS qualcosa come
.collapsable{
transition: all .2s ease-in-out;
min-height: 20px;
overflow: hidden;
}
.collapsable.collapsed{
height: 0;
min-height: 0;
}
l'origine per quella pagina è completamente aperta, è possibile vedere come è implementata dalla sorgente di visualizzazione. – Claies
Non così completamente aperto come puoi vedere https://material.angularjs.org/docs.js –
È open source ...: | https://github.com/angular/material –