A library containing Angular components built on the top of the Clarity Design System, which we use in our internal projects in extrawest.com.
The library is under development. Any suggestions would be highly appreciated.
Required deps:
- Angular 17.3.0 or later
- Clarity: 17.0.0 or later
The latest version with Angular 16 support is 0.17.2 (based on Clarity 15), and for Angular 15 - 0.15.22.
The library is available as a npm-package.
You can add it to your project with npm or yarn:
npm install @extrawest/extra-clarity
yarn add @extrawest/extra-clarityTo work with the library, you also need to add the Clarity packages:
npm i @cds/angular @cds/core @clr/angular @clr/ui
yarn add @cds/angular @cds/core @clr/angular @clr/uiAnd then add the global Clarity styles to your angular.json config:
"styles": [
"node_modules/@cds/core/global.min.css",
"node_modules/@cds/core/styles/theme.dark.min.css",
"node_modules/@clr/ui/clr-ui.min.css"
... any other styles
]and add the cds-theme="light" attribute to the body element in your main HTML file:
<body cds-theme="light" />Please refer to the Clarity docs for more details on 'Adding Clarity to an Existing Angular Application'.
For the details about the available components and live examples, please refer to our Storybook-based documentation site.
We are working on adding more information to it.
- Auto refresh toggle
- Auto refresh toggle with manual refresh button
- Copy-to-clipboard button
- Confirmation dialog
- Dialog (reactive)
- Datagrid cell wrapper (with truncation and the copy-to-clipboard button
- Datagrid filters:
- with editable string value
- with enumerated value from single selection (radio buttons)
- with enumerated value from multiple selection (checkboxes)
- with enumerated value from multiple selection within grouped options (tree-view with checkboxes)
- with time range selection (from presets or manually with date-time pickers)
- Floating notifications
- Popover toggle
- Progress spinner
- Router link wrapper
- Search bar
- Sidebar navigation
- etc.
Some of our components may include code from these third-party libraries: