Project Clarity - 固定导航

Question

创建一个固定的导航栏

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

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

Answer 1

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

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 I made with inspiration from Bob Ross 中看到它的工作原理。如您所见，内容在应用程序下方滚动 header。

Answer 2

如果有人也遇到这个问题，或者其他 css 在 Angular 中不起作用的问题：

由于我们主要在 Angular 中的多个组件中构造我们的 UI 代码，并且由于每个组件在实际 [=24] 之间的生成 DOM 中放置自己的主机标记=] 标签，清晰度库有一些问题。

因此，作为一种解决方法，如果您仍然希望能够保持当前的 html 不变，您可以在每个组件的 css 文件中定义此 css :

:host { display: contents; }

这会导致组件的盒子不渲染；意味着主机标签在 DOM 中仍然可见，但它们对 CSS 没有任何影响。任何清晰度 CSS 都会再次起作用。

Project Clarity - 固定导航

Project Clarity - Fixed Navigation

vmware-clarity