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

Question

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

组件.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 */
}

这是渲染：

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

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

渲染：

我想要达到的目标：

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

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

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

我想要实现的类似渲染：

Answer 1

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

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

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

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>

Answer 2

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