Question

近年来，我主要使用Bootstrap3处理css和响应速度，但几周前我偶然发现https://stackoverflow.com/a/45879443/4984832。我无法理解的一件事与文档中常见的Angular Components有关。可以找到示例Clarity Project。后面的链接提到了像<clr-dropdown>...</clr-dropdown>或<clr-icon>...</clr-icon>这样的HTML式广告代码。我是否理解正确，使用Angular时这些标签的使用才有意义，否则会被忽略？

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

提前致谢。

Answer 1

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

要获得今天最佳的Clarity体验，您需要使用Angular来访问所有组件和实现，否则您将陷入困境，为CSS可以执行的复杂行为构建Javascript实现＆＃ 39; t支持。

Answer 2

Clarity项目实际上只是无框架UI / UX准则。

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

<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>

我从例子中拿了这个。如你所见，上面的树实际上没有任何角度定义的元素，除了（如果需要没有角度，只能通过Javascript注入dom。）

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

Answer 3

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

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

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

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

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

3 个答案: