vmware-clarity - 项目清晰度 - 固定导航

Question

我正在尝试使用 Project Clarity创建一个固定的导航栏

我在我的 Angular 项目中使用它，他们正在使用 FlexBox，我尝试安装position: fixed但它似乎不起作用，有人有什么想法吗？

<clr-header class="header-6">

标签： vmware-clarity

Answer 1

为了修复标题以便内容在其下方滚动，您的应用程序需要具有正确的Application Layout。我们的组件在这个结构中工作，因为A properly structured layout enforces an optimal, consistent experience across applications.

A Clarity Application 布局的一般结构采用以下形式：

<div class="main-container">
    <div class="alert alert-app-level">
        ...
    </div>
    <header class="header header-6">
        ...
    </header>
    <nav class="subnav">
        ...
     </nav>
     <div class="content-container">
        <div class="content-area">
            ...
         </div>
        <nav class="sidenav">
            ...
        </nav>
    </div>
</div>

显然，您可以摆脱可能与您的应用程序不相关的部分，例如：alert-app-level等subnav...

您可以在我从Bob Ross那里获得灵感制作的快速演示中看到这一点。如您所见，内容在应用程序标题下方滚动。