0

Estoy haciendo una aplicación web con Angular v11 y bootstrap v4.6.

Tengo un componente que será re-utilizable por muchos, se encarga de pintar un navbar, recibiendo el arreglo de items que tendrá el menú y el color que se usará para el active/hover.

Componente:

@Component({
  selector: 'app-navbar-sub-category',
  templateUrl: './navbar-sub-category.component.html',
  styleUrls: ['./navbar-sub-category.component.scss']
})
export class NavbarSubCategoryComponent {

  @Input() items: INavbarSubCategoryItem[];

}

SCSS:

.navbar-custom {
  margin: -1.25rem -1.25rem;
  background-color: #F1EBEB;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
  color: #868898;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
  color: #F00073;
}

Template:

<nav class="navbar navbar-custom navbar-expand-sm justify-content-center">

  <ul class="navbar-nav">
    <li class="nav-item" routerLinkActive="active" *ngFor="let m of items">
      <a class="nav-link" [routerLink]="m.route">{{m.title}}</a>
    </li>
  </ul>

</nav>

Queda pendiente recibir el color que se usará como el hover/active, cosa que no he podido lograr.

He intentado:

Componente:

@Input() activeColor: 'pink' | 'blue';

SCSS:

/* change the color of active or hovered links */
.pink {
  .navbar-custom .nav-item.active .nav-link,
  .navbar-custom .nav-item:hover .nav-link {
    color: #F00073;
  }
}

Pensé también pasar el código del color (HEX), pero, no se cómo colocarlo en el SCSS dinámicamente.

Mi objetivo es pasar vía el Input() el color (o clase para tomar el color) del hover/active que tendrán los menus.

1 respuesta 1

0

con @Input tienes que darle un nombre a la variable que recibes:

@Input() color = 'pink' // <-- aqui solo el predeterminado

de esta forma llamas al componente pasandole el color:

<app-navbar-sub-category [color]="blue"></app-navbar-sub-category> // <-- aqui cambiarias el pink predeterminado a blue.

una vez recibes el color, que sera el nombre de la clase, lo puedes aplicar con ngClass, de esta manera:

<nav class="navbar navbar-custom navbar-expand-sm justify-content-center" [ngClass]="{'pink': color === 'pink', 'blue': color === 'blue'}">

y asi en cualquier parte donde quieras aplicar la clase que recibes por @Input.

espero haberte ayudado con esto.

añadido*

el :hover es un complemento de la clase que sa activa al pasar el raton por encima. si lo que necesitas es que se ponga pink solo cuando pases por encima, yo crearia una clase nueva por ejemplo .pinkOnOver:hover{background-color:pink} y le asignas con ngClass a los componentes que no tengan la clase 'pink'(que ya estan con fondo rosa) de la misma manera:

[ngClass]="{'pinkOnOver': color === 'pink', 'blueOnOver': color === 'blue'}"

las etiquetas que tengan esa clase se pondran con fondo rosa(o azul) al pasar por encima, independientemente de las demas clases que tengan.

para el .active yo en concreto utilizo una "receta propia" porque nunca me he llevado bien con los ::ngdeep.

yo lo que hago es crear una variable de seleccion de categoria, y asigno la clase de seleccion con ngClass segun esa variable.

var selectedCategory: string;

luego le pongo un evento (click) en el elemento html seleccionable, `(click)="selectedCategory='coches'" //por ejemplo

y luego le aplico el NgClass quedando el elemento de esta manera:

   <li class="nav-item" routerLinkActive="active" *ngFor="let m of items" [ngClass]="{'pinkOnOver': color === 'pink' && selectedCategory == 'coches', 'blueOnOver': color === 'blue' && selectedCategory == 'coches'}" (click)="selectedCategory = 'coches'">

seguro que no es lo mas elegante del mundo, pero resuelve el problema

2
  • Mi problema actual es que no se como asignarle el color a la clase .navbar-custom .nav-item:hover .nav-link. Usando ngClass solo puedo activar o desactivar clases regulares, pero y para un hover/active? para cambiar el color del mismo? Ese es mi actual problema.
    – RRGT19
    el 7 jun. 2021 a las 12:33
  • edito la respuesta, que me estoy alargando mucho en el comentario.. el 7 jun. 2021 a las 12:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.