一个完美的 Angular 材质底部导航栏。我缺少一个组件吗？

Question

我正在尝试实现一个移动风格的底部导航栏。为此，我使用了 mat-toolbar 并使用 css 将其固定在底部，如下所示：

component.html:

<mat-toolbar class="toolbarNav">
    <mat-icon class="material-icons color_blue" (click)="getTopArtists('long_term' , 0 , 100)">
        star_border</mat-icon>
    <mat-icon class="material-icons color_blue" (click)="getTopTracks('long_term' , 0 , 100)">favorite_border
    </mat-icon>
    <mat-icon class="material-icons color_blue" (click)="recentlyPlayed()">history</mat-icon>
</mat-toolbar>

组件.css

.toolbarNav{  
    position: fixed;
    bottom: 0; 
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    padding: 2em;
    background-color: white;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
   box-shadow:        2px 2px 4px 5px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

这里是渲染：

当用户将鼠标悬停在图标上时，我使用 css :hover 突出显示图标，如下所示：

.material-icons.color_blue:hover { 
  color: blueviolet;
}

渲染：

我想要达到的目标：

1. 当我单击/悬停在一个图标上时，它应该突出显示[我确实通过上面的代码实现了这一点]，但是，当单击/悬停在除工具栏中的其他图标之外的任何其他位置时，它不应该取消突出显示。

2. 我希望在图标下方显示一些文本，如下所示：

我尝试使用 <span> 并使用 css 定位文本，但它看起来很奇怪并且没有正确对齐。 另外，使用 css 是做上述事情的唯一方法吗？ 我对任何其他方式持开放态度。也许是具有类似组件的 UI 库？

我想要实现的类似渲染：

Answer 1

而不是调用函数在路由之间导航，使用 routerlink 进行导航，使用 routerlinkActive 检查激活的路由并相应地编写 css

Answer 2

您可以使用事件检测和一些 js。这是一个超级简单的概念示例：

const icons = document.getElementsByClassName('iconX')
const clearIcons = () =>{
  for (const icon of icons) {
    icon.classList.remove('active')
  }
}
for (const icon of icons) {
  icon.addEventListener('mouseenter', (event)=>{
     clearIcons();
     event.target.classList.add('active')
  })
}

.iconX{
    width: fit-content;
}
.iconX.active{
    color: red;
}

<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>
<div class="iconX">HELLO</div>

<div class="other content">This is different content , not a tab icon</div>

<button class="non important button">If you click me, you don´t loose the active status of your tabs</div>

Answer 3

只需在 stackblitz 中添加一个示例，这应该是一个好的开始。

我不能 100% 确定您想要第 1 点是什么，但我认为您希望活动按钮有一种颜色来表示这一点。为此，我使用了 Abhishek 的建议来使用 RouterLink 和 RouterLinkActive。通过添加routerLinkActive="active-link"，这意味着当路径匹配时将类添加到该元素，并且可以相应地设置样式。

对于图标下的文本，我只是让它始终显示，与提供的示例不同，但如果您希望它仅在活动时显示，您可以摆弄它。这是通过使按钮成为具有列的 flex 方向的 flex 容器来完成的。

https://stackblitz.com/edit/angular-9-material-starter-par7le?file=src/app/app.component.html

.toolbarNav {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  padding: 2em;
  background-color: white;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
  box-shadow: 2px 2px 4px 5px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

  button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    span {
      display: block;
    }
  }
}

button:hover,
.active-link {
  color: blueviolet;
}

<mat-toolbar class="toolbarNav">
  <button mat-flat-button routerLink="/top-artists" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">
      star_border</mat-icon>
    <span>Top Artists</span>
  </button>
  <button mat-flat-button routerLink="/top-tracks" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">favorite_border
    </mat-icon>
    <span>Top Tracks</span>
  </button>
  <button mat-flat-button routerLink="/history" routerLinkActive="active-link">
    <mat-icon class="material-icons color_blue">history</mat-icon>
    <span>History</span>
  </button>
</mat-toolbar>