javascript - 无论如何，我们是否可以添加箭头以支持 Angular 小屏幕中更多 li nav-items 的可见性？

Question

subComponents: any = [
    { label: 'test1', path: 'test1' },
    { label: 'test2', path: 'test1' },
    { label: 'test3', path: 'test3' },
    { label: 'test4', path: 'test4' },
    { label: 'test4', path: 'settings' },
    { label: 'test5', path: 'test5' },
    { label: 'test6', path: 'test6' },
    { label: 'test7', path: 'test7' },
    { label: 'test8', path: 'test8' },
    { label: 'test9', path: 'test9' },
    { label: 'test10', path: 'test10' }
  ];

<ul id="demoTabs" class="nav" role="tablist">
  <li class="nav-item" *ngFor="let tab of subComponents">
    <span [textContent]="tab.label"></span>
  </li>
</ul>

我正在寻找一种将导航箭头添加到我的 li 导航循环的解决方案，如果所有选项卡都可见，则如果屏幕尺寸较小，则较大的屏幕将起作用，然后隐藏箭头。

有什么办法可以实现这样的目标吗？

下面是我的堆栈闪电战。

https://stackblitz.com/edit/clarit-tabs-with-router-static-6ruaac

标签： javascripthtmlcssangulartypescript