angular - 当内容超出视图时，Clarity Design sidenav 无法滚动

Question

所以我目前正在使用sidenav，但是当导航链接超出视图时，除非我缩小，否则我无法滚动查看“隐藏”链接。

我使用 Angular 5 作为前端框架，这就是我安排组件的方式：

<nav class="sidenav">
  <students>
  </students>
</nav>

在学生组件内部：

<section class="sidenav-content">
  <section class="nav-group">
    <label>Alumnos</label>

    <ul class="nav-list">
      <li *ngFor="let student of students | orderBy: 'number'">
        <a
          class="nav-link"
          [class.active]="studentIdSelected == student.id"
          (click)="selectStudent(student)">
        {{ student.number }} - {{ student.name }}
        </a>
      </li>
      <li>
        <a class="nav-link" (click)="addStudent()">Agregar alumno</a>
      </li>
    </ul>
  </section>
</section>

我不确定我是否遗漏了任何东西，因为我遵循了文档并希望获得滚动选项。

Answer 1

您是否正确使用了布局？可以在此处找到有关布局的更多信息：https ://vmware.github.io/clarity/documentation/v0.11/app-layout

请看一下这个 StackBlitz：https ://stackblitz.com/edit/clarity-light-theme-v11-mkudjf?file=app/app.component.html

布局标记是：

<div class="main-container">
  <header class="header-2">
    Header
  </header>
  <div class="content-container">
    <div class="content-area">
      Content Area
    </div>
    <nav class="sidenav">
       ...
    </nav>
  </div>
</div>

.sidenav追随_.content-area

编辑：请注意，Clarity 团队建议您使用 Vertical Nav 而不是 sidenav。垂直导航的文档在这里：https ://vmware.github.io/clarity/documentation/v0.11/vertical-nav/basic-structure/charmander