kovalenko-alex
kovalenko-alex

Reputation: 183

Can one use Clarity without Angular?

In recent years I've been mostly using Bootstrap3 for handling css and responsiveness, but a few weeks ago I stumbled on Clarity Project. The one thing I cannot understand is related to Angular Components that is commonly mentioned in documentation. Example could be found here. The later link mentions HTML-esque tags like <clr-dropdown>...</clr-dropdown> or <clr-icon>...</clr-icon>. Did I understood it correctly, that usage of such tags only makes sense when using Angular and they will be ignored otherwise?

I have no experience with Angular and I do not intend to learn it, but using these Clarity components in such fashion witjout Angular would be pretty awesome. Have anyone tried it? Does it even makes sense to do so? I haven't found answer in Documentation, so I would be grateful for an answer here.

Thanks in advance.

Upvotes: 4

Views: 1657

Answers (2)

Jan Klan
Jan Klan

Reputation: 884

You can, as long as you don't need advanced SPA-like interactions to work out of the box. This means, for example dropdowns, modals, date pickers, wizards, ...

Most of the user interaction functionality can be achieved without using Angular, but in most of those cases, it is a real pain to do so. You'll have to work out what's happening in the background and write your own JavaScript handlers to emulate what is normally done by Angular components.

Regarding the user interaction, You'll be definitely able to employ dropdowns, responsive side menus and modals. For the static elements, you can use probably everything you see in the docs. Sometimes though you'll have to dig HTML code generated through Angular-based example.

Note: I've been successfully using Clarity UI for a number of dashboards without Angular with a satisfactory degree of success.

Upvotes: 1

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

Clarity has CSS and Angular components. The CSS styling for any component is provided through the clarity-ui package, and the clarity-angular package has Angular implementations of some of the more complex components. For example, a CSS only datagrid is not possible so the Angular component is the only way to use the datagrid. However, if you wanted to use the datagrid CSS and build your own implementation of the datagrid you are free to do so. The documentation page https://vmware.github.io/clarity/documentation shows the list of components that have an Angular (NG) component.

To have the best Clarity experience today, you would need to use Angular for access to all of the components and implementations, otherwise you'll be on the hook to build the Javascript implementation for the complex behaviors that CSS can't support.

Upvotes: 5

Related Questions