vmware-clarity - Project Clarity - 固定导航

Question

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

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

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

Answer 1

为了修复标题以便内容在其下方滚动，您的应用程序需要具有正确的 Application Layout .我们的组件在这种结构中工作，因为正确结构化的布局可以在应用程序中实现最佳、一致的体验。

Clarity 应用程序布局的一般结构采用以下形式:

<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 等...

您可以在 quick demo 中看到这个工作我的灵感来自 Bob Ross .如您所见，内容在应用程序标题下方滚动。