4

近年来，我主要使用 Bootstrap3 来处理 css 和响应，但几周前我偶然发现了Clarity Project。我无法理解的一件事与文档中经常提到的 Angular 组件有关。示例可以在这里找到。后面的链接提到了 HTML 风格的标签，例如<clr-dropdown>...</clr-dropdown>or <clr-icon>...</clr-icon>。我是否理解正确，仅在使用 Angular 时使用此类标签才有意义，否则它们将被忽略？

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

提前致谢。

4

3 回答 3

5

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

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

于 2017-11-07T19:39:55.550 回答
1

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

大多数用户交互功能都可以在不使用 Angular 的情况下实现，但在大多数情况下，这样做真的很痛苦。您必须弄清楚后台发生了什么，并编写自己的 JavaScript 处理程序来模拟 Angular 组件通常所做的事情。

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

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

于 2018-12-12T01:16:09.327 回答
-1

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>

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

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

于 2017-11-07T19:40:25.123 回答