Clarity Core Web Components

Clarity Core is a suite of Web Components for Clarity Design System.

Quick Start Install

1. First, install the Clarity Core package from npm.

   npm install @clr/core --save

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