首页 文章

如何正确使用vmware clear sidenav？

提问于
浏览 次
6

我正在努力让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

vmware clarity vmware-clarity

1 回答

  • 4

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

    你的插件有两个问题：

    • 您的布局结构不正确 . 我在上面发布的插件中修复了它 . 由于flexbox的工作方式， .content-container 是 .main-container 的直接子项，而 .content-area 和 .sidenav 是 .content-container 的直接子项 .

    • 使用sidenav进行路由时存在一些问题 . 我没有在上面的插件中修复它，因为这不是Clarity sidenav的问题，而是一般角度路由问题 . 您应该为此打开一个单独的Stackoverflow问题 .

    回复于

相关问题