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

Question

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

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

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

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那里获得灵感制作的快速演示中看到这一点。如您所见，内容在应用程序标题下方滚动。

Answer 2

如果有人也有这个问题，或者某些 css 在 Angular 中不起作用的另一个问题：

由于我们主要在 Angular 中将 UI 代码构建在多个组件中，并且由于每个组件在生成的 DOM 中的实际 html 标签之间放置自己的主机标签，因此清晰度库存在一些问题。

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

:host { display: contents; }

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