Question

我试图让VMware Clarity UI sidenav正常工作，并且会喜欢一个可靠的例子。我正在使用clear-seed项目和app.component.html里面我有他们提供的默认子中心：

<nav class="sub-nav" [clr-nav-level]="1">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="#" [routerLink]="['/home']"
               [class.active]="router.url==='/home' || router.url==='/'">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" [routerLink]="['/about']" [class.active]="router.url==='/about'">About</a>
        </li>
    </ul>
</nav>

我已用以下内容替换了他们的主页：

<nav class="sidenav">
    <section class="sidenav-content">
        <a class="nav-link" href="/test">Test</a>
    </section>
</nav>

sidenav正确显示，但点击Test链接会导致整个应用程序刷新，我的测试页面的内容显示在主页下，但是subnav消失了。如何将测试页面的内容显示在子窗口的右侧？您可以在此处查看代码的GIST：https://gist.github.com/MichaelRegert/6c5d9d3c8b52aa99d1dc66a314239f0e

Answer 1

请参阅此Plunk：https://plnkr.co/edit/3JnXm801uNlGWXz41BXD?p=preview

您的插件有两个问题：

您的布局结构不正确。我修正了上面发布的插件。由于flexbox的工作方式，.content-container是.main-container的直接子，.content-area和.sidenav是.content-container的直接子项。
使用sidenav进行路由时存在一些问题。我还没有解决上面的问题，因为这不是Clarity sidenav的一个问题，而是一般的角度路由问题。您应该为此打开一个单独的Stackoverflow问题。

如何正确使用vmware clear sidenav？

1 个答案: