Token: Menu
Permite agregar un side menú al aplicativo, redireccionar desde este o aplicar acciones desde las opciones del menú
Estandariza el formato y arquitectura de los side menu, al mismo tiempo que, reduce considerablemente el tiempo de implementación.
- Ahora cuando se selecciona una opción de ruta en la que ya se encuentra, se muestra un mensaje indicando que ya esta en la ruta.
- Ahora el menu funciona responsive, mostrandose de un modo en móvil y otro en desktop
Está compuesta por un módulo y su respectivo componente visual cl-menu a continuación se detalla sus diferentes atributos:
- Id: string(Requerido): Este identificador debe ser único para evitar cruce de registros cuando se use en el componente en una misma vista n cantidad de veces
- Logo: string(Opcional): Establece la dirección de un recurso para mostrar un logotipo
- Title: string(Opcional): Linea de texto del titulo, puede utilizarse para mostrar el nombre de la compañia o de la aplicación
- User: string(Opcional): Linea de texto del usuario, puede utilizarse para indicar el nombre o correo del usurio activo
- Toggle: boolean(Opcional): Definie si el side menú inicia oculto o se muestra.
- Por defecto se inicializa en verdadero
- Nodes: IMenuNode[](Requerido): Define una lista multi-nivel de nodos para mostrar en las opciones, cada nodo puede tener un conjunto de sub-nodos a mostrar.
- Primero debemos cumplir las depencias mencionadas al inicio de este documento
- Ejecutar el comando
npm i @clavisco/menu
en el directorio root del proyecto- Importar el módulo MenuModule en el app.module.ts o en el módulo donde desea utilizar el login.
- Inyectar el servicio de Linker en el controlador para realizar la comunicación con el componente
constructor(@Inject('LinkerService') private linkerervice: LinkerService)
- Ejemplo de implementacion del componente en el template html
<cl-menu [Id]="MenuId" [Logo]="Logo" [Title]="Title" [User]="User" [Nodes]="Nodes"> Contenido de la aplicación <router-outlet></router-outlet> </cl-menu>Nota: Se recomienda definir el router-outlet dentro del contenido del menu para cargar el menu siempre al margen del contenido y evitar errores donde le menu no se carga, pero si el contenido. 6. Si quiere definir la acciones a ejecutar cuando se acciona una opcion del menu puede registrar un evento de tipo OUTPUT asignando la siguiente función como se muestra en el ejemplo:
ngOnInit(): void { Register<CL_CHANNEL>(this.MenuId, CL_CHANNEL.OUTPUT, this.OnMenuOption, this.callbacks); } OnMenuOption = (_event: ICLEvent): void => { if (_event) { const NODE_OPTION = JSON.parse(_event.Data); if(NODE_OPTION.Key === 'exit'){ // Some code to do on "exit" option select } } }
- Para actualizar todos los nodos del menú puede publicar un evento de tipo INFLATE como se muestra en el ejemplo:
this.linkerService.Publish( { CallBack: CL_CHANNEL.INFLATE, Data: JSON.stringify(this.MenuNodes), Target: this.MenuId } );
- Para actualizar un único nodo del menú puede publicar un evento de tipo INPUT como se muestra en el ejemplo:
this.linkerService.Publish( { CallBack: CL_CHANNEL.INPUT, Data: JSON.stringify( { Node: this.MenuNode, Expanded: true } ), Target: this.MenuId } );Nota: El Key del nodo debe ser el mismo que el ya existente en el menú. 9. Si desea mostrar u ocultar el menú puede publicar un evento de tipo DATA_LINE_1 como se muestra en el ejemplo:
this.Toggle = !this.Toggle; this.linkerService.Publish({ CallBack: CL_CHANNEL.DATA_LINE_1, Target: this.MenuId, Data: JSON.stringify(this.Toggle) } as ICLEvent);
- Ya con esto tenemos una implementación básica del componente menu
- Video donde encontrar video explicativo sobre el uso de
@clavisco/menu
ClavisCo ©