可以在没有 Angular 的情况下使用 Clarity 吗？

Question

近年来，我主要使用 Bootstrap3 来处理 css 和响应能力，但几周前我偶然发现了 Clarity Project. The one thing I cannot understand is related to Angular Components that is commonly mentioned in documentation. Example could be found here。后面的 link 提到 HTML-esque 标签，如 <clr-dropdown>...</clr-dropdown> 或 <clr-icon>...</clr-icon>。我是否理解正确，这种标签的使用只有在使用 Angular 时才有意义，否则它们将被忽略？

我没有使用 Angular 的经验，我也不打算学习它，但是以这种方式使用这些 Clarity 组件而不是 Angular 会非常棒。有人试过吗？这样做有意义吗？我没有在文档中找到答案，所以如果能在这里得到答案，我将不胜感激。

提前致谢。

Answer 1

清晰度有 CSS 和 Angular 个组成部分。 CSS 任何组件的样式都是通过 clarity-ui 包提供的，clarity-angular 包有一些更复杂组件的 Angular 实现。例如，仅 CSS 数据网格是不可能的，因此 Angular 组件是使用数据网格的唯一方法。但是，如果您想使用数据网格 CSS 并构建您自己的数据网格实现，您可以自由地这样做。文档页面 https://vmware.github.io/clarity/documentation 显示了具有 Angular (NG) 组件的组件列表。

今天要获得最佳的 Clarity 体验，您需要使用 Angular 来访问所有组件和实现，否则您将无法构建 Javascript 实现对于 CSS 无法支持的复杂行为。

Answer 2

Clarity Project 实际上是无框架的 UI/UX 指南。

他们的文档似乎与 angular 有着非常紧密的关系，但实际上并非如此。至于你的问题

<div class="dropdown open">
    <button type="button" class="dropdown-toggle btn btn-link">
        Dropdown Toggle
        <clr-icon shape="caret down"></clr-icon> <!-- Notice here -->
    </button>
    <div class="dropdown-menu">
        <h4 class="dropdown-header">Dropdown header</h4>
        <button type="button" class="dropdown-item">Lorem.</button>
        <button type="button" class="dropdown-item">Lorem ipsum.</button>
        <button type="button" class="dropdown-item">Lorem ipsum dolor.</button>
        <div class="dropdown-divider"></div>
        <button type="button" class="dropdown-item">Link</button>
    </div>
</div>

我从例子中拿了这个。正如您所看到的，上面的树实际上没有任何 angular 定义的元素，除了 <clr-icon> （如果需要，它只能通过 JavaScript 注入到 DOM 而没有 angular.)

css 样式可以单独使用，并且可以构建具有清晰设计指南的 Web 应用程序，css 没有，但如果您现在需要该功能，Clarity 项目仅适用于Angular2-5+.

Answer 3

你可以，只要你不需要像 SPA 一样的高级交互来工作开箱即用。这意味着，例如下拉菜单、模式、日期选择器、向导...

大多数用户交互功能无需使用 Angular 即可实现，但在大多数情况下，这样做确实很痛苦。您必须了解后台发生的事情并编写自己的 JavaScript 处理程序来模拟通常由 Angular 组件完成的操作。

关于用户交互，您绝对可以使用下拉菜单、响应式侧边菜单和模式。对于静态元素，您可能可以使用您在文档中看到的所有内容。尽管有时您必须挖掘通过基于 Angular 的示例生成的 HTML 代码。

注意：我已经成功地将 Clarity UI 用于许多没有 Angular 的仪表板，并取得了令人满意的成功。

可以在没有 Angular 的情况下使用 Clarity 吗？

Can one use Clarity without Angular?

angular

vmware-clarity