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

Question

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

现在我正在尝试使用一些导航项和用户名创建我网站的顶部导航栏。但这似乎不起作用。看来我缺少一些其他组件 (@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 Core Components 的新项目。这个 link 似乎没什么用：https://clarity.design/get-started/developing/

Answer 1

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

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

Setting up VMware Clarity project using core components

css

vmware

angular

vmware-clarity