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

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 循环中复选框输入的 checked 属性：

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

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

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

How to set default state to closed for sidenav nav-links in vmware-clarity, Angular6

electron

angular

vmware-clarity

angular6