@drayman/elements

@drayman/elements is an official collection of Web Components compatible with Drayman.

• Docs
• GitHub repo

Available Web Components

• drayman-button
• drayman-menu
• drayman-checkbox
• drayman-claviz-charts
• drayman-datepicker
• drayman-file-uploader
• drayman-ngx-charts
• drayman-ngx-graph
• drayman-number-field
• drayman-pdf-viewer
• drayman-radio-group
• drayman-select
• drayman-table
• drayman-text-field
• drayman-textarea-field
• drayman-timepicker
• drayman-youtube-player
• drayman-grid
• drayman-nebula
• drayman-code-editor

Installing

Add Drayman Elements to your Drayman project:

npm install @drayman/elements@latest

Add required scripts to public/index.html header:

<link  rel="stylesheet"  href="https://unpkg.com/@angular/material@12.2.4/prebuilt-themes/indigo-pink.css"/><script src="https://unpkg.com/zone.js@0.11.4/dist/zone.min.js"></script>

Use Drayman Elements inside component script:

export const component: DraymanComponent = async ({ forceUpdate }) => {  let counter = 0;
  return () => {    return (      <div>        <drayman-button          label="Click me"          onClick={async () => {            counter++;            await forceUpdate();          }}        />        <p>Button was clicked {counter} times</p>      </div>    );  };};