∺ Hingejs - WebComponents

A Suite of Web Components to be used in the UI

These are built under the custom elements spec. These tags can be dropped into any front end application that supports them, which is all modern browsers. A polyfill can be added for older browsers.

You can use this package in addition to your own.

This is a work in progress until a 1.0.0 release.

Live demos

• https://hingejs.github.io/webcomponents/

Wiki

• https://github.com/hingejs/generator/wiki#learn-to-build-custom-elements

Related packages

• https://www.npmjs.com/package/@hingejs/generator
• https://www.npmjs.com/package/@hingejs/services

Install

$ npm install @hingejs/webcomponents --save

CDN

https://cdn.jsdelivr.net/npm/@hingejs/webcomponents/index.min.js

or by version

https://cdn.jsdelivr.net/npm/@hingejs/[email protected]/index.min.js

https://cdn.jsdelivr.net/npm/@hingejs/webcomponents@latest/index.min.js

<script type="module" src="https://cdn.jsdelivr.net/npm/@hingejs/webcomponents/index.min.js"></script>

Individual elements

<script type="module" src="https://cdn.jsdelivr.net/npm/@hingejs/webcomponents@latest/src/accordion-slider/index.js"></script>

Webpack

All elements

import '@hingejs/webcomponents'

Individual elements

import '@hingejs/webcomponents/src/accordion-slider/index.js'
import '@hingejs/webcomponents/src/characters-remaining/index.js'
import '@hingejs/webcomponents/src/content-loader/index.js'
import '@hingejs/webcomponents/src/content-loader/index.js'
import '@hingejs/webcomponents/src/json-syntax/index.js'
import '@hingejs/webcomponents/src/route/index.js'
import '@hingejs/webcomponents/src/side-notification/index.js'
import '@hingejs/webcomponents/src/table-sort/index.js'
import '@hingejs/webcomponents/src/tool-tip/index.js'
import '@hingejs/webcomponents/src/touch-swipe/index.js'

CSS Variables to style components using shadow-dom

--primary: #4d68cb;
--on-primary: #fff;
--primary-variant: #0026ad;
--secondary: #506be5;
--on-secondary: #fff;
--success: #5ba014;
--error: #d05050;
--header: #f5f5f5;
--on-header: #494949;
--nav: #fff;
--on-nav: #000;
--background: #fff;
--on-background: #4d68cb;
--surface: #fff;
--on-surface: #212121;