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

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

1 个答案: