@drayman/elements

Docs

Default drayman elements library.

Available elements

• drayman-button
• drayman-menu
• drayman-checkbox
• drayman-claviz-charts
• drayman-datepicker
• drayman-gauge
• 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
• drayman-calendar

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>
    );
  };
};

Development

Adding new Drayman Element

1. Run command:

sudo npm run create-element -- %%element-name-in-kebab-case%% %%ElementNameInPascalCase%%

2. Update package.json with scripts and drayman.

3. Update tsconfig.json with inputFiles.