如何在vmware-clarity、Angular6中将sidenav导航链接的默认状态设置为closed

Question

当我在vmware-clarity中创建sidenav时，默认情况下nav-links和nav-groups都是打开的。

有没有办法让它们在默认情况下关闭？

 <ng-container *ngFor="let data of model">
    <a [routerLink]="data.routerLink" class="nav-link" *ngIf="data.items == null">
        {{data.label}}
    </a>
    <section class="nav-group collapsible"  *ngIf="data.items != null">
        <input id="{{data.label}}" type="checkbox">
        <label for="{{data.label}}">{{data.label}}</label>
        <ul class="nav-list">
            <li><a class="nav-link" *ngFor="let item of data.items" [routerLink]="item.routerLink">{{item.label}}</a></li>
        </ul>
    </section>
</ng-container>

以下是页面加载时它们的显示方式：

​

​

以及我希望在加载时发生的事情：

​

​

谢谢你的帮助！

Answer 1

所有你需要做的就是预先勾选你想要预先折叠的每个部分的复选框。使用您的示例，您需要在*ngFor循环中的checkbox输入上添加一个checked属性：

<input id="{{data.label}}" type="checkbox" checked>

下面是一个运行的示例，显示了一个开始折叠的部分和一个开始展开的部分：https://stackblitz.com/edit/clarity-sidenav-pre-collapsed?file=src/app/app.component.html这两个部分之间唯一的区别是checked属性。