清晰的核心网络组件

清晰核心是用于 清晰设计系统。 。 。 .

快速启动安装

1. 首先从 npm 安装 Clarity Core 包 .

   npm install @cds/core --save
   

2. 将想要的 Web 组件导入到您的 JavaScript 或 TypeScript

   import '@cds/core/modal/register.js';
   

完整的安装步骤可见于 核心启动指南。 。 。 .

使用量

无框架

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

通过 @cds/react 软件包

/*
  - `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>