完美的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>

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

如果它可以帮助任何人！

我通过基础设施学使用了igniteui-angular。 链接到component documentation

这里是link for npm软件包和文档。

这是底部导航的呈现：

尽管！我想知道是否有人将mat-toolbar与CSS结合使用以实现上述目的。

Answer 2

不是使用调用功能来使用routerlink进行导航，而是使用routerlinkActive来检查已激活的路线并相应地编写css，而不是调用功能来在路线之间进行导航

Answer 3

您可以使用事件检测和一些 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>