Clarity Core Web Components
Clarity Core is a suite of Web Components for Clarity Design System.
Quick Start Install
-
First, install the Clarity Core package from npm.
npm install @clr/core --save
-
Import desired Web Component into your JavaScript or TypeScript
import '@clr/core/modal/register.js';
Full installation steps can be found in the Core Getting Started Guide.
Usage
No Framework
<cds-modal size="lg">
<p>slot content</p>
</cds-modal>
<script>
const modal = document.querySelector('cds-modal');
modal.addEventListener('closeChange', event => console.log(event));
modal.closable = true;
</script>Angular
<!--
- `size` is set as an HTML attribute so no binding syntax is used
- [closable] is setting a property on the element
- (closeChange) is listening for the `closeChange` custom event
-->
<cds-modal size="lg" [closable]="booleanValue" (closeChange)="log($event.detail)">
<p>slot content</p>
</cds-modal>Vue
<!--
- `size` is set as an HTML attribute so no binding syntax is used
- :closable is setting a property on the element
- @closeChange is listening for the `closeChange` custom event
-->
<cds-modal size="lg" :closable="booleanValue" @closeChange="log($event.detail)">
<p>slot content</p>
</cds-modal>
React via @clr/react package
/*
- `size` unlike the examples above `size` is set as a property
- closable is setting a property on the element
- onCloseChange is listening for the `closeChange` custom event
*/
<CdsModal size="lg" closable={this.state.booleanValue} onCloseChange={this.log}>
<p>slot content</p>
</CdsModal>