-
First, install the Clarity Core package from npm.
npm install @cds/core --save
-
Import desired Web Component into your JavaScript or TypeScript
import '@cds/core/modal';
-
Use Web Component in desired framework template
<!-- - size - a attribute style hook - [open] - setting a property on the element - (openChange) - listening for the `openChange` custom event --> <cds-modal size="lg" [open]="true" (openChange)="log($event.detail)"> <p>slot content</p> </cds-modal>
<!-- Example of a modal web component in Vue - size - a attribute style hook - :open - setting a property on the element - @openChange - listening for the `openChange` custom event --> <cds-modal large :open="true" @openChange="log($event.detail)"> <p>slot content</p> </cds-modal>
{ /* Example of a modal web component in React with React Shim - size - a attribute style hook - open - setting a property on the element - openChange - listening for the `openChange` custom event */ } <CdsModal large open={this.state.open} openChange={this.log}> <p>slot content</p> </CdsModal>;
This repository has been archived by the owner on Mar 27, 2023. It is now read-only.