https://github.com/allenhwkim/elements-x

Collection of Customizable Custom Elements
https://github.com/allenhwkim/elements-x

ace-editor barcode-generator calendar color-picker custom-elements data-table dialog flag highlightjs mapbox pagination qrcode tabs typing-effect

Last synced: 3 months ago
JSON representation

Collection of Customizable Custom Elements

• Host: GitHub
• URL: https://github.com/allenhwkim/elements-x
• Owner: allenhwkim
• Created: 2020-08-18T19:43:56.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-01-04T23:17:19.000Z (about 1 year ago)
• Last Synced: 2024-04-14T10:08:18.148Z (9 months ago)
• Topics: ace-editor, barcode-generator, calendar, color-picker, custom-elements, data-table, dialog, flag, highlightjs, mapbox, pagination, qrcode, tabs, typing-effect
• Language: TypeScript
• Homepage: https://elements-x.com
• Size: 44.5 MB
• Stars: 23
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elements-x



## npm usage 

[Example](https://stackblitz.com/edit/elements-x)

1. Install elements-x, `$ npm install elements-X -D`

2. Import into your code to define all custom elements, `import 'elements-x`

3. Use it like html tags, e.g. ``

## browser usage

[Example](https://unpkg.com/elements-x/dist/lib/test.html)

```

   

  

```

## Import

```

/* To import all elements and define custom elements */

import 'elements-x';

/* To import and define all core elements */

import 'elements-x/dist/lib/core.umd.js'; 

/* To import and define all extended elements */

import 'elements-x/dist/lib/extended.umd.js'; 

/* To import and define only one element */

window.X = {override: true};

import { Calendar } from 'elements-x';

// import { Calendar } from './my-own-calendar';

customElements.define('x-calendar', Calendar);

```

## Core elements

 * Calendar

 * ComboBox (Input with dropdown)

 * Dropdown (Display as dropdown underneath of input or button)

 * File

 * List (Show hierarchy and select from it)

 * Map (Openlayer map)

 * Masked (Input with mask)

 * Pagination 

 * Resize

 * SideBar

 * Table (array of inputs, or table-structured inputs)

## Extended elements

 * BarCode

 * Clock

 * Highlight (Code syntax prettifier)

 * Json (Collapsible JSON viewer) 

 * Monaco (Code editor)

 * QRCode

 * Stepper(form stepper)

 * Formflow (Form flow diagram with Reactflow)

 * Formdesigner (A page designer with GrapesJs)