使用核心组件设置 VMware Clarity 项目答案

【问题标题】：Setting up VMware Clarity project using core components使用核心组件设置 VMware Clarity 项目
【发布时间】：2021-09-21 16:23:19
【问题描述】：

我正在尝试使用 VMware Clarity 和 Angular 设置我的新项目。我看到建议使用 @cds/* 库而不是角度库的新文档。这看起来很有趣，我喜欢它，因为将来它可以用任何其他框架替换 Angular。

现在要设置我的项目，我首先使用 Angular 12+ 版本创建了一个新的 Angular 项目，然后按照此处的说明为其添加 Clarity：

https://clarity.design/get-started/developing/#installation

npm install @cds/core @cds/city --save
在我的 styles.scss 文件中添加以下行：

// Sass file syntax
@import 'modern-normalize/modern-normalize.css'; // css reset
@import '@cds/core/global.min'; // clarity global styles
@import '@cds/core/styles/module.shims.min'; // non-evergreen browser shims
@import '@cds/city/css/bundles/default.min'; // load base font

现在我正在尝试使用一些 Navigation Iteam 和用户名创建我网站的顶部导航栏。但这似乎不起作用。我似乎缺少其他一些组件（@clr/ui？）。

    <div class="main-container">
  <header class="header">
    <div class="branding">
      <a class="nav-link">
        <span class="title"> Site Name </span>
      </a>
      <div class="header-nav">
        <a class="active nav-link nav-text">Home</a>
      </div>
    </div>
  </header>
  <div class="content-container">
    <div class="content-area">
      <p>
        <cds-tag status="danger"> Some Text </cds-tag>
      </p>
    </div>
  </div>
</div>

谁能帮我理解为什么这不起作用。我是否还需要添加@clr 相关组件。如果是，那么它会让整个事情再次变得非常混乱（为什么要同时添加 @clr 和 @cds ）。但是，任何人都可以为我指出一个正确的分步指南，以使用 Clarity 核心组件的新项目。这个链接似乎没有多大帮助：https://clarity.design/get-started/developing/

【问题讨论】：

标签： css angular vmware vmware-clarity

【解决方案1】：

到目前为止，您所做的只是添加了 Clarity 核心组件，因此您只能使用网站上核心组件下记录的内容。我们仍在构建一些组件，尤其是您在此处需要的 Header，因此您还可以添加 Clarity Angular ng add @clr/angular 以便能够使用 Angular 组件（其中还包括 @clr/ui 样式）。否则，您可以随时使用 Core 组件似乎走在正确的道路上。

【讨论】：