Package Exports

@tiagoboeing/anywhere-webcomponents

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tiagoboeing/anywhere-webcomponents) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Anywhere web components

Demo here | Roadmap

This project is a work in progress. See projects page to track all status.

The design system and specifications still are open but should be inspired in Nebular and Bootstrap.

Give feedback

Write a comment about Design System, give your feedback!

Browser Support

Chrome	New Edge (Chromium)	Safari	Firefox	Older Edge	IE
60+	79+	10.1+	63+	16-18 (polyfills)	>= 11 (polyfills)

See complete docs

How to install

NPM

Install dependency:

npm i @tiagoboeing/anywhere-webcomponents

And import anywhere-webcomponents.js:

<script src="@tiagoboeing/anywhere-webcomponents/dist/anywhere-webcomponents/anywhere-webcomponents.js"></script>

For use in frameworks, see the Stencil page.

Via CDN (release candidate)

Now you can test components in a HTML page importing via script from CDN.

Stable

<script src="https://cdn.tiagoboeing.com/anywhere-webcomponents/master/anywhere-webcomponents/anywhere-webcomponents.js"></script>
<aw-button label="Primary" mode="square" color="outline" status="success"></aw-button>

Release candidate (develop branch)

(ATTENTION!! Not use for production!)

<script src="https://cdn.tiagoboeing.com/anywhere-webcomponents/develop/anywhere-webcomponents/anywhere-webcomponents.js"></script>
<aw-button label="Primary" mode="square" color="outline" status="success"></aw-button>

Angular applications

npm i @tiagoboeing/anywhere-webcomponents

In your app.module.ts declare CUSTOM_ELEMENTS_SCHEMA:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]   // <-- declare this
})
export class AppModule { }

And in main.ts end of file, add following imports:

import { applyPolyfills, defineCustomElements } from '@tiagoboeing/anywhere-webcomponents/loader';

defineCustomElements();

// for IE support (optional)
applyPolyfills().then(() => {
  defineCustomElements()
})

React applications

yarn add @tiagoboeing/anywhere-webcomponents

In your src/index.js or src/index.tsx (typescript project) file, add following imports preferably before of the React Render:

import { applyPolyfills, defineCustomElements } from '@tiagoboeing/anywhere-webcomponents/loader';

defineCustomElements();

// for IE support (optional)
applyPolyfills().then(() => {
  defineCustomElements()
})

Components status

See projects page to track all status.

I want contribute

View contribution guide.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Tiago Boeing}
💻 📆 🤔 🎨

_{lucas souza matos}
📖

This project follows the all-contributors specification. Contributions of any kind welcome!