javascript - 一个完美的 Angular Material 底部导航栏。有没有我缺少的组件？

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 */
}

这是效果图:

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

.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>