@seniorsistemas/tecnologia-webcomponents
v0.10.0
Published
A webcomponents library for Senior Sistemas - Suite BPM products.
Downloads
100
Maintainers
Readme
Tecnologia web components
This is a Work in Progress Web components library made by BPM Suite team.
Browser Support
| Chrome | New Edge (Chromium) | Safari | Firefox | Older Edge | IE | | ------ | ------------------- | ------ | ------- | ----------------- | ----------------- | | 60+ | 79+ | 10.1+ | 63+ | 16-18 (polyfills) | >= 11 (polyfills) |
How to install
NPM
Install dependency:
npm i @seniorsistemas/tecnologia-webcomponents
And import tecnologia-webcomponents.esm.js
:
<script src="@seniorsistemas/tecnologia-webcomponents/dist/tecnologia-webcomponents/tecnologia-webcomponents.esm.js" type="module"></script>
For legacy projects import tecnologia-webcomponents.js
:
<script src="@seniorsistemas/tecnologia-webcomponents/dist/tecnologia-webcomponents/tecnologia-webcomponents.js" type="text/javascript"></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.tecnologia.senior.com.br/platform/tecnologia-webcomponents/master/tecnologia-webcomponents/tecnologia-webcomponents.esm.js" type="module"></script>
For legacy projects use:
<script src="https://cdn.tecnologia.senior.com.br/platform/tecnologia-webcomponents/master/tecnologia-webcomponents/tecnologia-webcomponents.js" type="text/javascript"></script>
Release candidate (develop branch)
(ATTENTION!! Not use for production!)
<script src="https://cdn.tecnologia.senior.com.br/platform/tecnologia-webcomponents/develop/tecnologia-webcomponents/tecnologia-webcomponents.js"></script>
Other alternative is use UNPKG, for this, overwrite with the following URL:
https://unpkg.com/@seniorsistemas/tecnologia-webcomponents@latest/dist/tecnologia-webcomponents/tecnologia-webcomponents.js
Angular applications
npm i @seniorsistemas/tecnologia-webcomponents
In your app.module.ts
declare CUSTOM_ELEMENTS_SCHEMA
:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // <-- import from here
@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 '@seniorsistemas/tecnologia-webcomponents/loader';
defineCustomElements();
// for IE support (optional)
applyPolyfills().then(() => {
defineCustomElements()
})
React applications
yarn add @seniorsistemas/tecnologia-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 '@seniorsistemas/tecnologia-webcomponents/loader';
defineCustomElements();
// for IE support (optional)
applyPolyfills().then(() => {
defineCustomElements()
})
I want to contribute
View contribution guide.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!