代码之家 › 专栏 › 技术社区 › Paco Zevallos

不同颜色的活动按钮,带引导和角形按钮

bootstrap-4 angular

Paco Zevallos · 技术社区 · 6 年前

我有一个菜单,有四个按钮,激活时有一个定义的颜色,但这个颜色是为所有四个,相同的滚动。有没有办法为每个按钮定义一种颜色,包括活动状态和滚动?

.html文件

<div class="d-flex justify-content-center">
    <ul class="nav nav-pills subNav">
      <li class="nav-item" *ngFor="let linea of lineas">
        <a class="nav-link rounded-circle p-3 m-2 m-lg-3" routerLink="{{linea.url}}" routerLinkActive="active" >
          <img class="iconProduct" src="{{ linea.image }}">
        </a>
        <p class="small text-center">{{ linea.titulo }}</p>
      </li>
    </ul>
  </div>

this.lineas = [
      { image: 'assets/images/icon1.svg', url:'url1', titulo: 'title1'},
      { image: 'assets/images/icon2.svg', url:'url2', titulo: 'title2' },
      { image: 'assets/images/icon3.svg', url:'url3', titulo: 'title3'},
      { image: 'assets/images/icon4.svg', url:'url4', titulo: 'title4' }
      ]

.scss文件

.subNav .nav-link {
  background-color: #d5d5d5;
}

2 回复 | 直到 6 年前

ConnorsFan 6 年前

设置背景色的一种方法 active hover 每个按钮的状态不同 :nth-child CSS伪类:

.subNav > .nav-item:nth-child(1) > .nav-link:hover,
.subNav > .nav-item:nth-child(1) > .nav-link.active {
  background-color: orange;
}

.subNav > .nav-item:nth-child(2) > .nav-link:hover,
.subNav > .nav-item:nth-child(2) > .nav-link.active {
  background-color: green;
}

.subNav > .nav-item:nth-child(3) > .nav-link:hover,
.subNav > .nav-item:nth-child(3) > .nav-link.active {
  background-color: red;
}

.subNav > .nav-item:nth-child(4) > .nav-link:hover,
.subNav > .nav-item:nth-child(4) > .nav-link.active {
  background-color: blue;
}

看见 this stackblitz 演示一下。

另一种方法是在数据结构中定义活动状态颜色:

this.lineas = [
  { image: 'assets/images/icon1.svg', url:'url1', titulo: 'title1', activeColor: 'lime' },
  { image: 'assets/images/icon2.svg', url:'url2', titulo: 'title2', activeColor: 'green' },
  { image: 'assets/images/icon3.svg', url:'url3', titulo: 'title3', activeColor: 'red' },
  { image: 'assets/images/icon4.svg', url:'url4', titulo: 'title4', activeColor: 'blue'}
];

并将其应用于链接的背景样式时 积极的 已设置类:

<a #link [style.background-color]="isActive(link) ? linea.activeColor : null" ...>

isActive(link): boolean {
  return link.classList.contains("active");
}

看见 this stackblitz 演示一下。您会注意到我为 悬停 在这种情况下说明:

.subNav > .nav-item > .nav-link:hover {
  background-color: #c0c0c0;
}

您可能需要处理鼠标 enter 和 leave 如果要在鼠标悬停在链接上时应用数据中定义的自定义背景色,则会发生事件。

SiddAjmera 6 年前

routerLinkActive 分配了一个类,该类应该应用于 active li 积极的 是本例中的类。

尝试添加

.active .subNav .nav-link {
  background-color: #d5d5d5;
}