sidenav - Crea un menú como en el sitio web de Material de AngularJs
loading angularjs material (7)
Como dice @Splaktar, puedes esperar al mdListiItem oficial en el hito 0.9.0.
Y también puede consultar el código fuente completo github.com/angular/material proyecto de github.com/angular/material y buscar aquí https://github.com/angular/material#building o README.md para compilar los documentos.
Primero instale o actualice las herramientas npm de su proyecto local:
# First install all the NPM tools:
npm install
# Or update
npm update
Luego ejecuta las tareas de trago:
# 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
Entonces debería ver los códigos que necesita en ''docs.js'', ''css / docs.css'' e ''index.html'' en la carpeta de salida ''dist / docs''.
El ''docs.js'' en ''dist / docs'' es diferente de ''docs.js'' en la carpeta ''docs'' de origen. Muchos códigos se generan y se unen al compilar los documentos, incluidos los que necesita.
Después de compilar los documentos, la forma más rápida de obtener los códigos que necesita es buscar la directiva ''menuToggle'' o ''menuLink'' o ''menú'' de fábrica en ''dist / docs / docs.js''.
Espero que esto le pueda ayudar.
Quiero crear un menú que se parezca al del sitio web Material de AngularJs ( https://material.angularjs.org )
Desafortunadamente no hay documentación o demo para hacer eso.
¿Algunas ideas?
Gracias
Hay al menos algunas directivas preconstruidas para esto ahora ... un par de ejemplos:
Podrías echarle un vistazo al acordeón de angularui. http://angular-ui.github.io/bootstrap/
Solo mira la respuesta aquí: https://.com/a/38258961/1904479 ,
El http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html tiene una buena implementación del acordeón o las vistas de la lista expandible.
Tendrá que esperar a que mdListItem admita un control de expansión / colapso. Esto está tentativamente programado para 0.9.0.
Usted NO NECESITA nada de esto, si desea una apariencia UX idéntica y apariencia, supongo que no hay razón para no importar el servicio y todo. Pero, si todo lo que quiere es la capacidad de colapso, podría resolverlo con la directiva ng-class sin importar mucho; dependiendo de cómo tenga su configuración de alcance, es posible que necesite una variable diferente para cada zona colapsable, algo como esto:
<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>
En tu controlador $ scope declarations
$scope.collapsedA = true //if you want it to start collapsed
y luego en tu CSS algo así como
.collapsable{
transition: all .2s ease-in-out;
min-height: 20px;
overflow: hidden;
}
.collapsable.collapsed{
height: 0;
min-height: 0;
}
Puede crear su propio menú lateral con sus directivas menuToggle y menuItem , y su menu service , que se encuentran en sus archivos fuente. He utilizado este menú en muchos proyectos, así que sé que funciona. Todo lo que tienes que hacer es implementarlo de la misma manera. He escrito una publicación de blog que pasa por esto que se encuentra aquí: