es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Angular: Alternar el Sidenav con iconos en 3 componentes

15 Jul, 2023 Programación

Estoy intentando desarrollar una página de inicio que activa/desactiva un sidenav, lo cual he logrado con éxito. Sin embargo, si el sidenav está cerrado, aún quiero mostrar los íconos en el lado izquierdo en lugar de íconos y texto (cuando está abierto).
Tengo tres componentes: app, header y side-nav.

El activador está en el componente del encabezado y he creado un enlace de evento para que el texto en el sideNav desaparezca cuando se activa/desactiva. El problema es que la página no se ajusta como consecuencia y el sidenav sigue siendo del mismo tamaño pero con menos texto.
Por favor, vea el código a continuación (sólo he tomado un fragmento de código que creo que es relevante para este problema).

No estoy seguro si esto es un problema de typescript o algo de CSS.

header.html

header.ts

@Output() onToggleSideNav: EventEmitter = new EventEmitter();

toggleSideNav() {
this.onToggleSideNav.emit();
}

app.html









app.ts

sideNavOpen: boolean = true;
sideNavToggler() {
this.sideNavOpen = !this.sideNavOpen
}

sidenav.html



home

Inicio


sidenav.ts

@Input() isExpanded: boolean = true;

enter image description here

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema que estás enfrentando es más un problema de CSS que de TypeScript.

    Cuando el sidenav está cerrado, quieres que los íconos permanezcan visibles en el lado izquierdo, pero que el contenedor del sidenav ajuste su tamaño en consecuencia. Para lograr esto, puedes agregar una clase de CSS al contenedor cuando el sidenav esté cerrado y definir un nuevo ancho para él.

    Aquí tienes un ejemplo de cómo puedes lograr esto:

    header.ts

    Agrega una nueva propiedad para realizar un seguimiento del estado del sidenav:

    isSideNavOpen: boolean = true;

toggleSideNav() {
  this.isSideNavOpen = !this.isSideNavOpen;
  this.onToggleSideNav.emit(this.isSideNavOpen);
}

    app.html

    Agrega un nuevo enlace de clase al elemento mat-drawer-container:

    <mat-drawer-container [class.closed]="!sideNavOpen">
  ...
</mat-drawer-container>

    app.scss

    Define un nuevo ancho para el elemento mat-drawer-container cuando la clase closed esté presente:

    mat-drawer-container {
  transition: width 0.2s ease-in-out;
  width: 260px;

  &.closed {
    width: 64px;
  }
}

    Con estos cambios, cuando el sidenav esté cerrado, se agregará la clase closed al elemento mat-drawer-container, lo que activará la transición de CSS a un ancho más pequeño. Los íconos permanecerán visibles en el lado izquierdo y el contenedor del sidenav ajustará su tamaño en consecuencia.

    Espero que esto te ayude. Hazme saber si tienes alguna pregunta adicional.

Comments are closed.