@clr/core
TypeScript icon, indicating that this package has built-in type declarations

4.0.15 • Public • Published

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>

Readme

Keywords

none

Package Sidebar

Install

npm i @clr/core

Weekly Downloads

2,991

Version

4.0.15

License

MIT

Unpacked Size

3.94 MB

Total Files

1820

Last publish

Collaborators

  • dtsanevmw
  • clarity-service-account
  • kevinbuhmann
  • wernest
  • jinnie