
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@clr/core
Advanced tools
Clarity Core is a suite of Web Components for Clarity Design System.
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.
<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>
<!--
- `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>
<!--
- `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>
@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>
FAQs
Clarity Design System Web Components
We found that @clr/core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.