4.0.15 • Published 3 years ago
@clr/core v4.0.15
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>
4.0.15
3 years ago
4.0.14
3 years ago
4.0.13
3 years ago
4.0.12
3 years ago
4.0.11
3 years ago
4.0.10
3 years ago
3.1.15
3 years ago
4.0.9
3 years ago
4.0.8
3 years ago
3.1.14
3 years ago
4.0.7
3 years ago
3.1.13
3 years ago
3.1.12
3 years ago
4.0.6
3 years ago
3.1.11
4 years ago
4.0.5
4 years ago
3.1.10
4 years ago
4.0.4
4 years ago
3.1.9
4 years ago
4.0.3
4 years ago
3.1.8
4 years ago
4.0.2
4 years ago
4.0.1
4 years ago
3.1.7
4 years ago
4.0.0
4 years ago
3.1.6
4 years ago
3.1.5
4 years ago
4.0.0-rc.1
4 years ago
4.0.0-rc.0
4 years ago
3.1.4
4 years ago
3.1.3
4 years ago
3.1.2
4 years ago
3.1.1
4 years ago
3.1.0
4 years ago
3.0.1
4 years ago
3.0.0
4 years ago
3.0.0-rc.1
4 years ago
3.0.0-next.8
4 years ago
3.0.0-next.7
4 years ago
3.0.0-next.6
4 years ago
3.0.0-next.5
4 years ago
3.0.0-next.4
4 years ago
3.0.0-next.3
4 years ago